Icy Header for Web Layout

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 890x60 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 84x20 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 overlay blending 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 76x29 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.

Results: