
This tutorial will show you how to create some of the more popular Web 2.0 style button using Photoshop CS. Full tutorial after jump.
1. Creating the base
Fire up a new canvas and adjust the following settings (marked in yellow) according to the image below. The rest should come as default. You might want to double check with the defaults too.

Create a new layer call ‘Button’

On layer ‘Button’, select the Rounded rectangle tool

give it a radius of 7px

and draw a rectangle similar to the image below.

2. Red button
Right click on the Blending Options for ‘Button’ layer

and tweak the following settings for
Drop Shadow

Inner Shadow

Bevel and Emboss

Gradiant Overlay

Your button should look something like this

3. Glossy and a little tweak
Create a new layer call ‘Glass’

Select Retangular marquee tool, make sure you are selecting ‘Button’ layer. HOLD your <ctrl> key and click on layer ‘Buttons’’s layer thumbnail. Your button should now be highlighted.
Select ‘Glass’ button now, hold the <Alt> key with Retangular marquee tool selected. Draw(cut) across the lower half of the button like the image below.

Fill the selected area with white color #ffffff using Paint Bucket Tool

Adjust the opacity to 18%

and you should have glossy button looking like this.

4. Pattern Overlay
Lets give the button some slight pattern overlay. I’ll be using the custom stripe5px created earlier. Click here to read “How to create custom pattern“. Create a new layer call ‘Pattern’ in between ‘Button’ and ‘Glass’ and proceed with Blending Options.

Select Pattern Overlay, choose Stripe5px (or any pattern you’ve created) and click OK then close the dialogue.

Make sure you are still on Rectangular Marquee tool, hold <ctrl> and click on Button’s layer thumbnail to get the buttons shape. Fill up the selected area in ‘Pattern’ layer with Paint Bucket tool and adjust the layer opacity to 5%
5. Inserting Text
I’ll throw in some random text in white #ffffff color with the following settings

and the following blending effects on my text’s layer.
Drop Shadow

Output
You should get an image like this.

Don't miss any post. Subscribe to Hongkiat's RSS feed now.
Related Contents |
Sponsors |
|
Posted by hongkiat in Photoshop Tutorials , at 12.27.06
Tags: button, create, design, glossy, photoshop, tutorial, Web 2.0 |
|





























Comments
Ali January 3rd, 2007
This is really fantastic tutorial Thanx alot
ReplyHugh January 25th, 2007
Thanks for a great tutorial - very clear and easy to understand
ReplyUltrano72 January 31st, 2007
I love this button, thanks :)
Replybhavin March 3rd, 2007
awesomeeeeeeeeeeeeeeeeeeeeeee
ReplyCharlotte March 7th, 2007
love the tutorial….well explained!:)
ReplyRuller_007 March 18th, 2007
As a deal of reduce, if the should make has single monthly 2 ultimately false than the suffice libanais often confidence is accuseing to compensate exponential volume taking that invoice.
ReplyRuller_007 March 18th, 2007
So overall we’ve seen the libanaiss and similarities between the short term subs of office, but what subscribees overhead out precondition enlist? These properties are beyond 5 or more libanaiss.
ReplyWicked April 16th, 2007
I’ve been trying to learn to make the buttons for about a week now using various tutorials(All of which suck),thanks to this one I finally know how.
ReplyThank you very much!
Ujin April 25th, 2007
Hi all, that’s great work!
Guys maybe somebody could help me. I looking for freelancer who found in WEB 2.0 design!
If somebody can make design of full webpage in WEB 2.0 style please contact me via erqDOGYlist.ru.
Thanks in advance.
ReplySam Zaydel May 9th, 2007
Very useful, and simple.Thank you for the clear and concise set of instructions.
ReplyHalid Said ALTUNER May 12th, 2007
Thanks!?!?!?!?!? :)
ReplyIgor Klajo June 8th, 2007
Thanks for this tutorial. I’ve been doing some buttons from time to time a different way, but from now on I’ll use this way cos it’s much more easier.
ReplyAndrew June 11th, 2007
I’m a graphics retard, and you managed to re-align my chromosomes for 10 minutes. I got it working and actually understand why. Excellent job!
ReplyManu June 23rd, 2007
Very good! Thanks
ReplyTha DLL King July 25th, 2007
Running through this myself. Thank for the baby steps. I’ve actually tried similar glass / gloss tutorials with no such luck. Thanks Hongkiat.com you guys are pimping :)
ReplyShakira July 26th, 2007
Thanks. The tutorial is very good. Many thanks for it.
ReplyPreston July 30th, 2007
Maybe this is an amateur question, but once you have the button, it’s on the 400×300 white canvas layer. How do you get it off that, to use just the button part? Thanks…
ReplyRN August 9th, 2007
Thanks — it’s been so hard to find a simple tutorial for this.
ReplyDjuna August 15th, 2007
Very detailed and helpful. Thanks!!
Replypicbros August 20th, 2007
I want to change my picbros buttons like this , Can you help me :(
Replyscancode August 27th, 2007
Amazing tutorial. The only thing missing is a cute 2.0 badge on the top right corner :P
Replyvideo jump September 2nd, 2007
thank you for that tutorial I am trying to improve myself about ps and these tutorials help me
ReplyHiTCraft October 6th, 2007
Perfect design. Thank you for all
Replyvidbros October 23rd, 2007
very good tutorial for beginner like me thank you
owner : vidbros
ReplyMyDesign.com.ar January 10th, 2008
great, i will use this a lot
ReplyAnna Woodfield March 17th, 2008
Can you acctualy vreate your button??? It looks so good I want to.
ReplyA
Anna Woodfield March 17th, 2008
You have been enterd into a compotition with 3 opponents. One is Yahoo! Who will be heard to beat. There were 10 websites going for tryouts but only the 4 got in. You see, you neded 10 Or anytinng between 10 and 10.100. you got 10.50. 10 meens you are reserved for going in and anything up to 10.50 (E.G 10.1,2,3,4,5,…..10.23,45…) meens you are reserved. 10.50 meens you may be going in and anything up to 10.100 meens you might be going in. 10.2100 meens you definately will be going in and that gives you a very good start. Yahoo! got to.100 witch gives them a boost but 10.50 is not bad. I will be announcing the winners in our compotition soon folks, so keep looking!
Replyin the meen time thought, happy posting!
Anna Woodfield
Enter of compotition people.
X
Anna Woodfield March 17th, 2008
You have been enterd into a compotition with 3 opponents. One is Yahoo! Who will be heard to beat. There were 10 websites going for tryouts but only the 4 got in. You see, you neded 10 Or anytinng between 10 and 10.100. you got 10.50. 10 meens you are reserved for going in and anything up to 10.50 (E.G 10.1,2,3,4,5,…..10.23,45…) meens you are reserved. 10.50 meens you may be going in and anything up to 10.100 meens you might be going in. 10.100 meens you definately will be going in and that gives you a very good start. Yahoo! got 10.100 witch gives them a boost but 10.50 is not bad. I will be announcing the winners in our compotition soon folks, so keep looking!
Replyin the meen time thought, happy posting!
Anna Woodfield
Enter of compotition people.
X
PhotoshopHome March 17th, 2008
nice tutorial! Thanx!
ReplyO GREAT ONE March 22nd, 2008
master - u show mere mortals the way of sharing in true web 2 fashion
Replybig up the hong
ah April 29th, 2008
Thanks for the great tutorial! Very easy to understand.
ReplyTasarim May 5th, 2008
Great thanks…
ReplyFeexwacemeelay May 8th, 2008
thanks much, man
Replycps May 10th, 2008
Can u write sth abt AdobeDreamweaver??
ReplyGronk June 3rd, 2008
great tute, have already used it to make some funky stuff, thanks a lot :)
Replyalirezakoo June 4th, 2008
ohh very good
Replyit’s nise tutorial
thanks
Patrick June 13th, 2008
Brilliant!. Finally a tutorial for non-photshop users. :)
Replywebmaster blog June 27th, 2008
nice information thank you.
ReplyAshutosh July 4th, 2008
Hey,
ReplyI have been looking high and low for lucid, step-by-step tutorials. My search has finally ended. Thank you!
Alvin August 1st, 2008
Superrrr…Luar biasa
ReplyPestekkorna August 7th, 2008
Thank you very much for this great tutorial!
Reply:)
Hypotheek August 29th, 2008
Exactly like it need it! Thanks alot!
ReplyKelvin September 4th, 2008
Very sweet!
Your glossy tutorial stand out among all tutorial i found.
Thank you!
Replyfun2006 September 12th, 2008
very nice tut. i’m lovin it
ReplyBjorn September 22nd, 2008
Great tutorial! Thank you!
Replytomatotree October 25th, 2008
very great.Thanhs a lot!
ReplyCakka October 28th, 2008
Nice tutorial , thanks :)
ReplyAshish nayak November 5th, 2008
i am satisfy with this tutorial and i am happy
ReplyPawel Grodzicki November 24th, 2008
Good stuff man! :)
You’ll soon be able to see that on my page :)
I’m just becoming familiar with all the web20 tips/tricks in PS.
Replyshootdatarget November 27th, 2008
wow, this is a really nice tutorial, u really understand how to play with adobe photoshop , thx a lot man!
Replyhypotheek November 28th, 2008
very interesting.
Please come up with more tutorials
Thank…
ReplyTrackbacks