Web 2.0 Header Design

**Brandon Sheley** · 08-28-2008, 03:21 PM

Preview:

Web 2.0 Header Design.

Step 1:

Let’s start out by creating a new file. I used a 1000×300 pixels canvas set at 72dpi, and I filled my background with white color. Now make a new layer and draw a black rectangle with height of 34 px across the top of your canvas.

Step 2:

In a new layer draw a large rectangle with #8EE7FF color shade and 1000 x 175 px dimensions right below your black rectangle strip. This rectangle will be the background of your header.

Step 3:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending options to your header layer.

Result:

Step 4:

On top of your header draw a 1px line with #3E565C color shade on the middle of the black and dark blue rectangular strip.

Step 5:

Select the Horizontal Type Tool and set the font family to Arial, bold, 12 pt, none and #83DCF4 color shade. In a new text layer type out your navigation links with a lengthy space between each link on the top of your header background.

Step 6:

Now add a link for your rss feed a long with a logo, download the rss logo here. Use #F57F22 color shade for your rss link.

Step 7:

Select the Horizontal Type Tool and set the font family to Arial, regular, 60 pt, strong and white color shade. In a new text layer type your website name on the header space.

Step 8:

Under Layer Style(Layer > Layer Style) add an Inner Shadow blending option to your website name text layer. Then set the layer's blending mode to Soft Light.

Result:

Step 9:

Create a new layer, below your header space draw a rectangle with 1000 x 20 px dimensions and #87E5FF color shade. Then below that draw another rectangular strip with #DAF7FF color shade.

Step 10:

Now add an illustration graphic on right end of the header space. In this tutorial we used a hologram design which you can download here.

Results:

Web 2.0 Header Design.