Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Nice, Clean Vertical Menu

Nice, Clean Vertical Menu


Use Rounded Rectangle Tool (U), set Radius to 20 px and use settings showed bellow. For foreground color set #1d97bc. After that drag four guidelines.

image 1

Now select Pen Tool (P), hold Ctrl (Or just use Direct Selection Tool) and click near our rectangle border. You will see path of our shape layer. Next zoom on top left corner, hold ALT key (or use Convert Point Tool), and press on two points (1, 2). Then unhold ALT (or use Delete Anchor Point Tool) key and click on one point (3) - this will delete it. Now press Ctrl (Or use Direct Selection Tool) key, catch the point (4) and hold mouse key!. Unhold Ctrl (But still hold mouse key!), press SHIFT and drag this point to our guides.

Click to enlarge
Click to enlarge

Make same thing with bottom right corner. Final result should look like this one bellow

image 3

Apply Blending Options like bellow.

image 4

image 5

image 6

Type "Menu" on the top.

image 7

Next use Pencil Tool (B), on new layer draw horizontal line (black color), and next another line under it (white color). Change Layer Opacity to 18%. Duplicate this layer (Ctrl+J) and move it 27 px lower. Repeat it five more times.

image 8

Between two lines make selection using Rectangular Marquee Tool (M), create new layer and fill selection using #75c5de color. Make this same thing for other menu positions.

image 9

Now write some text using Horizontal Type Tool (T)

image 10

Now we have to make Hoover effect.

Make selection over one button, make new layer, place it under text layers. Use Gradient Tool (G) and fill the selection.

image 11

Now the final result

Nice, Clean Vertical Menu Tutorial: Final Result

You can learn how to slice and code this menu from my two other tutorials:

  1. Slice Your web graphic properly
  2. CSS graphic menu with rollovers


Author's URL: bwebi.com
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Nice, Clean Vertical Menu"

Only registered users can write comment

No comments yet...