TutsArena

Red carpet: design a slick nav bar in Photoshop

by TutsArena - Tutorials

In this short and sweet tutorial we are going to tech how to design a slick nav bar for, say, a celebrity news web site.

Preview:

Red Carpet Navigation Interface.

Step 1:

Let’s start out by creating a new file. I used a 900×130 pixels canvas set at 72dpi, and I filled my background with white. Now make a new layer then draw a large red rectangle with #AA0000 color shade and 900 x 67 px dimensions.

Step 2:

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

Result:

Step 3:

In a new layer draw a gray rectangle with 900×28 px dimensions right below the red gradient rectangle.

Step 4:

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

Result:

Step 5:

Create a new layer then draw a small gray rectangle with #313131 color shade and 106×17 px dimensions just above the long gray rectangle design.

Step 6:

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

Result:

Step 7:

Select the Horizontal Type Tool then set the font family to Arial, bold, 13 pt, none and white color. In a new text layer type ‘Main Page’ on the gray button design.

Step 8:

Now add the rest of your navigation links with its own tab design.

Step 9:

On your Layers Window make a new layer behind all the navigation tab layer. Then draw a dark red rectangle with #5C0000 color shade and 239 x 19 px dimensions.

Step 10:

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Inner Glow and Gradient Overlay blending options to your small dark red rectangle layer. Then set the layer’s opacity level to 20%.

Result:

Step 11:

Select the Horizontal Type Tool then set the font family to Arial, regular, 11 pt, none and #FF0000 color shade. In a new text layer type more of your links on the transparent rectangle.

Results:

Red Carpet Navigation Interface.

Download dev kit