Photoshop Tutorial – White Navigation

Step 1.

First of all, make a new Photoshop document, with dimensions of 44×220 and a black background. Create a selection using the elliptical marquee tool and fill it with grey (C1C1C1) on a new layer. Feather (select > feather) and contract (Select > Modify > Contract) the selection by 5 and then fill the selection with white.

a) b)

Step 2.

Next, create a rectangle with the rounded rectangle tool, using 30 for the radius

a) b)

Step 3.

This is the 2nd part of this Photoshop tutorial. Next, rasterize the the rounded rectangle, zoom in to 200 %, create a new path layer and choose the pen tool. Add the 1st and second point to make a curve and then a 3rd point to create antoehr curve (image b).

a) b)

Step 4.

Now continue to make the path outside of the rounded rectangle (image a). Once you’ve completed the path, zoom back out again and then make a selection using the path (b).

a) b)

Step 5.

Make sure the rounded rectangle is highlighted in the layers panel and then adjust the lightness (image > adjustments > hue / saturation) by -10. This will cause the selected area to become darker (image a). Next add an inner shadow, using the setting shown when clicking on image b).

a) b) Click Image to View Settings

Step 6.

Zoom back in to 200% and use the polygonal to cut out the bottom part like in image a). Zoom in to 500% and make a selection with the rectangular marquee tool (b).

a) b)

Step 7.

Choose the gradient tool and set it to reflected gradient. Set the foreground color to white and the background color to grey (C1C1C1) and then drag from the center of the selection to create a gradient on a new layer. Zoom back out and add some white thick text, using something like Arial Black, 14. Add a slight drop shadow, using the settings shown when clicking on the image below.

a) b) Click Image to View Settings

Step 8.

This is the final part of this Photoshop tutorial. Next, duplicate the button a few times and add some text over them. Merge the text layers with their corresponding button, for example merge the “home” text layer with the first button layer.

Step 9.

Next, make another path layer and create a curve with the pen tool.

Step 10.

Create a 2nd curve.

Step 11.

Set the brush size to 4 hard,and the foreground color to dark grey (919191). Create a new layer, ight click on the path in the path panel and choose “stroke path”. This should convert path into a 4 pixel wide, grey, curved line.

Step 12.

Make a selection using the curved line, feather and contract the selection by 1 pixel and fill it with white.

Step 13.

Nextm move the 1st button to the top and use the transform tool (edit > transform > rotate) to rotate the button, so that the bottom is in line with the curved line. .

Step 14.

Do the same with the others

Source: flash-game-design.com

you may also like:

• Photoshop Tutorial – Clean Two-Level Navigation
  Step 1 First off, we need to make a new document; I’ve made a relatively small one for the purpose of this tutorial (600x420px) but yours will probably be for a web design (1000px or so wide). T...
• Photoshop Tutorial – Web 2.0 Nav Bar
  1. Start by opening a new 600 * 140px file. Now select the Rounded Rectangle Tool and make a small rectangle like in the image below 2. Apply these layer styles to it: Inner Glow 3. Gradient...
• Photoshop Tutorial – Apple Navigation menu
  Learn how to create the newest Apple navigation bar that is being used at their site. 1. Start by opening a new 500px * 50px file. 2. Using the Rectangular Marquee Tool, set a Fixed Size of 480px ...
• Photoshop Tutorial – Navigation Bar with Rollover Buttons
  Learn how to create a sleek rollover Navigation Bar. In this tutorial you will learn how to create buttons in Photoshop, export the buttons and add rollover effects in Dreamweaver. Rollover the but...
• Photoshop Tutorial – Vista Styled Button
  Step 1 Like usual we are going to start off with filling the background with a radial gradient from a light grey to a darker grey. Light grey: #3e3d3d. Dark grey: #151515. Step 2 Create a new l...