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.

Hopefully, the above tutorials have been of some help so please let us know how we're doing by leaving a message in the comments section below.

Would you like to see new Photoshop tutorials on a regular basis? Are you interested in Adobe Illustrator tutorials? Please let us know!

Disney.com Navigation Interface created in Photoshop