Design an Excellent Navigation Bar in Photoshop

There is a plenty of websites in the internet. All of them have got some common features though. One of those features which is a characteristic for almost all the websites is the presence of a navigation menu on the page. Navigation menus can vary from ordinary text links to the most complicated dropdown menus. This tutorial is describing detailed process of creation of “plastic” navigation bar.

Final Result Preview

Step 1

Let’s start with creating the background for the navigation bar. The background is going to be bluish; the color will be alike with the color of your oncoming menu. Create a new document sized 800×259px with background color (#8caab8). Select foreground color (#e1e8eb), create a New Layer and draw linear gradient (Foreground to Transparent) from top to the bottom of the canvas.

Step 2

Now, let’s create the foundation for our coming navigation menu. Set foreground color (#7fa1b3) and draw 763×80px shape using Rounded Rectangle Tool in the middle of the canvas. Name it Shape and add Inner Shadow to it.

Step 3

Let’s add some shades for the navigation menu foundation. Create a New Layer; send backwards, Ctrl+Click on the Shape Layer, fill selection with color (#86a6b5). Deselect and apply Gaussian Blur (1.8px), then Motion Blur (90deg, 41px). Now apply Gaussian Blur (1.8px) one more time. Set opacity 85%.

Step 4

Now, let’s add some shades. Create a New Layer; Ctrl+Click on the Shape Layer, fill selection with color (#678a9f). Deselect and apply Gaussian Blur (4.5px).

Step 5

Add some more shades on the bottom. Create a New Layer, Ctrl+Click on the Shape Layer, select Marquee Tool and move selection 10px down. Set foreground color (#6d838f) and draw Foreground to Transparent gradient from the bottom to the middle of the canvas. Then add one more gradient from the lower left corner up to middle part of the menu foundation. Afterwards, draw such a gradient on the right.

Step 6

Deselect and apply Gaussian Blur (3.6px).

Step 7

Now you should add some inner glow from the top. Create New Layer, bring it forward. Ctrl+Click on Shape Layer select Marquee Tool and move selection 1px down. Set foreground color (#92c2da) and draw gradient starting with 10px above the upper part of the menu down to 10px beyond the upper part of our menu. Deselect.

Step 8

Now add a light stripe to the upper part of our menu foundation. Create a New Layer. Ctrl+Click on the Shape Layer, move selection 40px up and Ctrl+Alt+Shift+Click on the Shape Layer. Set foreground color (#bcd2db) and draw Foreground to Transparent gradient from the lower part of navigation menu up to the upper. Deselect and apply Gaussian Blur (3.6px).

Step 9

Now you should add some light colors all over the menu foundation. Create a New Layer, choose foreground color (#b8c9d1) and make a couple of strokes on both left and right parts of navigation menu using 45px soft brush. Apply Gaussian Blur filter (4px) and set opacity to 50%.

Step 10

Let’s add some light parts to the upper part of the menu. Create a New Layer. Ctrl+Click on the Shape Layer. Set foreground color (#d3e7f1) and make a couple of strokes in the upper part of navigation menu using 80px soft brush. Make a thick stroke in the upper left part of the menu. Deselect.

Step 11

Let’s add some sparkles on the borders of our menu. Create a New Layer. Ctrl+Click on Shape Layer, Contract 1px, inverse selection and Ctrl+Alt+Shift+Click on the Shape Layer. Set foreground color (#fbfcfd) and draw diagonally Foreground to Transparent gradient from the upper left part of navigation menu down to lower part of this menu. Deselect and move it 1px right and down. Add some accents to the upper right corner using soft brush and Blur Tool. Spread the strokes using a brush, blur them a little and then add more strokes.

Step 12

Make the same in the right part of the menu. Add more effects in both left and right parts of the menu, and also in the upper part.

Step 13

The foundation of navigation menu is done. We have to draw the links now. The links will look like the name of the menu and a brief description. Write “About” using Text Tool and add Drop Shadow and Outer Glow blending options.

Step 14

On the right of the first text add the second title “Us”. Add Outer Glow and Stroke blending options.

Step 15

Add a link description a little lower. Afterwards add Outer Glow blending option.

Step 16

Add the rest of the links using the same blending options. The texts to use are following: "Our Works – Completed Projects", "Our Clients – Professional Support", "Mail & Links – Linkage & Address".