How many time have you seen a nav bar that just doesn’t look right? Well in Part 1  of this tutorial I will be showing you how to design a stylish nav bar which will look magnificent on almost any website. All you will need to complete this tutorial will be Adobe Photoshop, we will be using CS3  but the version you use will not change your outcome. Part 2 of the tutorial will be coming soon and will show you how to code the nav bar in html/css.

Step 1.

We start of by creating a new canvas (File>new) now you have to fill the background with the bucket tool (g) with the colour black (#000000). Now you stretch a dark Grey (#232323) rectangle across the canvas so you have something similar to this.

Step 2.

Now we are going to create a black (#000000) stroke around the box, we do this by selecting the box layer adn going to Blending Options (Layer>Layer Style>Blending Options) Now that you are in the Blending options select Stroke, change the colour to black and change the position from outside to inside. Make sure that you change the position otherwise you will have rounded corners and will not get the same effect. You should now have something similar to this.

Step 3.

Now if it were possible to add two strokes that is what we would be doing though I do not think that is possible so you are going to have to create a box which fits nicely into the other box, you will have yo lower the fill opacity by going to Blending options (Layer>Layer Style>Blending Options) and lowering the fill opacity to 0% Then you will need to add a stroke this time it will be grey (#d0d0d0) you should now have something like this.

Step 4.

Now we go back to the layer with our main box, we are going to add a gradient to the box we do this by going to the Blending Options (Layer>Layer Style>Blending Options) and selecting Gradient Overlay we are going to use the same colours with a top-down gradient select the grey we used before (#d0d0d0) and keep the other side transparent. Now that you have the colours make sure that the grey part is on the right hand side, if it is not you can just select the reverse button, the angle should be at 90 degrees. It should be looking something like this now.

Step 5.

Now we duplicate the layers to make more buttons, we are going to add an extra four buttons so we will duplicate and manually align the layers using the Move tool.

Step 6.

Now we are going to add normal white text for links and green text with a glow for the rollovers, creating the rollover will be explained in part two of this tutorial where we are going to show you how to code the nav bar in html/css.

Final image.

discuss this topic to forum