Home » User Interface » Web 2.0 Header with Glossy Navigation Buttons

Web 2.0 Header with Glossy Navigation Buttons

Preview:

Web 2.0 Header with Glossy Navigation Buttons.

Step 1:

Let's start out by creating a new file. I used a 1000x250 pixels canvas set at 72dpi, and I filled my background with a white color. Now create a new layer and draw a large rectangle with 1000 x 186 px dimensions with #EDFCFF color shade. This will be your header background.

Step 2:

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

Step 3:

Select the Horizontal Type Tool and set the font family to Arial Black, 36 pt, strong and #95EEFF color shade. In a new text layer type your website name on the header space and if you want to be fancy change the font color of some of the letters on your name using #E7ACFF color shade.

Step 4:

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Inner Glow, Gradient Overlay and Stroke blending options to your website name text layer.

Step 5:

With all that blending options added to your text layer from step four your name should have this effect:

Step 6:

At the other end of your header space add a search box. First add the search box which is a long rectangle with #608187 color shade. Then add a search text using font Arial, bold, 11 pt, none and black for color.

Step 7:

Now add a submit button titled 'go'. Next to your search box add a shorter rectangle with #608187 color shade in its own layer. Then under Layer Style(Layer > Layer Style) add an Inner Shadow, Satin, Gradient Overlay and Stroke blending options to your website name text layer.

Step 8:

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

Step 9:

With all that blending options added to your website name text layer it should now look like this:

Step 10:

Now add your navigation interface. First draw a long rectangle with 950×29 px dimensions and #CFE6FC color shade at the bottom of your header space, see picture below for the proper position. Then under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option.

Step 11:

Select the Horizontal Type Tool and set the font family to Arial, bold, 12 pt, none and #AB50D1 color shade. In a new text layer type out your sub navigations with spaces between each title.

Step 12:

Now attach a couple of navigation tabs on the interface. First select the rounded rectangle tool and under the options palette select Fill Pixels, set the radius to 8 px and check anti-aliased. In a new layer draw a rounded rectangle with 102 x28 px dimensions and #95EEFF color shade. Then cut the bottom corners so its a straight.

Step 13:

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

Step 14:

Select the Horizontal Type Tool and set the font family to Verdana, regular, 14 pt, none and #005E70 color shade. In a new text layer type your first navigation link on the tab.

Step 15:

Complete your navigation interface.

Step 16:

At the other end of your navigation interface add a tab for your RSS Feed.

Results:

Web 2.0 Header with Glossy Navigation Buttons. Click here to see the full view.