Photoshop Tutorial – Apple Navigation menu
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
Source: pscloud.com
you may also like:
Leave a Reply
