Make a slick gray navigation bar

February 8, 2010 by Matej Halič

In this tutorial I will show you how to make in a few steps a slick gray navigation bar in Photoshop.

---

I will show you how you can in a few steps create a slick gray navigation bar in photoshop.  I recommend that you  click on every picture to get the full preview for better quality.

1.0 Preview

First we need to create a new document. Click on File -> New.. and set the width&height to 1000px and click OK.

2.0 Create a new document

With the Rounded rectangle tool (Radius 15px) make a selection like shown in the bottom picture. It`s height should be around 45px and the width around 800px. This can be variable to fit your needs. Name the layer “Bar”.

3.0 Make a new selection

Than double click on the “Bar” layer and set the Gradient overlay from #3b3b3b to #777777.

4.0 Gradient Overlay

Than we need to set the Stroke effect. Set the color to #4b4a4a, Size 1px, Position inside.

5.0 Stroke effect

Now we set the Drop Shadow effect. Set the blend mode to Multiply and black color #000000. opacity should be around 85% and the Angle 90°. Set the Distance to 0px, Spread to 0px and Size to 5px.

6.0 Drop Shadow effect

Now type your preffered text on the bar. I have used here the Calibri font in size 18px and a color of #1a1a1a.

7.0 Type some text on the bar

To get the little light reflection we need to duplicate the layer: Right click in the text layer (Home) and click Duplicate layer..!  Now put the copyed layer under the original text layer and than move it with the arrow keys once down and once to the right. Now change the color of the copyed layer to #806f6f. You should get somethink like shown in the picture bellow (8.0).

8.0 Set the “light” reflection

Now we need to make a sepparator. We make a selection of width 1px and height about 36px. We fill it with color #424242 and name the layer Sepp1. Now duplicate the layer and click the right arrow key. Set the color of the copyed Sepp1 layer to #717171. Now you should have somethink like shown bellow (9.0).

9.0 Make a sepparator

New repeat the steps from 7.0 to 9.0 and fill the navi bar with your own prefered text. The ending result should be something like in the picture bellow (10.0).

10.0 The ending result.

This was a short tutorial how you can in a few steps creat a slick gray navigation bar in photoshop. In the next tutorial I will show you how to make a drop-down box when you hover the bar. Feel free to comment and if you don`t uderstand anything, just ask. Hope you have liked this tutorial.