How To Create the iTunes Store Navigation Bar

In this tutorial we’re going to recreate the nav bar for the iTunes Store in Photoshop CS4. The techniques used should be able to be done using CS2 and 3 so if you don’t have the latest Adobe Creative Suite you can still follow along. At the end of the post you will find a downloadable zip file containing the completed PSD.

Let’s start by creating a new document 600px by 150px.

Next, create a shape layer that’s 600px wide and 24px tall. This will serve as the base of our nav bar. Name this layer whatever you want, but for this tutorial I named it, “nav-bar-bg”.

Now we want to apply some layer styles to “nav-bar-bg”. Start with the “Gradient Overlay” using the settings from the image below.

The colors we want to use are “1e1e1e” for the left (bottom) color and “202020″ for the right (top) color.

Leaving the Layer Style palette open check the box for Inner Glow. Use the settings from the below image and change the color to “4e4e4e”

Lastly, with the Layer Style palette still open check the Stroke and change the settings to what you see below with a color of “101010″. Now apply this style by clicking “OK” or just hit “Enter”.

Now we’ll move on to the glossy highlight. Create a new shape layer above nav-bar-bg that is 600px wide but this time only 11px tall.

TIP: You could duplicate the nav-bar-bg layer by selecting the Layer and hitting CMD/Ctrl+J which will create a copy of that layer above. Then you just remove the styles and transform it to the correct size.

 

Now rename this layer, “highlight” and nudge it 1px down from the top of the base.

To give the highlight that glossy shine, we’ll apply a Gradient Overlay setting both the top and bottom colors of the gradient to white. This time we’ll be adjusting the gradients opacity which we do with the top “ticks”. Changing the left (bottom) of the gradient to 50% opacity and we’ll leave the right (top) at 100%.

With the Layer Effects dialog box still open, we will adjust the “Fill” and “Opacity” of the overall settings. Changing the “Opacity” to zero and set the “Fill” at 14% (or so).

The end result should have your document looking like this.

Our next task it to create the inset dividers that go between each of the links. First we need to create a new layer, no need to name it yet. To create the 1px thick line you could use the Line Tool and set the width to 1px, but there is always some aliasing on the shape and it’s not a perfect 1px line so, we’re going to use the Marquee Tool and change the style to a fixed size of 1px wide and 100px tall as seen below.

Now fill this layer with white and then deselect by hitting Cmd/Ctrl+D.

TIP: If you ever need to fill with either Black or White the quickest way is to hit "D" on your keyboard, this will put the foreground and background color to its default state and then hit Cmd+Delete (Mac) and Ctrl+Backspace (PC) to Fill with Background (white) and Opt+Delete (Mac) and Alt+Backspace (PC) to Fill with Foreground (black).

Now that we have the 1px white line, we need to create the shadow of the inset. To do this we’ll duplicate the white line. We’ll use the "Duplicate Layer" tip we learned earlier. With the white line selected hit Cmd/Ctrl+J. Now you should have an exact copy of the white line in the layer just above the original.

Next we need to change this line to black and we do this by hitting Cmd/Ctrl+I (Invert) and we nudge this line to the right by 1px.

Our next step is to change the opacity on both of these lines so we’ll set the Opacity of the White Line to 20% and the black line to 50%.

TIP: Did you know you can change a layers opacity in increments of 10 by hitting the number keys 1 through 0 with the Select Tool (V) active? 1 being 10% and 0 100%.

 

After we’ve set the opacity on both of the lines let’s merge them together by highlighting both layers and hitting Cmd/Ctrl+E. Now we can rename this layer to "divider"

By now you might be wondering why these lines are way longer than they need to be. Well let’s get into that right now shall we?

Since we’re going to be using this inset divider quite a few times, and you may have made, or may want to make your nav bar deeper than we did in this tutorial, what we’ll do is create a mask that’s the same size as our base and will hide all of the overlapping bits.

With the divider layer selected we create a group by hitting Cmd/Ctrl+G and we’ll name this group, "Dividers"

This next step we’re going to create a mask on the “Dividers” group layer that is the exact size as the nav-bar-bg. So, with the "Dividers" Group as the active layer we will Cmd/Ctrl+click. This will give us a selection in the shape of nav-bar-bg, but on the group layer "Dividers".

With the group layer, “Dividers” selected we create a Layer Mask by going to Layer > Layer Mask > Reveal All.

Now hit Cmd+Del (Mac) or Ctrl+Backspace (PC) to fill the selection and hit Cmd/Ctrl+D to deselect. But wait!! The divider is missing over the base and the naughty parts are hangin out all over the place!! No problem, a simple Cmd/Ctrl+I to invert that mask and viola! We have a perfect height divider.

Now that our navigation bar is looking pretty good, all we need is some text, some icons, and some more of these dividers separating them. We will go through these steps fairly quickly since I’m sure you’re itching to get started on your own version of this nav bar.

So let’s get our text in there first. The font I found that most closely matches the iTunes nav-bar font is Tahoma 11pt bold, with a kerning of 10 and the anti-alias set to "Crisp". Let’s type some link names in and change the font to these settings.

Next we’ll add our dividers between each of our links. With the "divider" layer selected drag the divider while holding down Opt/Alt+Shift and moving it into place.

Opt/Alt will drag a copy and adding the “Shift” key locks the object on it’s vertical or horizontal plane.

The last step is to add our "Home" and "Left/Right" icons. We’ve supplied our own home and arrow icons in the download for you to use any way you wish, or not at all, but I will show you how to style them. Let’s get to that now.

The "Home" doesn’t need any styling really but the arrows do. So if you’ve used the supplied arrows you can just follow along. But if you created your own here’s how we’ll dress them up.

We set the color of the arrow to "6F6F6F" and add an Inner Shadow with the settings below.

That’s it! We’ve created all the elements needed (sans home icon) and styled them all to look like the Apple iTunes interface.

I really enjoyed creating this tutorial and hope you enjoyed reading it. I’d like to think that you not only learned how to create this interface but that you will be able to apply some of the techniques we used in other designs you create.

Download the Finished PSD Here.