Get Our Free Ebook
Beginners Guide to HTML

  Tutorials Photoshop Web Layout Design a Stylish Website Header

Design a Stylish Website Header

AggroPixel Web Layout Mar 27, 2007


Review the final image below and be sure to download the source file for assistance. Remember to not be super picky about exact sizing and colors, make it creative and just understand the technique more than petty details.

You can download .psd file here.

image 1
Click to enlarge

Step 1

Start a new document whatever size you want and draw a similar shape as the one below using the Rounded Rectangle Tool with a corner radius around 7px. Remember you don't need to be exact. Next, apply the following styles.

image 2

image 3

image 4

Now, you should get this.

image 5
Click to enlarge

Step 3

Using the Gradient Tool set the colors similar to the settings below.

image 6

Add a new layer, and apply a vertical gradient to your document. It will cover the entire document, but don't worry.

image 7
Click to enlarge

This is what you should have.

image 8

Take your new layer and make it into a layer set of previous layer. To do this simply make sure the gradient layer is above the rectangle layer and while holding the "alt" key down simply click between the two layers. That way the gradient will be masked off only revealing what you want the users to see. This technique is used a lot for this kind of stuff in Photoshop.

image 9

image 10
Click to enlarge

image 11
Click to enlarge

image 12

image 13
Click to enlarge

image 14

image 15

image 16
Click to enlarge

image 17

image 18

image 19

image 20
Click to enlarge

image 21

image 22
Click to enlarge

image 23

image 24

image 25
Click to enlarge

image 1
Click to enlarge

subscribe to newsletter