Smooth Gradient Header Photoshop Tutorial

This tutorial will show you a few simple techniques to design a nice smooth gradient header and nav bar that you can use in your web designs.

This finished design will look like this :

To start off, create a 770px wide x 200px high document.
Select the rounded rectangle tool, set the radius to 10px and draw out a shape for the header :

Right click on the shape you just drew’s layer and select blending options.
Click ‘Outer Glow’ and give it these settings :

Next, click ‘Gradient overlay’ and give it these settings :

Finally, click ‘Stroke’ and give it these settings :

Your header shape should now look like this :

Next, using the rounded rectangle tool again draw out the shape of your nav bar below the header bar, then right click the header shapes layer and select ‘copy layer style’ , then right click the nav bars layer and ‘paste layer style’. You should have something like this :

Now right click the nav bar layer, go into blending option and click the gradient overlay.
Change the gray/white gradient for and orange one using these values : F0B259 > F87811

Click ok and your nav bar should now look like this :

Now we’ll add some text, choose your typeface and type the required links in :

For this tutorial we used univers condensed. We’ll now add a dropshadow to the text, right click the layer > blending options > drop shadow
Use these settings :

Your text should now look like this :

We’ll now add some dividers between the nav bar links, create a new layer and zoom in. Using the pencil tool on 1 px, draw two lines like so :

Right click the layer and ‘duplicate’, move this layer along between the next set of nav links, repeat this for all the links.

Your nav is now complete :

Now all that is needed, is your website name / logo to be added and anything else like extra header links or banner adverts etc :

Download the .psd here