Photoshop Tutorial – Web 2.0 Nav Bar

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.

Source: pscloud.com

you may also like:

• Photoshop Tutorial – Clean Two-Level Navigation
  Step 1 First off, we need to make a new document; I’ve made a relatively small one for the purpose of this tutorial (600x420px) but yours will probably be for a web design (1000px or so wide). T...
• Photoshop Tutorial – White Navigation
  Step 1. First of all, make a new Photoshop document, with dimensions of 44x220 and a black background. Create a selection using the elliptical marquee tool and fill it with grey (C1C1C1) on...
• Photoshop Tutorial – Vista Styled Button
  Step 1 Like usual we are going to start off with filling the background with a radial gradient from a light grey to a darker grey. Light grey: #3e3d3d. Dark grey: #151515. Step 2 Create a new l...
• Photoshop Tutorial – Draw a Rather Cute, Unique Style “Play” Button
  In this tutorial, I will show you the process I took to create this rather cute, unique Style “Play” Button in Photoshop. It’s a simple (aimed for PS beginners) but fun tutorial, have a try :) The ...
• Photoshop Tutorial – Draw a Rather Cute, Unique Style “Play” Button
  Step 1 Create a new document sized 1000 x 600px. Fill the background with the following gradient: Duplicate the background layer once, resize and rotate the duplicated layer, use a big soft br...