« Photoshop free PSD Glow graphic | Home | Drive traffic once you learn Photoshop! »
How to create a Nice looking header Photoshop tutorial
By Photoshop Consultant | October 5, 2007
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 :
Topics: Photoshop Graphics |
Comments
*
To prove that you're not a bot, enter this code
