Glossy Navigation Interface in Photoshop

Published: February 24, 2008 Category: Designing Comments: None Views: 1276 Subscribe to RSS Feed     Email Updates

A D V E R T I S E M E N T

In this photoshop tutorial you are going to learn how to create a glossy navigation interface for your website.

Create a new document with a black background and 800×400 pixels dimensions. In a new layer draw a long rectangle with #1D1D1D color shade and 719×31 pixels dimensions.

Under Layer Style(Layer > Layer Style) add a Satin, Gradient Overlay and Stroke blending options to your long rectangle.

Result:

Create a new layer and using the Rectangle Tool draw a rectangle with #595959 color shade and 132×26 px dimensions.

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

Result:

Select your Horizontal Type Tool and above your screen under the options palette set the font family to Arial, bold, 11 pt, none and white color shade. In a new text layer type your first navigation title on the rectangle design.

Add your sub links on the long rectangle using #C6FF00 color shade and a white pipebar as the spacer.

Create a new layer and using the Rectangle Tool draw another rectangle with #595959 color shade and 132×26 px dimensions. Position it as shown below.

Under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option to your second rectangle design layer.

Result:

Add another text link on the glossy tab.

Add the rest of your navigation text links.

Glossy Navigation Interface.

No Comments

Post Your Comment »»

Name (required) Email (required) Website URL