Take the 2-minute tour ×

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.


share|improve this question
I don't do this type of design work but have you tried Fireworks? It very well could have the solution you're looking for. –  Ryan Jun 18 '12 at 19:36
If you're thinking in CSS, why even bother doing in it PhotoShop? Just design in HTML/CSS. There are lots of things that are often easier/quicker to do in HTML/CSS than in PhotoShop. –  DA01 Jun 18 '12 at 20:48
add comment

1 Answer

up vote 2 down vote accepted

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.

share|improve this answer
add comment

Your Answer


