Vista Style Nav Bar

1. Start by opening a new file: 500px * 50px

2. Make a 480px * 30px selection

3. Go to Select -> Modify -> Smooth and apply a 2px radio

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

Stroke: #676767

6. Select the top middle part of your nav bar

7. Create a new layer and make a White to Transparent gradient from top to bottom

8. Set layer's blend mode to Linear Dodge and opacity to 35%

9. Your nav bar should look like this

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

11. Fill the selection with White

12. Now, Ctrl+Click over the first layer thumb to select it

13. Go to Select -> Inverse and press Del while having the 1px white line layer selected

14. Change this layer's blend mode to Soft Light and opacity to 60%

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

16. Create a new layer and fill your selection with any color

17. Now apply this layer styles:

Gradient: #000000 to #2f3233

Stroke: #0f1011 to #575858

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

19. Change the layer's opacity to 15%

20. Select the top middle part of the rollover and, in a new layer, apply a White to Transparent gradient from top to bottom

21. Change layer's opacity to 80%

22. Now let's add some text. Using Verdana 11pt and White color

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

26. Erase the top and bottom parts using a 20px Soft Brush and change this layer's opacity to 50%

27. Duplicate this layer and move it between the other 2 links

28. Your Vista Style Nav Bar is now finished!

Click to enlarge