Anyone who has an iPod, iPhone, or any other Apple product more than likely has visited there website to get some sort of details on the product you will purchase. I do not have any of Apple’s products, but I do visit their website often because I love the look of it. So, in this tutorial, I will help you create the Apple’s navigation bar. In part one of two, I will design the actual navigation bar in Photoshop.

Step One

Open up Photoshop, create a new document and make it 1000 pixels wide by 47 pixel high.

Step Two

Click the Rounded Rectange Tool, , choose 4 for the radius, and make your shape. I used a red background to make it easier to see. I have this:
(Click image for full view)

Step Three

Add the following effects to the nav bar.

Gradient Overlay

Click image for full view.

Step Four

Add the Apple logo and the text. Use this for the apple logo. For the text, I used Veranda set at 11 pts and bold. Set it up to leave enough room at the right for the search field. The search field will be added in the part 2.
(Click image for full view)

Step Five

Add the following blending options to the text. This will be used for the ‘normal’ state.

Drop Shadow

Step Six

Make a new folder and put in the three layers you have right now. Name this folder normal.

Close the folder, drag to to the new layer icon, and name the new folder hover.

Step Seven (see edit’s at the bottom)

Open up the hover folder and make change to the blending options to the third layer (the nav bar).

Inner Shadow

Gradient Overlay

Now change the follow of the font to black. Change the drop shadow to white.
(click image for full view)

(This is wrong, please see updates at the bottom)

Step Eight

Add the lines that separate the links. Add a two new layers above the hover folder. The first layer will be a line from top to bottom in 6a6a6a. And two lines next to it (in the second layer) in white. Make the first layers opacity 42% and the second layer 9%.

Then make copies of them and move them over so they are between the rest of the links.

Click images to view larger.

Step Eight

Save the normal state and the hover state as png’s. Once you do that, you want to turn them into one image. Make the hover effect under the normal state. You new image will look like this (its ONE image):

Edit to Step Seven

I found that my Step Seven looks identical to Apple’s ‘active’ link. Therefore, I am glad you saved that, however, that was for the active stage. Apply the following settings to the nav bar layer for the hover stage:

HELP SPREAD THE WORD!

Related Posts

• Tutorial: Coding the Apple’s Navigation Bar (Part 2 of 2)
• Tutorial: Image Rollover in CSS
• Tutorial: Draggable Div with Open and Close Links.
• Tutorial: Draggable Div