Design a stylish vertical navigation menu in Photoshop

In this tutorial we’re going to be creating a mobile-style navigation bar that can be used for both web sites and mobile applications. We will be using several Photoshop techniques to design the sliding bars. Let’s get started!

Step 1

Open up Photoshop and create a new document. Fill in the background and select the Rectangle Shape Tool. Draw a shape measuring 250×40 pixels as seen below.

Step 2

Duplicate the shape and nudge it down four times using the Shift+Cursor-Key combinations. Keep on repeating this step. Arrange your shapes as seen below – I changed the colours to make mine visible.

Step 3

Select one of your shapes and duplicate it. Go to Edit > Free Transform and resize your shape so it touches the top and bottom of your Photoshop canvas. Keep the width of the shape the same. Right-click on your layer and select Rasterize Layer, then go to Filter > Blur > Gaussian Blur > 5 pixels.

Step 4

Nudge your shape behind your other shape layers and lower the opacity to around 25-50%. This will act as a shadow to our navigation menu.

Step 5

Right-click on your first single-line shape layer and select Blending Options. Select the Gradient Overlay tab and change the gradient from dark to medium grey.

Step 6

Select the Inner Shadow tab and change the blend mode to ‘Normal’, the opacity to 5%, the angle to -90, distance to 1px and size to 0px. Leave everything else to default. Change the colour from black to white. This should create a 1px stroke at the bottom of your shape, as seen below.

Step 7

After clicking OK to close your Blending Options window, right-click on your shape layer with the styles applied and select the ‘Copy Layer Styles’ option. Select all of your other single-line shape layers, right-click and select Paste Layer Style.

Step 8

Right-click on your larger shape layer beneath your first single-line shape layer and select Blending Options. Click on the Gradient Overlay tab and change the gradient to a very light grey to a medium grey with an angle of 90.

Step 9

Click on the Inner Shadow tab and change the opacity to 25%. Change the distance to 2px and the size to 0px to add a 2px stroke at the top of your shape.

Step 10

Select the Inner Glow tab and apply a black glow with an opacity to 5%. Click OK to save your settings.

Step 11

Select the Type Tool and draw a text box at the top of your navigation bar. Type your sites name – I used the typeface Helvetica. Right-click on the type layer and select Blending Options. Select the Drop Shadow tab, change the opacity to 50%, distance to 2px and size to 1px to add a subtle but important shadow to your header.

Step 12

Select the Type Tool once more and draw a text box over your first single-line bar. Type ‘Home’. Duplicate the type layer and nudge it down over your next single-line shape. Change the text to ‘About’. Repeat this over and over again until all of your bars have labels.

Step 13

Open the Blending Options for your first text layer and apply a Drop Shadow using an opacity of 20%, distance of 2px and size of 1px.

Step 14

Reopen the Blending Options for your open labelled bar. Select Gradient Overlay and change it to a brighter colour. This shows that the bar is currently active/open.

Step 15

Also change the colour of the text on this bar so that it stands out better. Add some sub-labels in your grey box like below. These can only be seen when your bar is open.

Step 16

Last but not least, select the Rectangular Marquee Tool to and draw a small box beneath one of your sub-labels. This will only be seen when that current page is being viewed. Here is our final result…