Apple has one of the cleanest designed sites on the web, which is usually hard to achieve with so much volume, just look at craigslist. So today I dedicate this post to the awesomeness of Apple and their beautiful site. Today we will try to recreate the Apple navigation bar on their current website.

PART TWO IS HERE LEARN HOW TO CODE THIS EXAMPLE HERE – Which will show you how to code this using the CSS Sprite technique so Stay Tuned.

Here is a preview of what we are creating today:

Creating the background

1. Create a photoshop document that is 900 pixels wide and 75 pixels high. See below to get the exact settings.

2. Create a new layer (Layer > New > Layer…) Then choose the Rounded Rectangle Tool and set your foreground color to black (Hit the X key on your keyboard). Up at the top set your Radius to 8px. Then click on the Down arrow directly to the left of the radius box and click on FIXED SIZE. Set the width to 877px and the height to 38px

3. Now lets add the gradient instead of having just a black background. Right click on the layer we just added the shape to and select blending options. Check the Gradient overlay option. Double click inside the preview of what your gradient will look like which is directly to the left of the reverse check box. It should give you the dialog box below.

4. Double click on the color stop on the bottom left. There are four color stops showing, they look like small houses.

5. Once you do that it will bring up your color dialog box type in 848484.

6. Now double click on the color stop all the way to the right on the bottom and set the color to c7c7c7.

7. Now we need to add another color stop so click somewhere in the middle right below the gradient strip to add another color stop, another house looking thing should appear. Position in around the same spot you see in the screenshot below.

8. Double click on the newly created color stop and type in the hex code of #848484 like we did in step five.

The finished gradient dialog box should look like my screenshot below.

9. This is the conclusion of the background section this is what we should have up to this point. If you do not have this go back through and try again.

Adding Separator Lines

10. Now it is time to create the separators between each of the navigation items. Grab your line tool, and make sure your weight is set to 1px. CREATE A NEW LAYER. Put your cursor so it is flush with the top if the navigation click and then hold shift and drag down until it meets the bottom edge of the navigation then release. You should have something similar to below.

11. Once you have that line drawn successfully use the shortcut Control + J five times. This will duplicate that line you just made six times. Then evenly distribute each of the lines by pressing the “V” key on your keyboard and then using your right arrow key on your keyboard. See the example below to get the right spacing.

12. Once you have them all lined up select all of the lines you just created and drag them down to the new layer icon in your layers palette. This will copy all of the layers. Right click on any selected layer and choose merge layers. Hide the other horizontal lines for the moment. Right click and choose blending options. Choose gradient overlay and click on your bottom left color stop and change it to #565656 and then change the bottom right color stop to #8f8f8f.

Adding The Text

13. Set your font to Helvetica 12pt BOLD with the hex code #262626. Click in the middle of the first section and type Apple.

14. Continue to fill in each section, use the screenshot below as a reference

15. Now to add the pressed text look. Click on the text layer where you just typed Apple and hit control + j (pc) or command + j (mac). Now hit the “V” key on your keyboard and hit the down arrow once, what this does is it first duplicates the layer and secondly moves it down 1 pixel. Now move the newly created Apple Copy layer underneath the first apple layer.

16. Right click on the Apple Copy Layer and choose blending options. Check the color overlay option and put in the hex code #c1c1c1. This will make the text appear as if it is being pressed in.

17. Repeat steps 15-16 on each one of the navigation items Apple through Support. This effect must be applied to all of the text on the navigation bar.

Finished!!

Click for the finished product.

Click here to download source files

Technorati Tags: Apple Navigation tutorial, Navigation photoshop tutorial, menu tutorial, Apple menu tutorial

Written by Shane Jeffers

Shane Jeffers is the Creator and Author of Three Styles. He has a unique passion for design trends and tutorials. Reach him through the Contact page or follow him on twitter @ThreeStyles