Design a Sleek Navigation Interface in Photoshop

In this tutorial you will learn how to design a Design a Sleek Navigation Interface using photoshop.

Preview:

Sleek Navigation Interface.

Step 1:

Let’s start out by creating a new file. I used a 1000×200 pixels canvas set at 72dpi, and I filled my background with white color. Now create a new layer then draw a long gray rectangle with #D7D7D7 color shade and 950 x40 px dimensions.

Step 2:

Under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option to the long gray rectangle layer.

Result:

Step 3:

Create a new layer, using your Polygonal Lasso Tool draw the gray rectangle like shape shown below.

Step 4:

Now grab the Eraser Tool and create a smooth curve on your gray rectangle shape.

Step 5:

Create a new layer, below the gradient a new layer draw a long rectangle with #00273E color shade and 950×26 px dimensions.

Step 6:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending options to the long rectangle with #00273E color shade layer.

Result:

Step 7:

Now add a white search box on the left end of the interface. Then in a new text layer type ‘Looking for something?’ on the search box, use font Arial, bold, 11 pt, none and #989898 color shade.

 

Step 8:

In a new layer draw a small orange rectangle with #E92700 color shade and 56 x 21 px dimensions, this will be your search button.

Step 9:

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

Result:

Step 10:

Select the Horizontal Type Tool then set the font family to Arial Black, regular, 90 pt, strong and white color. In a new text layer type your name on the center of the canvas.

Step 11:

Here I added more white dots with a lower opacity level on the center design.

 

Step 12:

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

Result:

Step 13:

Step 14:

In a new layer draw a dark gray rectangle with #0C0C0C color shade and 130 x 11 px dimensions on the top end of the hosting rack design.

Step 15:

Results:

Sleek Navigation Interface.

Tagged as: Design, interface, Navigation, Tutorial, using photoshop