Web 2.0 Nav Bar

Create an amazing Web Navigation Bar with a Web 2.0 Style

1. Start by opening a new 600 * 140px file. Now select the Rounded Rectangle Tool and make a small rectangle like in the image below

2. Apply these layer styles to it: Inner Glow

3. Gradient Overlay: #5e80a3 ,#839db8 and #b8c7d6

4. Stroke: #5e80a3

5. This is how it should look

6. Now write your links using Segoe 14 pt #ffffff

7. Apple this layer styles to the text links: Stroke: #53769a

8. Create a new layer, select the Rectangle Marquee Tool, make a 1px width line and fill it with #ffffffs

9. Duplicate this layer and place each line between each link. Now select the Rectangle Marquee Tool again, make a rectangle at the bottom that selects all of the lines and go to Select -> Modify -> Feather and apply a 5px Radius. Press Del and do the same to the top part of the lines.

10. Change the line’s layer blend mode to Soft Light

11. With the Rectangular Marquee Tool, select the inside part of your link(between each line) and fill it with any color

12. Now apply a Gradient Overlay from the Layer Styles using: #567595, #728fae #b3c3d3

13. And this is how it should look

14. Now make a small rectangle using the Rounded Rectangle Tool with 2px Radius and #ffffff

15. Apple these layer styles to the shape: Inner Shadow

16. Gradient Overlay: #e6e6e6 to #ffffff

17. Stroke: #5e80a3

18. This is what it should look now

19. Write “Search” inside the shape using Segoe 12pt #7b7b7b

20. Add the Magnifier icon from f3 Silk Icons and your Nav Bar is finished. This is the result showing both states of the nav bar, on hover and normal.