Design a Stylish Website Header

Overview

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.

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.

Now, you should get this.

Click to enlarge

Step 3

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

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

Click to enlarge

This is what you should have.

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.

Click to enlarge

Click to enlarge

Click to enlarge

Click to enlarge

Click to enlarge

Click to enlarge

Click to enlarge

Click to enlarge