Design Glossy Web 2.0 Button in Photoshop

Advertisement

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.

web 2.0 button

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

web 2.0 button

Your button should look something like this

web 2.0 button

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.

web 2.0 button

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.

web 2.0 button

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.

Related Contents

Sponsors

Posted by hongkiat in Photoshop Tutorials , at 12.27.06

Tags: , , , , , ,

Comments

  1. Ali January 3rd, 2007

    This is really fantastic tutorial Thanx alot

    Reply
  2. Hugh January 25th, 2007

    Thanks for a great tutorial – very clear and easy to understand

    Reply
  3. Ultrano72 January 31st, 2007

    I love this button, thanks :)

    Reply
  4. bhavin March 3rd, 2007

    awesomeeeeeeeeeeeeeeeeeeeeeee

    Reply
  5. Charlotte March 7th, 2007

    love the tutorial….well explained!:)

    Reply
  6. 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
  7. 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
  8. 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
  9. 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
  10. Sam Zaydel May 9th, 2007

    Very useful, and simple.Thank you for the clear and concise set of instructions.

    Reply
  11. Halid Said ALTUNER May 12th, 2007

    Thanks!?!?!?!?!? :)

    Reply
  12. 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
  13. 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
  14. Manu June 23rd, 2007

    Very good! Thanks

    Reply
  15. 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
  16. Shakira July 26th, 2007

    Thanks. The tutorial is very good. Many thanks for it.

    Reply
  17. 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
  18. RN August 9th, 2007

    Thanks — it’s been so hard to find a simple tutorial for this.

    Reply
  19. Djuna August 15th, 2007

    Very detailed and helpful. Thanks!!

    Reply
  20. picbros August 20th, 2007

    I want to change my picbros buttons like this , Can you help me :(

    Reply
  21. scancode August 27th, 2007

    Amazing tutorial. The only thing missing is a cute 2.0 badge on the top right corner :P

    Reply
  22. video jump September 2nd, 2007

    thank you for that tutorial I am trying to improve myself about ps and these tutorials help me

    Reply
  23. HiTCraft October 6th, 2007

    Perfect design. Thank you for all

    Reply
  24. vidbros October 23rd, 2007

    very good tutorial for beginner like me thank you

    owner : vidbros

    Reply
  25. MyDesign.com.ar January 10th, 2008

    great, i will use this a lot

    Reply
  26. Anna Woodfield March 17th, 2008

    Can you acctualy vreate your button??? It looks so good I want to.
    A

    Reply
  27. PhotoshopHome March 17th, 2008

    nice tutorial! Thanx!

    Reply
  28. 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
  29. ah April 29th, 2008

    Thanks for the great tutorial! Very easy to understand.

    Reply
  30. Tasarim May 5th, 2008

    Great thanks…

    Reply
  31. Feexwacemeelay May 8th, 2008

    thanks much, man

    Reply
  32. cps May 10th, 2008

    Can u write sth abt AdobeDreamweaver??

    Reply
  33. Gronk June 3rd, 2008

    great tute, have already used it to make some funky stuff, thanks a lot :)

    Reply
  34. alirezakoo June 4th, 2008

    ohh very good
    it’s nise tutorial
    thanks

    Reply
  35. Patrick June 13th, 2008

    Brilliant!. Finally a tutorial for non-photshop users. :)

    Reply
  36. webmaster blog June 27th, 2008

    nice information thank you.

    Reply
  37. 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
  38. Alvin August 1st, 2008

    Superrrr…Luar biasa

    Reply
  39. Pestekkorna August 7th, 2008

    Thank you very much for this great tutorial!
    :)

    Reply
  40. Hypotheek August 29th, 2008

    Exactly like it need it! Thanks alot!

    Reply
  41. Kelvin September 4th, 2008

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

    Thank you!

    Reply
  42. fun2006 September 12th, 2008

    very nice tut. i’m lovin it

    Reply
  43. Bjorn September 22nd, 2008

    Great tutorial! Thank you!

    Reply
  44. tomatotree October 25th, 2008

    very great.Thanhs a lot!

    Reply
  45. Cakka October 28th, 2008

    Nice tutorial , thanks :)

    Reply
  46. Ashish nayak November 5th, 2008

    i am satisfy with this tutorial and i am happy

    Reply
  47. 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
  48. 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
  49. hypotheek November 28th, 2008

    very interesting.

    Please come up with more tutorials

    Thank…

    Reply
  50. Top Shot gokkast December 9th, 2008

    Cool tutorial, I’m giving it a try!

    Reply
  51. 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
  52. m1k3y December 15th, 2008

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

    m1k3y

    Reply
  53. E.maniarasu December 30th, 2008

    This very useful to create button
    thanks

    Reply
  54. 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
  55. 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
  56. mindxstudio January 22nd, 2009

    nice tutorial, it help me a lot, thanks

    Reply
  57. Boris January 30th, 2009

    Simple and useful.

    By the way, here is 20 editable glossy buttons

    Reply
  58. Presa di Finica February 7th, 2009

    Hi Dude,

    Thanks for you article, thanks for sharing!

    Presa

    Reply
  59. devox February 12th, 2009

    not very glossy, your glossy button.

    Reply
  60. Ujjal February 25th, 2009

    This tutorials is too good. Thanks you.

    Reply
  61. 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
  62. 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
  63. 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
  64. Mehedi March 6th, 2009

    Thanks mate, great tutorial

    Reply
  65. jr March 9th, 2009

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

    =) so happy!!!

    Reply
  66. 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
  67. Johnny Amsterdam March 19th, 2009

    try resizing the image!

    Reply
  68. Hypotheek March 26th, 2009

    Thanks so much for this tutorial. It is very helpful to me!

    Reply
  69. hiren b ladva April 21st, 2009

    it is very easy and nice button

    Reply
  70. noah lieske April 29th, 2009

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

    noah lieske
    34, North Carolina

    Reply
  71. Sig Solares April 30th, 2009

    Very easy and simple.Thanks for an awesome tutorial! Sig Solares

    Reply
  72. Jo May 6th, 2009

    I just completed your tutorial, and I’m lovin’ my cute web 2.0 button! Thanks for sharing! :D

    Reply
  73. Marcel May 15th, 2009

    I love it! IMPRESIVE!!! so many thanks! :)

    Reply
  74. 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
  75. web hosting May 22nd, 2009

    thanks dude. really helpful tutorial. im gonna tray this

    Reply
  76. rana May 28th, 2009

    Thank You..

    Reply
  77. ralph June 4th, 2009

    Thank-You!

    Reply
  78. Hotels wenen June 5th, 2009

    Great man. Like it. I’ve put it on my site!

    Reply
  79. aloy June 9th, 2009

    Nice Tutorial. Thanks for sharing. I used it to my site with different color

    Reply
  80. Hypotheek June 9th, 2009

    Thanks for sharing this article!

    Reply
  81. zenjoke June 17th, 2009

    Thank you very much for sharing…

    Reply
  82. 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
  83. Biletji July 3rd, 2009

    Thank you too much! I am satisfy with this tutorial and i am happy

    Reply
  84. 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
  85. geld lenen July 26th, 2009

    I followed this and it worked out great!

    Reply
  86. Paul Martens August 4th, 2009

    Thank you for this tutorial. Very inpressive

    Reply
  87. Hypotheekeiland August 4th, 2009

    Thank you very much for sharing this tutorial

    Reply
  88. Speelgoed August 16th, 2009

    I really appreciate your taking the time to write this article. Very valuable information. Thanks! regards, Bram

    Reply
  89. end23 August 21st, 2009

    Thank you for tutorial Web 2.0 Style

    Reply
  90. 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
  91. Amy September 1st, 2009

    This is SO detailed – thanks a bunch :D

    Reply
  92. Türk's Bilişim; Web Tasarım September 2nd, 2009

    this very thank you.

    Your Web Site professional…

    Reply
  93. 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
  94. hypotheekrente September 10th, 2009

    Following this tutorial resulted in a very respectable button. thanks

    Reply
  95. hypotheekrente September 10th, 2009

    Following this tutorial resulted in a very respectable button. thanks.

    Reply
  96. geld lenen September 10th, 2009

    Well it wasn’t easy but it was useful

    Reply
  97. hypotheek rente September 16th, 2009

    Web 2.0 rocks

    Reply
  98. Lucas October 4th, 2009

    Nice Tutorial, Very useful step by step!

    Reply
  99. Thailandblog October 10th, 2009

    It seems easy, thanks!

    Reply
  100. adil October 12th, 2009

    Great Idea

    Reply
  101. Reisverzekeringblog October 16th, 2009

    Now I can make great buttons for my website, thanks.

    Reply
  102. jeff October 18th, 2009

    so simple. i love you!

    Reply
  103. 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
  104. Variabelerente November 11th, 2009

    Thank you very much for this information.

    Reply

Trackbacks

  1. Web 2.0 Webdesign-Tutorials | Dr. Web Weblog
  2. Whitesquid
  3. PsalmDesignArea » Blog Archive » Web 2.0 Webdesign-Tutorials
  4. design 2.0 at comatags
  5. Web 2.0 Tutorials Round-Up | Smashing Magazine
  6. MerT UraL Blog » Web 2.0 Tasarım Tutorial’ları
  7. Photoshop: Create Web 2.0 Button
  8. Create glossy button for web 2.0 « Rif.3rd
  9. Degrade Kullanımı ve Zengin Yüzeyler
  10. 68 Web 2.0 design tutorials » A blog you can use!
  11. » Blog Archive » Recopilacion de Tutoriales photoshop para web 2.0
  12. Web 2.0 Tutorials | Tekjuice.com
  13. Conception Web » Blog Archive » Web 2.0. Design
  14. Create Web 2.0 Button online
  15. UizL » Blog Archive » Tutorial WEB 2.0
  16. WaLhEZ » Recopilacion de Tutoriales photoshop para web 2.0
  17. Adobe photoshop uygulamaları - Grafik Tasarım , Photoshop Dersleri , Flash Dersleri
  18. alonon[at]alonon[nokta]net » Blog Archive » Web 2.0 Tasarım Rehberi-Sitemizi Tasarlıyoruz
  19. Tutoriales, VideoTutoriales, Utilidades, Artículos y ayudas para crear una web 2.0 « Ubuntero novato & algo mas
  20. Web 2.0 Tutorials Round-Up - Article Save
  21. Recopilacion de Tutoriales photoshop para web 2.0 | [Pragmatic Blog]
  22. Ayiva » Blog Archive » Web 2.0 Tutorials Round-Up
  23. Etixet » Blog ArÅŸivi » Create Web 2.0 Button
  24. Web 2.0 Tutorials | Pxdev.com
  25. Smashing Coding » Plus de 60 tutoriels Web Design 2.0
  26. Clean Tm » Blog Archive » Web 2.0 Tutorials Round-Up
  27. Optic-Designs »  Gloss Red Button
  28. Recursos y Tutoriales » Blog Archive » Diseñar a lo Web 2.0, la lista definitiva
  29. Hiệu ứng cho Button « câu chuyện tình yêu
  30. web tasarım ve uygulamaları » Blog Archive » Işıklı web2.0 buton yapımı
  31. 2008 | Yerles.com » Adobe Photoshop Uygulamaları
  32. Weekly top quality Photoshop tutorials #3 | Photoshop Tutorials
  33. Weekly top quality Photoshop tutorials #4 | Photoshop Tutorials
  34. Udesigs's Blog....Free CSS Templates, Open Source CSS Templates and CSS Templates, Web Tips, Totorials, Flash Source Templates
  35. 68个web2.0网站设计教程 « 深秋迷雾
  36. ercani biliÅŸim » Blog Archive » Css menü, logo oluÅŸturucu… derleme linkler
  37. Web 2.0 Nedir Ne Deðildir - Webmaster Forumu - Webmaster Zone
  38. Make Your Own Web 2.0 Buttons With This Tutorials | Skyje
  39. Durability, Utility and Beauty « Reinseite
  40. Bookmarks for Diciembre 24th from 13:19 to 15:34 | FACIL TUTORIALES
  41. Create Web 2.0 Button | Page2Book.COM
  42. Glossy Buttons | psdGraphics
  43. Create Web 2.0 Button [http://www.hongkiat.com] | 漂在河东
  44. How to Create Web 2.0 Site | Theme Heven
  45. townguyz.com » Blog Archive » Collection : Web 2.0 Icon Tutorials
  46. Never think things are obvious | Personal Edge Insights - Barbara Ling, Virtual Coach
  47. Web 2.0 Design Tutorials « Miss Doofus

Leave a reply