Home » User Interface » Icy Header for Web Layout

Icy Header for Web Layout

Skill level:

Difficulty - /5

Time Required:

hrs mins

Preview:

Icy Theme Header Design.

Step 1:

Let's start out by creating a new file. I used a 900x200 pixels canvas set at 72dpi, and I filled my background with a white color. In a new layer draw a long rectangle with 890×60 px dimensions and #B0D0F4 color shade.

Step 2:

Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to your long rectangle layer.

Step 3:

Now create a glassy tab for navigations, in a new layer draw a rectangle with 84×20 px dimensions.

Step 4:

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Gradient Overlay and Stroke blending options to the white rectangle layer.

Step 5:

Select your Horizontal Type Tool and above your screen under the options palette set the font family to Arial, bold, 12pt, none and #00A8FFcolor shade. In a new text layer add your first navigation link on the glassy tab.

Step 6:

Add the rest of your navigation links with its own glassy tab.

Step 7:

At the other end of your header design add glassy buttons for your RSS Feed and Email Alert Link.

Step 8:

Select your Horizontal Type Tool and above your screen under the options palette set the font family to Arial Black, 30pt, crisp and #C6E6FF color shade. In a new text layer type the name of your website on the white space above the navigation interface. Then under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow, Outer Glow and Gradient Overlayblending options.

Step 9:

On the other end on the white space add a rectangle with a 2px, #D8F8FF color shade border. Then add a search text using font Verdana, 11 pt, none and #8A8A8A color shade.

Step 10:

Select the Rounded Rectangle Tool, above your screen under the options palette choose Fill Pixels, set the radius to 20 px and check anti-aliased. In a new layer draw a rounded rectangle with 76×29 px dimensions and #00D2FF color shade. Then under Layer Style(Layer > Layer Style) add an Inner Glow and Gradient Overlay blending options. Complete the search box with a #00A8FF color shade text.