Design a Dark Sleek Vertical Navigation Interface in Photoshop

4-3-08 Filed under Designing & Photoshop Tutorials

Step 1:
Let’s start out by creating a new file. I used a 700×400 pixels canvas set at 72dpi, and I filled my background with a black color. In a new layer draw a rectangle with 240×170 px dimensions and #30303A color shade.

Step 2:
Under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option to your rectangle layer from step one.

Step 3:
Make a new layer set and name it ‘Rectangle Structure’. In a new layer draw a rectangle with 239 x 32 px dimensions and #89888F color shade on top of your first rectangle.

Step 4:
Under Layer Style(Layer > Layer Style) add a Satin and Gradient Overlay blending options to the second rectangle layer. Then set the layers opacity level to 59%.

Step 5:
Create a new layer, on the left side of the tab rectangle create a circle with 14 x 14 px dimensions and #FF6600 color shade.

Step 6:
Under Layer Style(Layer > Layer Style) add an Inner Shadow, Gradient Overlay and Stroke blending optiosn to your orange rectangle layer. Then set the layers blending mode to Darken at 71% opacity level.

Step 7:
Select your Horizontal Type Tool and above your screen under the options palette set the font family to Arial, bold, 14pt, crisp and white color shade. In a new text layer type your first navigation link.

Step 8:
Duplicate your ‘Rectangle Structure’ layer set for your second navigation link. Set the opacity level of the rectangle layer to 22% so its a little lighter than the first rectangle design.

Step 9:
Now add the rest of your navigation link with its own rectangle tab design. The opacity level of the last three rectangle design is 18%.

Step 10:
In a new layer draw a white rectangle with 19×1764 px dimensions just overlaying on the buttons.

Step 11:
Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to your white rectangle layer. Then set the layers blending mode to Darken.

Step 12:
Now add the same fade design on the other end of the vertical navigation interface.

Results:
That’s it your done!.

Pages: 1 2
Did you enjoy this design? We publish fresh tutorials
on a daily basis so why not Subscribe to our RSS Feed?

---

2 Responses to “Design a Dark Sleek Vertical Navigation Interface in Photoshop”

1. Likenota.com Says:
   April 5th, 2008 at 12:58 am

   i do like the effect of the sides. thats cool. i dont think the buttons suit me too well. other then that nice tutorial you got here.

2. Selbosh Says:
   April 5th, 2008 at 6:12 am

   The orange button things look a bit naff (at least in that colour) and I don’t like how the vertical line intersects them. Some of the effects on their own are quite interesting though.

   Good tutorial and clear instructions.

Add a Comment

Name (required)

Mail (required)

Website