Her

Home Photoshop Tutorials Web Layout Stylish Web Navigation Template

Stylish Web Navigation Template

Author: Adobetutorialz.com Author's URL: www.adobetutorialz.com More by this author

Begin by representing a new file of 800x600 px and 72 dpi. Select then the Paint Bucket Tool (G) to fill the new file with black color.

image 1

Next we shall choose the Rounded Rectangle Tool (U) with a radius of 20 px to draw the menu's panel and then press Alt button while using again the same tool, but this time with a radius of 10 px to cut out 4 openings the same way demonstrated next picture:

image 2

Select the next parameters by making a mouse click on the processed layer on the layers' panel. The layer's parameters: Fill 0%

Blending Options>Inner Glow

image 3

Blending Options>Gradient Overlay

image 4

Gradient's parameters:

image 5

Blending Options>Stroke

image 6

image 7

Using the earlier applied Rounded Rectangle Tool (U) (radius of 10 px), it's possible to represent the indicator of switching on menu's button. The layer's color is #EB2127

image 8

Make three copies of the indicator's layer, changing the color of the copied layers on #58595B.

Select Free Transform option to place the copies the same way shown below:

image 9

Using the Rounded Rectangle Tool (G) (radius of 15 px), try to draw a highlight on the indicator representing the switching on button.

image 10

The layer's parameters: Fill 0%

Blending Options>Gradient Overlay

image 11

Gradient's parameters:

image 12

image 13

Make again three copies, but this time of the highlight's layer and select after that the Free Transform option to place the copies the same way indicated next picture:

image 14

Using the Line Tool (U), try to divide the menu's buttons by creating three vertical lines, colored with #414142

image 15

image 16

Insert the titles for the menu's buttons, keeping the demands shown below:

image 17

About us

image 18

the titles for the rest of the buttons:

image 19

Getting a better result is possible if combine in a group all the layers composing the panel with the menu's buttons (press Ctrl button to mark out the corresponding layers and then hold on the left mouse's button to take down the marked layers on Create a new group selection). Make a copy of the recently made group and put it together in a single layer (press CTRL+E). The copy may be turned over, applying the Free Transform solution. Place the copy as it is demonstrated next picture:

image 20

Make a mouse click on the same layer on the bottom part of the layers' panel on Add a Mask option. Select then the Gradient Tool (G) to represent a half-transparent reflection the way it is shown below:

Stylish Web Navigation Template
Click to enlarge

Finished!