Create Apple’s Navigation Bar in Photoshop from Scratch

29

by Shane Jeffers

applebar

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:

applefinalthumb

Creating the background

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

pic1

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

fixedsize

pic2

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.

pic4

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

pic5

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

pic6

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

pic7

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.

pic8

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.

pic9

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.

pic3

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.

pic10

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.

pic11

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

pic12

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.

applefinalthumb

Click here to download source files

[tags]Apple Navigation tutorial, Navigation photoshop tutorial, menu tutorial, Apple menu tutorial[/tags]

Written by Shane Jeffers

Shane Jeffers is the Creator and Author of Three Styles. I have a unique passion for design trends and tutorials. Follow me on twitter @ThreeStyles

Enjoy this post? Subscribe by RSS or Email

Apple Stuff, Photoshop, Tutorials

  • Pingback: Twitted by Keisse

  • http://www.endan.nl.tt hello123456

    A little tip, in the tutorial you say make the bar’s size as close as possible to this one, next time, or give a fullsize image, or (and probably even better cause that can’t go wrong) give the exact size in pixels of the bar, you can fill them in if you press the down arrow button next to the Line tool in the top bar ;-)

  • http://www.stilodesigns.com Myrnalyn Castillo

    Wow! What an easy tutorial to follow and I got the same result! I saw this on the Twitter account for Designer Depot – http://twitter.com/designerdepot. I always wanted to know how to create the Apple navigation bar and I finally found one so easy to follow and understand. Thanks so much! I’ll be subscribing to Three Styles! :)

  • http://www.tissagodavitarneprogram.com Angel

    Man this is such a simple tutorial but so bold. Thanks for the tutorial :) All need to do now is learn how to code :(

  • http://www.plainshanedesign.com Shane Jeffers

    Hey Angel,

    If you stay tuned to my blog there will be a second post about how to code this navigation bar using CSS Sprites! Subscribe by email that way you won’t forget. :)

  • http://www.mcimo.com Matt C.

    Nicely done Shane. You really do have quite the affinity for words. And pictures. 10/10, even though you were trying to recreate something that Apple made :( LOL

  • http://www.plainshanedesign.com Shane Jeffers

    @hello123456

    Those are very good suggestions, and I have already added the FIXED SIZE portion of it so hopefully the final product will be more consistent with my final product.

    Thanks everyone for commenting!

  • http://www.promotionalpensrus.co.uk/printed-pens/printed-pens.html printed pens

    Thank you that has help me tremendolously…. now i understand how the gradient editor works…

  • Pingback: Crea el menú de Mac de forma sencilla | ARTEgami

  • andy

    silly question…
    what colour are the separator lines meant to be?
    thanks

  • Pingback: Chupi Tube | מגזין בנושא טכנולוגיה, עיצוב, אינטרנט ועוד » מדריך ליצירת תפריט ניווט בעיצוב Apple בעזרת Photoshop

  • http://www.triplecloud.ca Ian

    This tutorial was extremely helpful. Many of the PShop tutorials online skip crucial steps or assume a level of knowledge that is above some, or many, readers. I appreciate that you carefully explained each step in detail. I learned a great deal from this. Thanks!!

  • Pingback: Phaaroos » Crea una barra de navegación al estilo Apple

  • Pingback: 20 Apple-inspired Tutorials for Practice Web Designers

  • Pingback: Chupi Tube » Make a Apple Navigation Bar with Photoshop

  • Pingback: PhotoShop Tutorials for Web Design and Layouts

  • http://www.freeitunesgiftcodes.com Jessica

    wonderful tutorial!

  • andremoda

    You keep it simple, and i love it!

    Very very helpfull!

  • Pingback: 31 Apple Beautiful Inspired Photoshop Tutorials | Afif Fattouh - Web Specialist

  • Pingback: 30 tutoriaux Photoshop spécial Apple «

  • Neil G

    Very cool! Very well explained, too! Quick question, how would one create the reflection of the nav bar as it appears in the sample image of the finished product displayed just before the comments?

  • http://www.psdstyle.net chuckles

    Can never have enough ideas for nav bars now can you? I love Apple so this works for me!

  • http://anjstudio.com daniel veiga

    very simple tutorial. easy to follow and the results are as expected. thank you.

  • http://www.gameprotocol.com Balaji R

    Same question as Neil.

    Could you please tell us how to create the reflection of the nav bar as in the final image. Please…. Please…

    By the way your tutorial is amazing….

  • http://www.gameprotocol.com Balaji R

    Addon: How to add image Reflection of Nav Bar above. Pretty simple.
    I’m lazy to take screenshots and paste it, so i will just type here.

    Reflections to the main image.
    ==============================
    18. After completing Step 17 from above. Double click on the background layer and hit Ok. This will unlock the background layer.(The little lock icon will disappear)

    19. Copy all the layers (Text + Shapes) including the base elliptical shape and hit Duplicate Layers

    20. Now again with all the duplicated layers selected – move all the duplicated layers below the original elliptical shape layer(the first nav bar layer that was created in step 1/2).

    21. Again with all duplicated layers selected, Hit Edit Transform – Flip Vertical.

    22. Again with all duplicated layers selected, Move them beneath the original nav bar and position it just beneath the original nav bar.

    23. Again with all duplicated layers selected, Right Click on layers and hit Rasterize Type. This will rasterize ALL the selected layers.

    (The reason why i enforced the phrase ‘again with all duplicated layers selected’ is because this will save you your time and patience by not having to do the above set of steps to all the duplicated layers one-by-one).

    24. Now in the set of duplicated layers you would have two text layers for each link(the one we created to get a pressing effect), remove / delete the bottom duplicated text layer for each text layer in the duplicated set __only__.

    25. Remove all effects in the duplicated set of layers.

    26. Now Select the Rectangular Marquee tool with feather size 10 or more px, and select each and every duplicated layer and draw a rectangular marquee from 1/4 of the duplicated layer to somewhere in background and hit delete or subtract from selection option.

    27. You will see the reflection fade effect. Now you have to do it
    __individually__ from each and every duplicated layer if you bulk select and hir marquee , it does not work.

    28. Now again for each layer individually set the layer opacity to say 20% or depending on your preference.

    Thats it You are Done !! :)

    Effect will be something like in -
    http://www.gameprotocol.com

    Thanks Shane, your tutorial was very helpful in primary design of my nav bar.

    Thanks again !!

  • http://mudhoneydesigns.com/ Essie Delange

    I’ll be honest, I’m kinda confused. But nice blog.

  • Pnr

    still, no search :/

  • http://www.axtsoftware.com Jake

    I think everyone loves Apple’s design, good job on this :)

    I guess the only problem is that Apple have changed their design slightly since this tutorial but it’s not that important.

    Like Pnr said, no search! But this can easily be implemented using a coding language anyway.

  • Kevin Short

    Nice tutorial but I prefer navigation created with CSS3 and no images.

    http://templatz.co/navigation.php