Home » tutorials » website design » how to make beautiful web 2.0 headers

How to make beautiful simple web 2.0 headers

A tutorial on how to create a simple website header in photoshop. A header of your website can be one of the most important parts and in this tutorial I want to show some simple tips to making a clean header for your website.  The psd file is available for download at the bottom of the page. Please feel free to change colors, pictures, and whatever else you would like to on this header. Keep in mind this is just to get you started. Remember to keep your designs simple because they are the most attractive.

Steps to a clean simple header:

  1. Create a new document in photoshop with a width of 760px and height of 200px at 72 dpi.
    Header Tutorial Step 1

  2. Select the "rounded rectangle tool" (hit the u key to select the shape tool) Header Tutorial Step 2

  3. Drag your selection to the desired size. Usually it should cover the entire width of your document. If you would like your rectangle to have a "more round" corner you can change the radius on the tool bar above. I used 16.
    Header Tutorial Step 3

  4. Select the Layer Mask tool for the rectangle shape layer you just created.
    Header Tutorial Step 4

    Below you will see I have pointed out the layer masks.Header tutorial 
  5. Now you can select the gradient tool and drag out your gradient to the desired look.
    Header Tutorial Step 5

  6. After you have your gradient you can now add text and pictures to your header. Select the text tool, I used font face Century Gothic with a size of 36. Type title of website and duplicate that layer for the reflection look.

  7. Once you have duplicated the text layer you can now use down arrow key to move it directly below the original text. Next click edit > transform > flip verticle. It should look like this.
    Header Tutorial Step 6

  8. Next select your layer mask on the duplicated text layer and use the gradient tool to create the reflection effect. Darker on top fading into nothing on bottom.
    Header Tutorial Step 7

  9. You can now add a picture to the right of the reflection text. To make it look nice change the angle of the picture and add a white stroke by clicking layer > layer style > and selecting stroke. You can also Get to the layer style settings by double clicking on the layer you wish to add the styles to. On this header I used a stroke width of 5 px. and changed the setting to inside instead of outside.
    Final Header

    You can change the color of the header by simply clicking on the color of the shape layer and selecting a new color. This will not affect the gradient or any other parts of the header.
Download Final PSD File Here

Matthew Schroeder
www.8bitstudio.com

Please vote on this article:

  • Currently3.03571428571/5 Stars
  • 1
  • 2
  • 3
  • 4
  • 5
Votes: 532


Write a comment

  • Required fields are marked with *.

If you have trouble reading the code, click on the code itself to generate a new random code.
Security Code:
 
Vitaliy Syromyatnikov
Posts: 3
Comment
Web 2.0 headers
Reply #3 on : Sun October 26, 2008, 08:28:52
Wow!
This info I had been looking for so long for my website www.moneymakersportal.com
Malik Mumtaz Hussain
Posts: 3
Comment
Great Support
Reply #2 on : Wed April 16, 2008, 15:21:04
Hi, You Said To Make Headers In Seconds & Easy Way To, Thanks Malik Mumtaz Hussain, From, malik.mumtaz.hussain@hotmail.com
http://www.WebTafreeh.com
Shawn Himmelberger
Posts: 3
Comment
I love the web 2.0 stuff
Reply #1 on : Thu May 10, 2007, 21:56:53
although some say web 2.0 has "jumped the shark", I think if done tastefully, like here, it still works.

"That's Niiiiiice, a High Fiiiiive"