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
3. Now, go to Select -> Modify -> Smooth and apply 3px radius. Create a new layer and Fill the selection with any color
4. Apply this layer styles to it
- Gradient: #949494 to #d2d2d2
- Drop Shadow: #b1b1b1
5. Write some text using #383838 and Segoe UI font at 14pt
6. Apply a Drop Shadow style using the values shown below
7. Your nav bar should look like this now
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%
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%
13. Duplicate both layers and place them between all links as in the image below
14. Now, let’s make the rollover effect. Start by selecting from one line-border to another
15. Create a new layer and fill the selection with any color. Then, go to Layer Styles and apply this Gradient: #666666 to #a1a1a1
16. Change the font’s color that is over this button to white and apply this Drop Shadow: #454545
17. Your Apple style nav bar is now finished, you should have something like this
Rate Tutorial:
35 comments on this tutorial
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 
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 :
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
[…] PSCloud: Apple mac tarzı menü bar […]
[…] PSCloud: Barra de navegação no estilo Apple […]
Thank you… 
Hi!
This tutorial is really awesome but has someone created a tutorial that mimics Apple’s navigation bar? More of an in-depth analysis of how the CSS works.
I searched for \’Apple Iphone Support\’ at google and found this your post (\’avigation Bar | Pscloud\’) in search results. Not very relevant result, but still interesting to read.
[…] Learn how to create the newest Apple navigation bar that is being used at their site. […]
[…] PSCloud: Create a Navigation Bar Like the Current Apple Site […]
Hello webmaster , Your blog post about photoshop signature is absolutely great. Easy to understand it and with excellent value. I just stumbled up and dugg your site to digg as good news article about photoshop signature on Monday . Cheers, Mike Brown , keep up the good work !
Thanks, looks as good as Apple
[…] PSCloud: Create a Navigation Bar Like the Current Apple Site […]
[…] PSCloud: Das Erstellen einer Navigationsleiste in […]
[…] PSCloud: Create a Navigation Bar Like the Current Apple Site […]
[…] PSCloud: Criando uma barra de navegação no estilo do site atual da Apple […]
the font is not Segoe UI it’s Myriad Pro