Photoshop: Create Web 2.0 Button

Buttons Photoshop tutorials are probably one of the hottest categories in any Photoshop tutorials site and since Web 2.0 is such hot topics now, lets go about doing a simple button suitable for any Web 2.0 application of websites. Tutorial after jump.

Create a blank canvas at about 500px (width) x 400px (height) to start off the button design. Create a new layer call ‘bg01‘. Select the Rounded Rectangular Tool, hold SHIFT and draw a round sided square in the center. Any color is fine at the current stage.

Call up the Blending Options of ‘bg01‘ and adjust the following styles:

Drop Shadow

Opacity: 40%
Distance: 0px
Spread: 0%
Size: 6px

Gradiant Overlay

Color stop: 0%, #d00031
Color stop: 100%, #ff2b5d

Hold CTRL, left click on ‘bg01‘ Layer Thumbnail to select its shape. Go Select -> Modify -> Contract and enter the value ‘2px‘. This will shrink the selected area by 2 pixel.

Create a new layer call ‘bg02‘ and filled the highlighted (after shrink) area with any color. I use #000000 black here. Double click on ‘bg02′ to launch up the Blending Option and tweak the following style.

Gradiant Overlay

Color stop: 0%, #c6002f
Color stop: 100%, #c6002f

Create another new layer for text, call it ‘txt‘. Insert your button’s text. I’ll use an alphabet to represent. The font styles I’m using here are as follow:

Rounded Arial Bold
150pt

Same, after deciding your text, double click on ‘txt’ to launch the Blending Options and tweak the following styles.

Drop Shadow

Opacity: 25%
Distance: 0px
Spread: 0px
Size: 5px

Inner Shadow

Opacity: 10%
Distance: 0px
Choke: 0
Size: 10px

Bevel Emboss

Depth: 1px
Direction: Down
Size: 0px
Softten: 0px
Highlight Mode Opacity: 32%
Shadow Mode Opacity: 32%

Gradiant Overlay

Color Stop:0% #d2d2d2
Color Stop:100% #f0efef

Button is almost done. Let’s give it a little glow over the top part. Hold CTRL, left click ‘bg02‘ Layer Thumbnail to highlight the outer shape; choose Eclipse Marquee Tool. Now hold ALT, with Eclipse Marquee Tool selected, drag is across to minus out bottom half of the highlighted area. Refer to image above.

With the top portion highlighted and Eclipse Marquee Tool still selected, right click and choose Feather; enter 15px for the radius.

Create a new layer, call it ‘glow‘ and fill the highlighted part with white [#ffffff]. This should add glow effect to the top part of your button. Final product should look something like the image below.

Download Tutorial

Something extra..

Tweak the Blending Options of ‘bg01‘ and ‘bg02‘ will give you more interesting buttons. Here’s another Photoshop tutorial on button I’ve done previously – Create Glossy button for Web 2.0

Download Sample

Comments

www.dudu2.com April 5th, 2007

where is the trackback address?

I use this.
http://www.dudu2.com
THANK U.
Reply
hongkiat April 5th, 2007

dudu: i really appreciate a link back to this page if you are to copy-paste my original content on your site. Thanks.
Reply
danny April 5th, 2007

Very nice!!

Thanks for the awesome guide.
Reply
dudu2 April 5th, 2007

HI,SIR,I come from CHINA.My Englis is poor.I hope you can understand what I write.MAY I translate your photoshop tutorials into CHINESE? I do write your blog address in every article.
WAITING FOR YOUR ANSWER.
THANKS A LOT.
Reply
zap April 7th, 2007

Thanks for the very useful tutorial.
Reply
Hannes April 16th, 2007

Thank you for nice tut. I have the following i’d like to point out so you can either explain or rectify (or ignore – ha!):

1. For ‘bg2′ layer you specify a gradient overlay with the following: * Color stop: 0%, #c6002f * Color stop: 100%, #c6002f

Both the color stops are the same. This doesn’t give the “gradiated” look needed here. Is this intentional? If so, why not just do a color overlay of the color? Or specify the color before filling the contracted square?

2. The text specifies a ‘Bevel and emboss’ of Depth: 1 px

The depth option in PS is given as a percentage and not as pixels. Should this be 10%?

Hopefully you can clear that up for us. Many thanks!
Reply
JH April 21st, 2007

I’m creating an internal training ui and this may be just what i need for the css rollover buttons in the nav pane. Wish I got paid more for it else i’d throw a bone your way. Thanks!
Reply
wayne zhu June 17th, 2007

thank you!!!
Reply
Shawn June 21st, 2007

Very cool and useful.
Reply
web design mumbai July 28th, 2007

well this is not the first tutorial that i am following from your blog and let me tell you like rest of the tuts this is also amazing but again faced a few problems. in the end got the result and i am happy
Reply
Chris Kameir August 10th, 2007

Worked great for me – thank you!
Reply
Steve Chan August 13th, 2007

It’s cool. I like it.
Reply
Reza August 17th, 2007

That’s a great tutorial, it helped me much. Thanks a lot :)
Reply
Ray December 2nd, 2007

Great post. using the button on my site 611rent.com . Thanks
Reply
Frank February 28th, 2008

Cheers, this is really helpful.
Reply
PhotoshopHome March 17th, 2008

simply superb!
Reply
Durkin March 23rd, 2008

hi there, excellent tutorial. These buttons differ slightly from the normal web 2.0 buttons i see around the net, but i like them!
Reply
Sangesh March 31st, 2008

this is quite helpful, thankx mate.
Reply
Media April 21st, 2008

Great tutorial! Thank’s
Reply
webpix April 28th, 2008

Its really a nice tutorial for explaining very in clean manner.
Reply
squall April 28th, 2008

very nice! I want to translate to Chinese language in my blog,can i ? thank you ^^
Reply
ozcan May 10th, 2008

pls give me idea for my website ( http://www.ajaxkaynak.com )
Reply
Shaun May 19th, 2008

This is crap, do you not understand a button has 2 positions, upo and down retard!
Reply
suhad June 6th, 2008

very nice, finally i know how i can do same, thanks
Reply
Ahmed July 10th, 2008

Dude these tutorials are amazing! Great source to those who need to learn Photoshop :)

Thanks.
Reply
Fox August 11th, 2008

simple and beautiful button.
Reply
Bjorn September 22nd, 2008

Thanks! A very good tutorial!
Reply
Remi October 9th, 2008

Finally! after trying tons of tutorials from all over I can get it what I was looking for. Thanks mate. Your tutorial is fantastic and simple to follow to the very end especially for a self trained and novice on Photoshop. I was beginning to lose faith in have bought Photoshop.

Thanks also for the links too, I have learned so much in the last few hours than I did in the past months/years.
Reply
Afro October 19th, 2008

Awesome web2ey tut, thanks all!
Reply
Trav October 20th, 2008

but how do you get that sort of straight line curving across the middle of the button reflection like you see on mac site etc.?
Reply
photoshop-tutorials November 10th, 2008

Great photoshop tutorials on button. good job
Reply
photoshop-buttons November 10th, 2008

Thanks for the photoshop tutorials. well done.
Reply
rw1 November 23rd, 2008

i am using photoshop cs2 and i cant see ‘color stop’ in the gradient overlay – does it exist in this program? any help really appeciated, thank you!
Reply
rw1 November 23rd, 2008

ok, i figured out the color stop thang.

for others, for bg01, in blending mode>gradient overlay:

click on gradient, the ‘gradient editor’ will come up, below that a bar which represents the gradient. click on the left top marker to set the opacity (100%) and location (0%). click on the left bottom marker to set the color (#d00031) and location (0%).
Reply
Hint November 24th, 2008

Thank you for the tutorial. Very neat!
Reply
rajeev December 5th, 2008

thank u very much
Reply
cami December 10th, 2008

bah…i tried it but did not work for me :(

i end up with most of my button black :(
Reply
ApV January 8th, 2009

Great tutorial
Reply
Winwab January 15th, 2009

Actually a slice without no blur would be enough. Just reduce the fill to 30%
Reply
Robby January 22nd, 2009

Excellent! I need this. I’m pretty new to photoshop and need to make a nice web2.0 nav bar. Thanks!
Reply
Go-Air February 2nd, 2009

ur the photoshop master…nice tutorial
Reply
teakwood February 17th, 2009

thnk u very much for sharing this information.it was very helpful.
Reply
יחסי ציבור March 9th, 2009

so very useful! thanks!
Reply
Dexzone March 18th, 2009

Thanks.
Nice tut.
Reply
爱.中国 March 20th, 2009

It’s very nice.I like it
顶！中国加油
Reply
你是谁？ March 20th, 2009

我也是来自中国的.兄弟你真行
Reply
vape March 21st, 2009

great tutorial, this tutorial is better than most out there with better results. Unfortunately, i had some trouble with ‘glow’ section and didn’t quite understand how to get the glow.
Reply
fearlessalien March 22nd, 2009

thanks!!
Reply
photo and photoshop March 26th, 2009

Very Nice.

I wish to be so creative.
Reply
Akhmed March 31st, 2009

THANKS
Reply
Cesar Balbuena April 24th, 2009

thank you for the tutorial it is great!
Reply
Zanella May 4th, 2009

Excellent tutorial!! Thank You!!
Reply
Travis Smith June 6th, 2009

Hello,

I cannot get the GLOW portion to work. It makes my image white. Can you please give me some help?

Thank you.

Travis
Reply
Andrew June 13th, 2009

Perfect helped me with text thank you.
Reply
chanib24 June 16th, 2009

Like Travis, I also cannot get the glos to work like you have. What am I doing wrong?
Reply
Johnny June 21st, 2009

@hongkiat, Great Tut. i really enjoyed while following your steps,
as i was searching for pre-made buttons but i didn’t find any, with the help of this tut. i will make a few buttons for my next music site, play, download and playlist.

@Chanib24, i was also wondering why i cant do the same, the glow i applied was much more brighter than the one we see in the result,
hey do what i did to my button, like while applying glow using the bucket, decrease the percentage of opacity fill to 50%. your one is 100% that’s why it isn’t like the result you see on the web.
Reply