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:
- Create a new document in photoshop with a width of 760px and height of 200px at 72 dpi.

- Select the "rounded rectangle tool" (hit the u key to select the shape tool)

- 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.

- Select the Layer Mask tool for the rectangle shape layer you just created.

Below you will see I have pointed out the layer masks.
- Now you can select the gradient tool and drag out your gradient to the desired look.

- 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.
- 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.

- 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.

- 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.

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.
Matthew Schroeder
www.8bitstudio.com
Please vote on this article:
Votes: 532Write a comment
- Required fields are marked with *.
Malik Mumtaz Hussain
Posts: 3
Posts: 3
Reply #2 on : Wed April 16, 2008, 15:21:04
Shawn Himmelberger
Posts: 3
Posts: 3
Reply #1 on : Thu May 10, 2007, 21:56:53





Posts: 3
Reply #3 on : Sun October 26, 2008, 08:28:52