Stylish Navigation Interface Design

Website navigation is the most important and prominent thing that users first see whenever they visit any website. There are a lot of methods and ways to make design of navigation menus. Designers always push their creativities to build attractive, outstanding and remarkable menus. Today we are going to make a simple and web 2.0 based web navigation menu in Photoshop. You can make various menus using these methods with some minors and major variations.

Step 1:

Let’s start out by creating a new file. I used a 1300×400 pixels canvas set at 72dpi, and I filled my background with #CEDFE6 color shade. Now select the Rounded Rectangle Tool, on the options bar set the radius setting to 20 px. In a new layer, draw a long white rounded rectangle with 920 x 87 px dimensions.

Step 2:

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Inner Glow, Gradient Overlay, and Pattern Overlay blending options to the long white rounded rectangle layer.

Pattern:

Result:

Step 3:

Create a new layer. Using the Pen Tool, draw a similar black shape shown below on your canvas. Then apply a Gaussian Blur through Filter > Blur. Position the blurred design behind the rounded rectangle design for shadow effect.

Step 4:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow, and Inner Glow blending options to the dark gray circle layer.

Result:

Step 5:

Duplicate the shadow design layer and position it on the right side of the rounded rectangle design.

Step 6:

Select the Horizontal Type Tool, then set the font family to Century Gothic, regular, 20 pt, sharp, and black color shade. In a new text layer, type your navigation links on the rounded rectangle interface design. Modify the color of your HOME link to #5FEAF4 color shade and add spacers between each link.

Results:

Stylish Navigation Interface Design.