«
»

How to create a Nice looking header Photoshop tutorial

October 5th, 2007 | Author: Photoshop Consultant

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 :

 Photoshop header tutorial

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 :

Photoshop header tutorial

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

Photoshop header tutorial

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

Photoshop header tutorial

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

Header Photoshop

Your header shape should now look like this :

Header Photoshop

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 :

Header Photoshop

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

Header Photoshop

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

header10.jpgHeader Photoshop

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

Header

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 :

Header

Your text should now look like this :

header13.jpg

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 :

header14.jpg

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 :

header15.jpg

Header

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

header16.jpg

Download the .psd here

Bookmark and Share
Posted in Photoshop Graphics

42 Responses to “How to create a Nice looking header Photoshop tutorial”

Leave a Reply

You must be logged in to post a comment.

There are currently 0 items in your cart.
View Cart
Categories
Open All | Close All
MSI Photoshop Mobile

Get The Feed

Enter your email address:

Delivered by FeedBurner

Get the direct link to the RSS FEED

Sponsors

Contact Us | Terms of Use | Trademarks | Privacy Statement
Copyright © 2009 Photoshop Tutorials. All Rights Reserved.

Powered by WordPress and WordPress Theme created with Artisteer.