Design Glossy Web 2.0 Button in Photoshop

web 2.0 button

Looking to design some glossy looking Web 2.0 button? Here’s a Photoshop tutorial that gives you step by step how to get a red glossy button you see above.

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.

web 2.0 button

Create a new layer call ‘Button’

web 2.0 button

On layer ‘Button’, select the Rounded rectangle tool

web 2.0 button

give it a radius of 7px

web 2.0 button

and draw a rectangle similar to the image below.

2. Red button

Right click on the Blending Options for ‘Button’ layer

web 2.0 button

and tweak the following settings for

Drop Shadow

web 2.0 button

Inner Shadow

web 2.0 button

Bevel and Emboss

web 2.0 button

Gradiant Overlay

web 2.0 button

Your button should look something like this

3. Glossy and a little tweak

Create a new layer call ‘Glass’

web 2.0 button

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

web 2.0 button

Adjust the opacity to 18%

web 2.0 button

and you should have glossy button looking like this.

4. Pattern Overlay

Let’s 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.

web 2.0 button

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

web 2.0 button

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

web 2.0 button

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

Drop Shadow

web 2.0 button

6. Final Output

You should get an image like this.

web 2.0 button

Download this tutorial.

Comments

Ali January 3rd, 2007

This is really fantastic tutorial Thanx alot
Reply
Hugh January 25th, 2007

Thanks for a great tutorial – very clear and easy to understand
Reply
Ultrano72 January 31st, 2007

I love this button, thanks :)
Reply
bhavin March 3rd, 2007

awesomeeeeeeeeeeeeeeeeeeeeeee
Reply
Charlotte March 7th, 2007

love the tutorial….well explained!:)
Reply
Ruller_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.
Reply
Ruller_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.
Reply
Wicked 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.
Thank you very much!
Reply
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.
Reply
Sam Zaydel May 9th, 2007

Very useful, and simple.Thank you for the clear and concise set of instructions.
Reply
Halid Said ALTUNER May 12th, 2007

Thanks!?!?!?!?!? :)
Reply
Igor 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.
Reply
Andrew 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!
Reply
Manu June 23rd, 2007

Very good! Thanks
Reply
Tha 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 :)
Reply
Shakira July 26th, 2007

Thanks. The tutorial is very good. Many thanks for it.
Reply
Preston 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…
Reply
RN August 9th, 2007

Thanks — it’s been so hard to find a simple tutorial for this.
Reply
Djuna August 15th, 2007

Very detailed and helpful. Thanks!!
Reply
picbros August 20th, 2007

I want to change my picbros buttons like this , Can you help me :(
Reply
scancode August 27th, 2007

Amazing tutorial. The only thing missing is a cute 2.0 badge on the top right corner :P
Reply
video jump September 2nd, 2007

thank you for that tutorial I am trying to improve myself about ps and these tutorials help me
Reply
HiTCraft October 6th, 2007

Perfect design. Thank you for all
Reply
vidbros October 23rd, 2007

very good tutorial for beginner like me thank you

owner : vidbros
Reply
MyDesign.com.ar January 10th, 2008

great, i will use this a lot
Reply
Anna Woodfield March 17th, 2008

Can you acctualy vreate your button??? It looks so good I want to.
A
Reply
PhotoshopHome March 17th, 2008

nice tutorial! Thanx!
Reply
O GREAT ONE March 22nd, 2008

master – u show mere mortals the way of sharing in true web 2 fashion
big up the hong
Reply
ah April 29th, 2008

Thanks for the great tutorial! Very easy to understand.
Reply
Tasarim May 5th, 2008

Great thanks…
Reply
Feexwacemeelay May 8th, 2008

thanks much, man
Reply
cps May 10th, 2008

Can u write sth abt AdobeDreamweaver??
Reply
Gronk June 3rd, 2008

great tute, have already used it to make some funky stuff, thanks a lot :)
Reply
alirezakoo June 4th, 2008

ohh very good
it’s nise tutorial
thanks
Reply
Patrick June 13th, 2008

Brilliant!. Finally a tutorial for non-photshop users. :)
Reply
webmaster blog June 27th, 2008

nice information thank you.
Reply
Ashutosh July 4th, 2008

Hey,
I have been looking high and low for lucid, step-by-step tutorials. My search has finally ended. Thank you!
Reply
Alvin August 1st, 2008

Superrrr…Luar biasa
Reply
Pestekkorna August 7th, 2008

Thank you very much for this great tutorial!
:)
Reply
Hypotheek August 29th, 2008

Exactly like it need it! Thanks alot!
Reply
Kelvin September 4th, 2008

Very sweet!
Your glossy tutorial stand out among all tutorial i found.

Thank you!
Reply
fun2006 September 12th, 2008

very nice tut. i’m lovin it
Reply
Bjorn September 22nd, 2008

Great tutorial! Thank you!
Reply
tomatotree October 25th, 2008

very great.Thanhs a lot!
Reply
Cakka October 28th, 2008

Nice tutorial , thanks :)
Reply
Ashish nayak November 5th, 2008

i am satisfy with this tutorial and i am happy
Reply
Pawel 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.
Reply
shootdatarget November 27th, 2008

wow, this is a really nice tutorial, u really understand how to play with adobe photoshop , thx a lot man!
Reply
hypotheek November 28th, 2008

very interesting.

Please come up with more tutorials

Thank…
Reply
Top Shot gokkast December 9th, 2008

Cool tutorial, I’m giving it a try!
Reply
jr December 11th, 2008

Thanks alot ;)
This was my first GLOSSY button and i just posted it on my website. Looks great..
thanks alot
Reply
m1k3y December 15th, 2008

Yes,
What Version Of Photoshop Did You Use For This? I Am Using Photoshop 6.0.

m1k3y
Reply
E.maniarasu December 30th, 2008

This very useful to create button
thanks
Reply
Jacob Totolhua January 2nd, 2009

Gracias por el tutorial, me sirve de mucho ahora que estoy remodelando la web, y necesito botones de este tipo,
THKS
Reply
Parijs Trein January 18th, 2009

I think this is a very good article. Thanks very much for it, it was very helpfull. Keep up the good work!
Reply
mindxstudio January 22nd, 2009

nice tutorial, it help me a lot, thanks
Reply
Boris January 30th, 2009

Simple and useful.

By the way, here is 20 editable glossy buttons
Reply
Presa di Finica February 7th, 2009

Hi Dude,

Thanks for you article, thanks for sharing!

Presa
Reply
devox February 12th, 2009

not very glossy, your glossy button.
Reply
Ujjal February 25th, 2009

This tutorials is too good. Thanks you.
Reply
Oslo Titslinger February 26th, 2009

Select the background layer and untick it, this way all you have is the button and a transparent background, then go to image and go down to trim, pick “transparent pixels” from the popup box and click ok, job done.
Reply
Oslo Titslinger February 26th, 2009

(ref post number 62) sorry about that i was answering post number 17, how to remove the unwanted area around the button(s)…
Reply
turkish kitchen March 2nd, 2009

I really like this post. Thanks for this article, I am now your blog’ s rss follower. you are now in my bookmarks.
Reply
Mehedi March 6th, 2009

Thanks mate, great tutorial
Reply
jr March 9th, 2009

nice tutorial mate… helps me improve my button glossy effects.

=) so happy!!!
Reply
imdagiver March 10th, 2009

This is an awesome tutorial!

Very easy and simple.

However i wanted to put this glossy button in director and there’s white bits around the side of it… which makes the entire menu look ugly…. can anyone help me?

i’ve tried clicking the option ‘transparent background’ and there’s still white bits around the side of the button….

Someone please help me please~

my email is – elmo_imdagiver at hotmail dot com
Reply
Johnny Amsterdam March 19th, 2009

try resizing the image!
Reply
Hypotheek March 26th, 2009

Thanks so much for this tutorial. It is very helpful to me!
Reply
hiren b ladva April 21st, 2009

it is very easy and nice button
Reply
noah lieske April 29th, 2009

nice tute man, thanks for that. been driving me crazy.

noah lieske
34, North Carolina
Reply
Sig Solares April 30th, 2009

Very easy and simple.Thanks for an awesome tutorial! Sig Solares
Reply
Jo May 6th, 2009

I just completed your tutorial, and I’m lovin’ my cute web 2.0 button! Thanks for sharing! :D
Reply
Marcel May 15th, 2009

I love it! IMPRESIVE!!! so many thanks! :)
Reply
RyanG May 20th, 2009

This was an excellent tutorial. Taught me a lot about creating simple, snazzy, 2.0 icons, as well as layering in PS. I’m new to the application, so I really, really, really appreciate it!

Thanks a bunch!
Reply
web hosting May 22nd, 2009

thanks dude. really helpful tutorial. im gonna tray this
Reply
rana May 28th, 2009

Thank You..
Reply
ralph June 4th, 2009

Thank-You!
Reply
Hotels wenen June 5th, 2009

Great man. Like it. I’ve put it on my site!
Reply
aloy June 9th, 2009

Nice Tutorial. Thanks for sharing. I used it to my site with different color
Reply
Hypotheek June 9th, 2009

Thanks for sharing this article!
Reply
zenjoke June 17th, 2009

Thank you very much for sharing…
Reply
z3nj0ke.ifastnet.com June 20th, 2009

Thank you, i use this tutorial to make menu button for my website.
I will also share this tutorial on my website.
Reply
Biletji July 3rd, 2009

Thank you too much! I am satisfy with this tutorial and i am happy
Reply
Sam Marlos July 24th, 2009

nice, very nice! ive been using http://www.3rdace.com/downloads.php since ages but now i know! ha ha !
Reply
geld lenen July 26th, 2009

I followed this and it worked out great!
Reply
Paul Martens August 4th, 2009

Thank you for this tutorial. Very inpressive
Reply
Hypotheekeiland August 4th, 2009

Thank you very much for sharing this tutorial
Reply
Speelgoed August 16th, 2009

I really appreciate your taking the time to write this article. Very valuable information. Thanks! regards, Bram
Reply
end23 August 21st, 2009

Thank you for tutorial Web 2.0 Style
Reply
dragonsna August 31st, 2009

thanks
:D:D:D:D:D:D:D:D:D:D:D:D:D:D:D:D:D:D:D:D
Reply
Amy September 1st, 2009

This is SO detailed – thanks a bunch :D
Reply
Türk's Bilişim; Web Tasarım September 2nd, 2009

this very thank you.

Your Web Site professional…
Reply
Valerie September 8th, 2009

Thanks a lot! It has been so hard to find such a simple tutorial for designing a glossy web button!
Reply
hypotheekrente September 10th, 2009

Following this tutorial resulted in a very respectable button. thanks
Reply
hypotheekrente September 10th, 2009

Following this tutorial resulted in a very respectable button. thanks.
Reply
geld lenen September 10th, 2009

Well it wasn’t easy but it was useful
Reply
hypotheek rente September 16th, 2009

Web 2.0 rocks
Reply
Lucas October 4th, 2009

Nice Tutorial, Very useful step by step!
Reply
Thailandblog October 10th, 2009

It seems easy, thanks!
Reply
adil October 12th, 2009

Great Idea
Reply
Reisverzekeringblog October 16th, 2009

Now I can make great buttons for my website, thanks.
Reply
jeff October 18th, 2009

so simple. i love you!
Reply
Hypotheek Deventer October 27th, 2009

Great software, this I’m going to use for the next time I need buttons. Up until now I always had to copy anyone else his buttons!
Reply
Variabelerente November 11th, 2009

Thank you very much for this information.
Reply