An empty cup How I learned to become a failure Designisnowhere The Junior & The Art Director A Case for Space Crappy club for jerks Boxed In Zero for hire HiiDef Inc. Identity A New Page (& Year) Portfolio Building Ignorance Avoidance Dynamic Columns Flat Shadows Upright Shadows The real Jim Shady Design with a point of view TweetDeck icons Get creative, you hack MacUser Magazine Expression Engine: Quick & dirty Back in business Swiss for WordPress Stepping into web design Navigation spacing in Photoshop .NET mag fame Design by numbers Proper propaganda Stats: One month in Pimped! The ever-watchful subconscious Designing for the web: 5 things I love & hate Ripped! Fun with a tablet Incestuous design A New Beginning Logo marathon Making it real What’s in a name? Tippin’ the Balance

Here’s a tiny trick in Photoshop for having evenly spaced text items for things like horizontal navigation menus.

—Published 02 February, 2009

So most of the time if you’re a good little designer you’ll be using grids to space out things like navigation items. But there are times when it just doesn’t work in the design to have items spaced in terms of their position on a grid. In these cases, you’ll probably want the text items to be spread out evenly.

Step 1.

In Photoshop, choose the type tool and click and drag a box (don’t just click).
Type in the navigation items you want and separate them with a space. If the navigation item is more than one word, leave the spaces between these words out.

navspacing_tut_02
Step 2.

Now go to your ‘Paragraph’ palette and choose the ‘Justify All’ button on the very right.

navspacing_tut_03
Step 3.

Grab the edge of the text box and stretch it out to as wide or narrow as you need. You’ll notice all the words spread out evenly.

navspacing_tut_04
Step 4.

Fix up any multiple-word items by highlighting the letter before where the space should be and bumping up the tracking (on the Character palette) until it looks right. You can use Alt+Left Arrow and Alt+Right Arrow on the keyboard for precision.

navspacing_tut_05
Finito

What I like about this is that you have the flexibility to adjust all the items very quickly and accurately while you’re designing a page layout. It also saves having 7 or 8 text layers for one horizontal navigation list.

Keep in mind this is just one way that works for me. There could be better ways, and if you know one, don’t be shy!

navspacing_tut_06

↑↑↑