Create a navigation bar with a unique Vista Style

1. Start by opening a new file: 500px * 50px
2. Make a 480px * 30px selection
Photoshop Tutorials Vista Style Nav Bar

3. Go to Select -> Modify -> Smooth and apply a 2px radio
Photoshop Tutorials Vista Style Nav Bar

4. Create a new layer(Shift+Ctrl+N or Layer -> New -> Layer) and fill the selection with any color
5.Now apply this layer styles:
– Gradient: #313332 to #46474a
Photoshop Tutorials Vista Style Nav Bar

– Stroke: #676767
Photoshop Tutorials Vista Style Nav Bar

6. Select the top middle part of your nav bar
Photoshop Tutorials Vista Style Nav Bar

7. Create a new layer and make a White to Transparent gradient from top to bottom
Photoshop Tutorials Vista Style Nav Bar

8. Set layer’s blend mode to Linear Dodge and opacity to 35%
Photoshop Tutorials Vista Style Nav Bar

9. Your nav bar should look like this
Photoshop Tutorials Vista Style Nav Bar

10. Create a new layer and create a selection one px under the top border of the nav bar using the Single Row Marquee Tool
Photoshop Tutorials Vista Style Nav Bar

11. Fill the selection with White
Photoshop Tutorials Vista Style Nav Bar

12. Now, Ctrl+Click over the first layer thumb to select it
Photoshop Tutorials Vista Style Nav Bar

13. Go to Select -> Inverse and press Del while having the 1px white line layer selected
Photoshop Tutorials Vista Style Nav Bar
Photoshop Tutorials Vista Style Nav Bar

14. Change this layer’s blend mode to Soft Light and opacity to 60%
Photoshop Tutorials Vista Style Nav Bar

15. Now lets make the rollover effect, create a new 130px * 24px selection, go to Select -> Modify -> Smooth and apply a 2px radio
Photoshop Tutorials Vista Style Nav Bar

16. Create a new layer and fill your selection with any color
17. Now apply this layer styles:
– Gradient: #000000 to #2f3233
Photoshop Tutorials Vista Style Nav Bar

– Stroke: #0f1011 to #575858
Photoshop Tutorials Vista Style Nav Bar

18. Create a new layer and Ctrl+click over the layer thumb to select it. Go to Edit -> Stroke and add a 1px White border
Photoshop Tutorials Vista Style Nav Bar

19. Change the layer’s opacity to 15%
Photoshop Tutorials Vista Style Nav Bar

20. Select the top middle part of the rollover and, in a new layer, apply a White to Transparent gradient from top to bottom
Photoshop Tutorials Vista Style Nav Bar

21. Change layer’s opacity to 80%
img21.jpg

22. Now let’s add some text. Using Verdana 11pt and White color
Photoshop Tutorials Vista Style Nav Bar

23. We need to add some separators between links. Create a new layer, make a selection with the Single Column Marquee Tool and fill it with #1a1b1c
24. Move the selection 1px to the right and fill it again with #5d5f60
25. Move the selection by 1px to the right again, and fill it with #232526
Photoshop Tutorials Vista Style Nav Bar

26. Erease the top and bottom parts using a 20px Soft Brush and change this layer’s opacity to 50%
Photoshop Tutorials Vista Style Nav Bar

27. Duplicate this layer and move it between the other 2 links
Photoshop Tutorials Vista Style Nav Bar

28. Your Vista Style Nav Bar is now finished!
Photoshop Tutorials Vista Style Nav Bar