Website Header 2.0

This is a simple tutorial on how to create a professional looking website header:

So this header was inspired by this template by Cerebus: http://www.templatemonster.com/website-templates/11783.html

Step 1. Open up a new document, (mine was 800×600) and fill it with this color: #CACACA. Next, draw a rectagle box like the image below:

Afterwards, rasterize the rectangle layer

Step 2. Next, double click on the rectangle layer, and add a Layer Style:

Step 3. Now, you’ll notice that the header’s drop shadow shows on the side of the image. So to fix that, make a new layer and merge it with the rectangle shape. Next, using the Rectangle Marquee Tool, clean out the edges of the shadow. You image should look like this:

Step 4. Next, using the Rounded Rectangle Tool set to 10px radius, draw a box like this underneath the rectangle:

Step 5. Duplicate copies of the rounded rectangle, and arrange them like this:

Step 6. Next, merge all those shape layers together so that they are all on one layer. Add a Layer Style to that layer:

Step 7. Your header should now look something like this:

Step 8. Add the navigation text to you buttons. I used Futura font for mine:

Step 9. Using Futura font again, I put the header text in along with a logo. I also put a reflection on the text. To do that, duplicate the header text, and go to Edit>Transform>Flip Vertical. Drag the text underneath the header text. Then add this Layer Style to it:

Popularity: 8%

• Related Posts
• 

  Website Header 2.0 Part 2

• 

  Make an iPhone Interface

• 

  Pixel Button

• 

  Making a web 2.0 logo in Photoshop

• 

  Stamp Icon Tutorial

• 

  How to Make a Folder Icon

This entry was posted on Thursday, December 28th, 2006 at 11:28 am and is filed under Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.