Create a Sprite Navigation set in Photoshop with this tutorial along with coding your navigation in functional XHTML & CSS.

Step 1 – The inevitable ‘New Document’

Open Photoshop and create a New Document.

Knowing already the dimensions for my navigation bar (bar height x 4), I’ve gone with a canvas size of W:950 pixels and H:143 pixels.

Step 2 – Base layer

In a new layer, using the ‘Rounded Rectangle Tool’ and with a Radius of 3px, draw in the base for your navigation bar.

The width of this base is 950 pixels wide and 35 pixels tall.

Go to the Layer Styles of that layer (double clicking the layer) and select Gradient, applying the following settings.

If you are looking for a more subtle background gradient, leave the Scale up around 75-100%.

Step 3 –Separate Menu Items

Using Guides, break up your navigation bar into the menu items you will list.

I know I am going to have in this example 5 items along with a logo to the left so I have created 6 separators with space at the end.

Next create a new layer above ‘everything’ and using the Single Column Marquee Tool, create a white filled vertical line along the right side of each guide.

Hide – or delete - your guides (Ctrl + ;)

Step 4 – Text Links

Using the Type Tool, click and drag an area the width of the menu item and setting your text to Center align. I have chosen to begin one place in, as I will be also including a graphic in the first area in place of a home button.

Type in the text for your first menu item, using your own desired font. For this tutorial, I am using Ronda (Medium).

Next, duplicate the layer and drag it across to the next menu item. The way I do this, is by holding Ctrl + Shift, clicking and dragging the layer to the desired position. This will automatically create a duplicate of the layer while moving it at the same time.

Type in the text for this next menu item and repeat the steps until you have your fist instance navigation.

Step 5 – Logo

In the first tab, we are going to incorporate a logo that will symbolise the home page. A particular logo that also was recently features within UK Google Maps, Street View ;)

Step 7 – Label, Group & Duplicate

One thing that I constantly do through any creation in Photoshop or Illustrator is label and group items. If you’ve not already done this, I suggest going through and doing so now, so in the event we need to go back and make a change or use this as a future template we can find out where things are quickly.

Duplicate the layer and bring it down directly below the first.

Step 8 – :hover

Next, to create an interactive effect when we hover over each menu item, we will simply lighten the base image in the duplicated layer.

Select this layer and go to Hue/Saturation… (Ctrl + u), lighten the layer by +7. Next, go into the Layer Styles and bring down the opacity of the gradient to match.

Step 9 – :active

Now to create an active state for our navigation sprite. Duplicate the layer and again bring it down directly below the second.

Create a layer above the base layer, use the Rectangular Marquee Tool and select an area the width of a single menu item. Fill that layer and lower the Fill to 0%.

Apply the following Inner Glow, Layer Style and click OK.

As we have used the Multiply blend mode with a dark shade we create quite easily an Inner Shadow.

Next, clip the layer with the base  [Alt-click (or command-click) between the Shadow layer and Base] OR [ Layer » Create Clipping Mask ]  and stretch the image down until the bottom shadow is no longer visible on the menu item.

Duplicate this layer along the other menu items until you have something similar (or identical) to this:

Step 10 – .current

Finally, we can create a state that we might want to implement for any current menu items.

Duplicate our last :active sprite and bringing it down below, darkening it in the same way we achieved for our :hover state by around -40. You might also decide – as I have – to darken the separator lines down by lowering the opacity.

Finally, save your image and you’re done creating your Sprite Navigation Set.

In the next tutorial we will work again with this finished image but coding it into XHTML and CSS.