Photoshop Tutorial: Create glossy button for web 2.0

Advertisement


web 2.0 button

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.

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

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.

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

Output

You should get an image like this.

web 2.0 button

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. 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!
    in the meen time thought, happy posting!
    Anna Woodfield
    Enter of compotition people.
    X

    Reply
  28. 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!
    in the meen time thought, happy posting!
    Anna Woodfield
    Enter of compotition people.
    X

    Reply
  29. PhotoshopHome March 17th, 2008

    nice tutorial! Thanx!

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

    Thanks for the great tutorial! Very easy to understand.

    Reply
  32. Tasarim May 5th, 2008

    Great thanks…

    Reply
  33. Feexwacemeelay May 8th, 2008

    thanks much, man

    Reply
  34. cps May 10th, 2008

    Can u write sth abt AdobeDreamweaver??

    Reply
  35. Gronk June 3rd, 2008

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

    Reply
  36. alirezakoo June 4th, 2008

    ohh very good
    it’s nise tutorial
    thanks

    Reply
  37. Patrick June 13th, 2008

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

    Reply
  38. webmaster blog June 27th, 2008

    nice information thank you.

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

    Superrrr…Luar biasa

    Reply
  41. Pestekkorna August 7th, 2008

    Thank you very much for this great tutorial!
    :)

    Reply
  42. Hypotheek August 29th, 2008

    Exactly like it need it! Thanks alot!

    Reply
  43. Kelvin September 4th, 2008

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

    Thank you!

    Reply
  44. fun2006 September 12th, 2008

    very nice tut. i’m lovin it

    Reply
  45. Bjorn September 22nd, 2008

    Great tutorial! Thank you!

    Reply
  46. tomatotree October 25th, 2008

    very great.Thanhs a lot!

    Reply
  47. Cakka October 28th, 2008

    Nice tutorial , thanks :)

    Reply
  48. Ashish nayak November 5th, 2008

    i am satisfy with this tutorial and i am happy

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

    very interesting.

    Please come up with more tutorials

    Thank…

    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

Leave a reply