RSS Feed About Tutorials Blog

All        Blog        Business        Entertainment        Illustration        Portfolio        Social NetworkContact Us
design-a-sleek-vertical-navigation-in-photoshop

Design a Sleek Vertical Navigation in Photoshop

2-18-08Category Filed under Designing & Photoshop Tutorials

Step 1:
Let’s start out by creating a new file. I used a 400×400 pixels canvas set at 72dpi, and I filled my background with a white color. Now select the Rounded Rectangle Tool and above your screen under the options palette choose Fill Pixels, set the radius to 12 px and check anti-aliased. Create a new layer and draw a rounded rectangle with #F4F4F4 color shade and 290×250 px dimensions.

Step 2:
Under Layer Style(Layer > Layer Style) add an Inner Shadow and Stroke blending options to your light gray rounded rectangle.

Step 3:
Create a new layer and using the Rectangle Tool draw a white rectangle with 230×45 px dimensions.

Step 4:
Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending option to your white rectangle layer.

Step 5:
Select your Horizontal Type Tool and above your screen under the options palette set the font family to Arial, bold, 14 pt, none and #00E4FF color shade. In a new text layer type your first navigation title on the rectangle design.

Step 6:
Create a new layer and using the Ellipse Tool draw a circle with #00E4FF color shade and 16×16 px dimensions. Then under Layer Style(Layer > Layer Style) add a Stroke blending option.

Step 7:
Select your Horizontal Type Tool and above your screen under the options palette set the font family to Wingdings, regular, 15 pt, strong and white for color. In a new text layer type ‘4′ on your keyboard which should turn into an arrow icon. Place it inside the circle.

Step 8:
Add the rest of your navigation by stacking them.

Step 9:
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?

One Response to “Design a Sleek Vertical Navigation in Photoshop”

  1. Design a Sleek Vertical Navigation in Photoshop Says:
    February 18th, 2008 at 3:19 pm

    [...] Thomas_EyeDesign wrote an interesting post today onHere’s a quick excerptThis photoshop tutorial will teach you how to create a sleek vertical navigation similar from nintendos official website. (more…) ShareThis. [...]

Add a Comment