Apple Navigation Bar

32 Comments
Navigation Bar, Web Graphics, Web Design

Learn how to create the newest Apple navigation bar that is being used at their site.

1. Start by opening a new 500px * 50px file.
2. Using the Rectangular Marquee Tool, set a Fixed Size of 480px width and 35px height, and make a selection inside the canvas
Apple Navigation Bar Photoshop Tutorials

3. Now, go to Select -> Modify -> Smooth and apply 3px radius. Create a new layer and Fill the selection with any color
Apple Navigation Bar Photoshop Tutorials

4. Apply this layer styles to it
- Gradient: #949494 to #d2d2d2
Apple Navigation Bar Photoshop Tutorials

- Drop Shadow: #b1b1b1
Apple Navigation Bar Photoshop Tutorials

5. Write some text using #383838 and Segoe UI font at 14pt
Apple Navigation Bar Photoshop Tutorials

6. Apply a Drop Shadow style using the values shown below
Apple Navigation Bar Photoshop Tutorials

7. Your nav bar should look like this now
Apple Navigation Bar Photoshop Tutorials

8. Now, let’s add the border’s used as containers for each link
9. Using the Pencil Tool and in a new layer, draw 2 lines, separated by 1px, from top to bottom of the nav and using white as in the image below
10. Change this layer’s blend mode to Soft Light and opacity to 20%
Apple Navigation Bar Photoshop Tutorials

11. Create a new layer and draw another 1px line using #808080 and place it between both white lines.
12. Keep this layer’s blend mode in Normal and change opacity to 35%
Apple Navigation Bar Photoshop Tutorials

13. Duplicate both layers and place them between all links as in the image below
Apple Navigation Bar Photoshop Tutorials

14. Now, let’s make the rollover effect. Start by selecting from one line-border to another
Apple Navigation Bar Photoshop Tutorials

15. Create a new layer and fill the selection with any color. Then, go to Layer Styles and apply this Gradient: #666666 to #a1a1a1
Apple Navigation Bar Photoshop Tutorials

16. Change the font’s color that is over this button to white and apply this Drop Shadow: #454545
Apple Navigation Bar Photoshop Tutorials

17. Your Apple style nav bar is now finished, you should have something like this
Apple Navigation Bar Photoshop Tutorials

Rate Tutorial:

1 Star2 Stars3 Stars4 Stars5 Stars

32 comments on this tutorial

the font is not Segoe UI it’s Myriad Pro

Thats right: Its the myriad pro.

Funny thing is that Segoe UI is the new signature font from Windows Vista… ;D

Nice tutorial…i like it…nice color combination and the way it present eye soothing effort…!!

It’s a good start but it is by no means complete. Step 14 and all steps after don’t work. It also has a number of other small mistakes like the type mentioned above. I’d give it a 1 star at best.

[…] Apple styled navigation menu from PS Cloud: […]

Thanks for this quality tutorial.
I Added it to my photoshop tutorial directory and attached a photoshop contest to it:
http://www.photoshoptalent.com/photoshop-tutorials/ext/

Oh, I just love it. Awesome!

Nice! i will uses this on my portfolio ;) :D

Great. Now what’s the easiest way to place this via css on our webpages?

Im stuck at step 4. HELP!!!

where to download “Segoe UI” font?
Please post link ^^

You can download it here
Thanks

Save it as globalnavbg.png. Add this *or like* to your html :

Apple
Store
Mac
iPod + iTunes

iPhone
Downloads
Support

And CSS this way :

/* GLOBALHEADER */
#globalheader { width: 982px; height: 38px; margin: 18px auto; position: relative; z-index: 9998; }
#globalheader #globalnav { margin: 0; padding: 0; }
#globalheader #globalnav li { display: inline; }
#globalheader #globalnav li a { float: left; width: 117px; height: 0; padding-top: 38px; overflow: hidden; }
#globalheader #globalnav li a,
#globalheader #globalsearch { background-image: url(http://images.apple.com/global/nav/images/globalnavbg.png); _background-image: url(http://images.apple.com/global/nav/images/globalnavbg.gif); background-repeat: no-repeat; }

/* BUTTONS */
#globalheader #globalnav li#gn-store a { background-position: 0 0; }
#globalheader #globalnav li#gn-store a { background-position: -117px 0; }
#globalheader #globalnav li#gn-mac a { background-position: -234px 0; }
#globalheader #globalnav li#gn-ipoditunes a { background-position: -351px 0; }
#globalheader #globalnav li#gn-iphone a { background-position: -468px 0; }
#globalheader #globalnav li#gn-downloads a { background-position: -585px 0; }
#globalheader #globalnav li#gn-support a { background-position: -702px 0; }

/* OVER STATES */
#globalheader #globalnav li#gn-apple a:hover { background-position: 0 -38px; }
#globalheader #globalnav li#gn-store a:hover { background-position: -117px -38px; }
#globalheader #globalnav li#gn-mac a:hover { background-position: -234px -38px; }
#globalheader #globalnav li#gn-ipoditunes a:hover { background-position: -351px -38px; }
#globalheader #globalnav li#gn-iphone a:hover { background-position: -468px -38px; }
#globalheader #globalnav li#gn-downloads a:hover { background-position: -585px -38px; }
#globalheader #globalnav li#gn-support a:hover { background-position: -702px -38px; }

/* PRESSED STATES */
#globalheader #globalnav li#gn-apple a:active { background-position: 0 -76px; }
#globalheader #globalnav li#gn-store a:active { background-position: -117px -76px; }
#globalheader #globalnav li#gn-mac a:active { background-position: -234px -76px; }
#globalheader #globalnav li#gn-ipoditunes a:active { background-position: -351px -76px; }
#globalheader #globalnav li#gn-iphone a:active { background-position: -468px -76px; }
#globalheader #globalnav li#gn-downloads a:active { background-position: -585px -76px; }
#globalheader #globalnav li#gn-support a:active { background-position: -702px -76px; }

/* ON STATES */
#globalheader.home #globalnav li#gn-apple a:hover { background-position: 0 0; cursor: default; }
#globalheader.store #globalnav li#gn-store a { background-position: -117px -114px !important; }
#globalheader.mac #globalnav li#gn-mac a { background-position: -234px -114px !important; }
#globalheader.ipoditunes #globalnav li#gn-ipoditunes a { background-position: -351px -114px !important; }
#globalheader.iphone #globalnav li#gn-iphone a { background-position: -468px -114px !important; }
#globalheader.downloads #globalnav li#gn-downloads a { background-position: -585px -114px !important; }
#globalheader.support #globalnav li#gn-support a { background-position: -702px -114px !important; }

I’m a new in Photoshop and i can understand it well. But, how can i link those button in website?

[…] PSCloud: Create a Navigation Bar Like the Current Apple Site […]

[…] PSCloud: Create a Navigation Bar Like the Current Apple Site   […]

does anybody finish this menu?… i’m new on this and even if i use the CSS is very difficult to understand what it does…. thank you

Do you have these tutorials for Mac Users?

what’s used font name ?

I Loved this one.

May i know your E-mail?
i’m working at www.spotbit.com i’m now helping blogger to design the electronic magazine (E-magazine)
for free, if you interested or if you have question please contact me Nicholas_tts@hotmail.com

how do i do the lines?

Great work, I just used this for a design.

The bar is just one big image, but how do you make the buttons link to the page you want?

What doesn’t make sense to me, is when creating the rollover effect it does not address the fact that applying a gradient in a new layer will totally cover up the text in the box. Also, if you are going to change the color and shadowing of the text anyways why not just do that in the first place? Somewhat confused at the rollover part. Everything else was self explanatory

Really good tutorial..

just twitted -> http://twitter.com/leosquarez

Do you know how to create a drop dowm menu with this

thanks a lot for this wonderful article

Yay thnx 4 the tut! i added some more buttons and a search thing and it looks (almost) exactly like the apple website!

i am self-studying web design coz building websites is my passion”:”

Leave a Reply