Nice, clean vertical menu.

Rate this tutorial:
  • Currently Note: 3/5
  • 1
  • 2
  • 3
  • 4
  • 5

Tip: Check Your works at least on three most popular browsers.

opera msie

This tutorial will show You how to make clean, nice vertical menu using Adobe Photoshop.


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


First step. Rounded Rectangle Tool.


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.

Shape manipulation

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

Result of manipulation


Apply Blending Options like bellow.

Blending options


Type "Menu" on the top.

Type Menu


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.


Horizontal lines

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

fill selections

Now write some text using Horizontal Type Tool (T)

Type some text


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.

Make hoover effect


Now the final result


Final result - clean menu.
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

Comments

Richard

2007-09-27

realy nice

wiiL

2007-09-27

nice
thx!

Gauntlet

2007-09-27

Good effort

Penny

2007-09-27

The Pen tool directions don't work

Penny

2007-09-27

Apologies - your instructions work I don't...sorry

barat

2007-09-28

I added alternative way (not key shortcuts but direct tools - it will be easier now, because some people don't know Pen Tool well)

I hope that now it is clear

Pete

2007-09-28

Nice!

top

2007-09-29

good ">

Jay_92

2007-10-03

that's good but there are better methods , example, the gradient you use, you can put same color in both sides changing the opacity, the shape of the box, you can use the rectangle selection tool paint it and select modify smooth, then earse just two sides

Mello

2007-10-03

Nice

FaiS

2007-10-03

CoOl

barat

2007-10-04

To Jay_92:
Rectangle selection? Modify? ... but this will be raster.
In my method You have vector layer - You can resize it as You want :)

BTW. You can make it in 1000 and 1 ways. Even with pencil tool drawing pixel by pixel :) That's the beauty of photoshop...

DEV

2007-10-05

very nice

MostarNetworks

2007-12-17

Cool use of pen tool...I am still on seleciton toos :) can't draw.
100% agreed on some angry comments.....beauty of PS is there so many way to get to the final result.
Nice & quick technique!
All the best!
-lebisol

tomo

2008-05-04

thank you!

www.xhtml-conversion.in

2008-05-09

thanks...this one is gr8 help for up coming designers.

Adam

2008-06-14

I've only been learning PS for a few days to make graphics for the web and this has got to be one of the better tutorials I've used.

Some of the others expect you to know the ins and outs of PS whereas a beginner has to start somewhere

krishna

2008-10-16

thanks.....................

Rup

2009-01-09

Nice....

Turkey PS

2009-01-11

??ok g??zel olmu??...

ahmed

2009-02-20

nice + thx uuuuuuuuu

Bala

2009-03-07

Its hard to draw a line using the pencil tool(B) can we replace it as line tool?? it worked for me..anyone please suggest...

dennis_avril@yahoo.com

2009-04-05

hhmmmmmmmmmmmmmmmmmmmmmmmmpp

VirusoID

2009-04-09

thanks)

barat

2009-04-10

@Bala
best method is the method which is best for You ... if You used line tool and it worked as You want - then gr8 job - creativity when following a tutorial is realy nice thing :)

stsm

2009-05-20

great.

lee

2009-06-09

very helpful thanks

prince-of-east

2009-06-23

Thanks soooo much man this is soooo helpfull i have been looking for a tutorial like this..thanks u on more time wish u all the best

Kenny

2009-07-21

Your are too much! This is really nice.

sunny

2009-08-07

that good....

SDLV

2010-01-08

Greeting from Russia)
It`s nice work but I`d like the description to this script(CSS).
P.S. thanks a lot

Swati Birajdar

2010-02-18

cool. Too good.

vasntvel

2010-02-24

It`was really super I`don miss

kumarvel

2010-02-24

I Like it`s great

omg

2010-03-12

this was dissapointing

Lithium

2010-05-23

It was really great, Thank you so much :D

longer

2010-05-31

Hoho!It's very good!

Matt

2010-06-10

Good Stuff, love your work.

saheb

2010-07-02

Its good..!

saheb sen

2010-07-02

I have used it with CSS...

Werther

2010-07-21

Thx very much !

Werther

2010-07-21

Thx very much !

Werther

2010-07-21

Thx very much !

chetan

2010-09-10

nice job ...

a beginner

2010-09-30

thanks a lot. u explained the minor details making it easier for beginners. it really helped. thanks a lot

monika

2010-11-11

its awesome

161

2010-12-07

165301105

poji

2010-12-21

nice job

benny

2011-01-06

Hi,

good,

i still cannot get the top right corner works.

I am using AI CS5, cannot see the drop shadow/outer glow/stroke structure panel.

advise.

ozivatech@oziva.com
Benny

ee

2011-03-05

efdfd

Gaurav bhasin

2011-04-30

Nice Traning Guud
Gaurav bhasin
web designer
8755404789

srishylam

2011-06-07

Its very nice....

harsh chopra

2011-09-01

I want to learn web designing

harsh chopra

2011-09-01

i want to learn web designing 9958688946

sushil futak

2011-09-19

thanks a lot. u explained the minor details making it easier for beginners. it really helped. thanks a lot

2011-12-09

tropical

2011-12-22

shaped, sized and styled nicely.
divide the tutorial under couple of steps along with headings. that will be easier for readers to go through.

TIJO

2012-01-04

thanks

jiten

2012-09-18

bitch how to drag guidelines fuvk this tutorial

jagan

2012-11-02

freelivebox.eu

anish

2013-01-22

wow.........nice.

Kapris

2013-06-04

Shashank Shekhar

2013-09-11

Really good idea about vertical menu. I used it.

Thanks

TrashorerNasE

2013-10-20

khurshid ahmed

2013-12-02

nice......thanks

fbgwtvbnz

2014-01-04


dbhtlygrq

2014-01-08


wvjaudxnh

2014-01-11


gem

2014-02-08

quite ok