Spacing nav menu type

Question

When designing a horizontal menu for a website in photoshop (like the img attahced) whats the best way to space them ?

In html/css i would just use float:right; margin-left:20px; but in photoshop the only way i can think of doing it is spacing out the text using the spacebar or making each peice of text its own text box and then spacing the using guides.

Neither method is great as if you want to go back and make a change you have to change the spacing between each word/button.

Please also bare in mind that some buttons have two words in them ie."ask question" so you cant really use a method that leaves a huge gaps between all words.

Answer 1

With a Photoshop layout there is no real automated manner because the user can't set anything to be dynamic. The CSS for things like this is completely dynamic.

In addition, Photoshop currently doesn't have a "distribute spacing" option similar to Illustrator or Fireworks. This is really what is needed in Photoshop but it simply doesn't exist. This further complicates the issue.

This is one area where Photoshop is severly lacking. I've submitted a feature request to add a distribute spacing option. However, there's no telling when, or even if, such a feature will ever be added.

Until that time, if you must use Photoshop, there are scripts which can distribute items evenly for you.

Distribute items horizontally script

Distribute items vertically script

Be aware, the scripts work on the layer level. So if you have buttons which include a background shape layer and a text layer. You'll want to make each of those buttons a separate smart object (so they are a single layer) before running the scripts.

And then, if you alter one of the objects, you'll want to run the script again to re-space everything.