| |
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 779px wide x 200px high document.make anew layer and
Select the rectangular marquee tool, draw out a shape for the header & fill any color |
 |
| |
Right click on the layer and select blending options.
click ‘Gradient overlay’ and give it these settings |
 |
| |
| Next, click ‘Stroke’ and give it these settings : |
 |
| |
| Your header shape should now look like this : |
 |
| |
| using the rectangular marquee 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 : ECAF0A > CF8000 |
 |
| |
| 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 : |
|
