Disney.com Navigation Interface Design

Step 1:

Let's start out by creating a new file. I used a 900 x 400 pixels canvas set at 72dpi, and I filled my background with a black colour shade.

Now create a new layer set and name it 'Navigation Interface Design'. Then create a new layer and draw a long rectangle with 900 × 26px dimensions and #636363 colour shade.

Step 2:

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

Step 3:

In a new layer create a curved shape design like you see below, grab the PSD file of the shape here.

Step 4:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending options to the curve shape design layer from step three.

Step 5:

Select the Horizontal Type Tool and set the font family to Arial, regular, 10pt, sharp and white colour shade. In a new text layer type your navigation links on the glossy rectangle.

Step 6:

Under Layer Style(Layer > Layer Style) add a Drop Shadow blending option to your text layer.

Step 7:

Now add a line spacer between each link. In a new layer draw a white and black line next to each other. Then set the layer's opacity level to 29%.

Step 8:

Add a line spacer for the rest of your navigation links.

Results:

Disney.com Navigation Interface Design. Click here to see the full view.

If you found the above Photoshop tutorial helpful, please help to share this with others by using the 'digg' button below.

Other Photoshop Tutorials Designing an Alien head logo Metal with Blood Stain effect Design a Pencil How to create Glossy Buttons in Photoshop How to create Metallic, Rusty effects, with Holes A simple, clean Content Box Preserving Spot Colours in Photoshop A Professional Blog Template Design created in Photoshop A Disney.com style Navigation Interface A Custom-Fitted Logo A Futuristic Logo created in Photoshop A Metallic Content Box created in Photoshop Designing a Clipboard icon in Photoshop Creating an Industrial Text Effect in Photoshop An iRiver design A fun Robot head design in Photoshop   SEE ALL PHOTOSHOP TUTORIALS HERE

return to previous page