Smooth Gradient Header Photoshop Tutorial
March 21, 2006 by Oli · 15 Comments 
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 :
I liked this tutorial, so i submitted it to digg…
Are you on holiday? I look forward to a new tutorial!
Yooo! nice tutorial!
Great Tutorial!
I’m going to use it on my site
Stewart
———
http://crazy-tutorials.com
Nice tut i like it
Nice tutorial indeed. Downloaded.
great tut …. congrats
Nice tutorial though could not use it in PSD CS 8.0, instead used FW 8.0.
I will use it in developing some websites.
Cheerio
great tutorial thanks very much i might use it for my web site!!
Looks a lot like the nav bar for Newgrounds.com
Good tutorial. You could also show us how to slice it in html.
Cool tut. As a beginner it’s exactly what I needed.
Will definitely use it!!
Very useful tutorial. Saved it in my tutorial list here my photoshop tutorial list [http://www.giannirusso.info/index.php?option=com_weblinks&catid=13&Itemid=40]
Nice turorial – Commands don’t work or are very different in PS CS3 Extended.