Photoshop Tutorial – Blue Glassy Nav Bar

Create a Navigation Bar for your web site with a glassy look.

1. Start by opening a new 460px by 70px file
2. Select the Rounded Rectangle Tool and make a rectangle with any color. Right click over the layer and select Rasterize Layer

3. Now apply these layer styles to this layer
- Inner Glow

- Gradient Overlay: #96bfcc, #bfdde7 to #ffffff

- Stroke: #96bbcb

4. This is what we have so far

5. Select the Text Tool and write the links for your nav bar using: Trebuchet MS Bold 13pt Strong

6. Now apply this layer style to the text layer
- Drop Shadow

7. This is how it should look like

8. Now, zoom in your image, create a new layer, select the Rectangular Marquee Tool and create a 1px width line that goes from top to bottom of the nav bar, now fill it with #a1b7c1 and move the selection by 1px to the right and fill it with #ffffff

9. Select the Rectangular Marquee Tool and make a selection at the top of the nav bar like in the image below

10. Go to Select -> Modify -> Feather and apply 5px radius, now press Del or go to Edit -> Clear, move the selection to the bottom and press Del again

11. Duplicate this layer for as many links as you have, and place it between each one. Your nav bar should look like this

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 – Navigation Bar with Rollover Buttons
  Learn how to create a sleek rollover Navigation Bar. In this tutorial you will learn how to create buttons in Photoshop, export the buttons and add rollover effects in Dreamweaver. Rollover the but...
• Photoshop Tutorial – Dark Navigation Bar
  Create an amazing Dark Navigation Bar in this full tutorial that explains the 3 states of the nav bar, on hold, on click and hover.     1. Start by opening a new 580 * 100px file. S...
• 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...
• Photoshop Tutorial – High Detailed Plastic Navigation Bar
  Final Result Preview Step 1 Let’s start with creating the background for the navigation bar. The background is going to be bluish; the color will be alike with the color of your oncoming menu. Cre...