visitor stats

Photoshop Tutorial: Create glossy button for web 2.0


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

Download this tutorial.

Posted by hongkiat in Photoshop Tutorial, at 12.27.06

Tags: , , , , , ,

Related Contents

Sponsors

Comments

  1. Ali

    January 3rd, 2007 at 2:07 pm

    This is really fantastic tutorial Thanx alot

    comment

  2. Hugh

    January 25th, 2007 at 9:27 pm

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

    comment

  3. Ultrano72

    January 31st, 2007 at 10:52 am

    I love this button, thanks :)

    comment

  4. Web 2.0 Webdesign-Tutorials | Dr. Web Weblog

    February 19th, 2007 at 3:53 pm

    [...] 42. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]

    comment

  5. Whitesquid

    February 20th, 2007 at 2:45 am

    [...] 42. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]

    comment

  6. PsalmDesignArea » Blog Archive » Web 2.0 Webdesign-Tutorials

    February 21st, 2007 at 12:05 am

    [...] 42. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]

    comment

  7. design 2.0 at comatags

    February 24th, 2007 at 4:58 pm

    [...] 42. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]

    comment

  8. bhavin

    March 3rd, 2007 at 7:33 pm

    awesomeeeeeeeeeeeeeeeeeeeeeee

    comment

  9. Charlotte

    March 7th, 2007 at 2:52 pm

    love the tutorial….well explained!:)

    comment

  10. Web 2.0 Tutorials Round-Up | Smashing Magazine

    March 10th, 2007 at 12:43 am

    [...] 43. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]

    comment

  11. Ruller_007

    March 18th, 2007 at 10:50 pm

    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.

    comment

  12. Ruller_007

    March 18th, 2007 at 10:50 pm

    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.

    comment

  13. MerT UraL Blog » Web 2.0 Tasarım Tutorial’ları

    March 21st, 2007 at 3:54 am

    [...] 42. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]

    comment

  14. Photoshop: Create Web 2.0 Button

    April 3rd, 2007 at 10:38 pm

    [...] interesting buttons. Here’s another Photoshop tutorial on button I’ve done previously - Create Glossy button for Web 2.0 Download [...]

    comment

  15. Create glossy button for web 2.0 « Rif.3rd

    April 6th, 2007 at 9:10 pm

    [...] 12 3月, 2007  未分類 tags:gloss, PSD, tutorials 未分類 Photoshop Tutorial: Create glossy button for web 2.0 [...]

    comment

  17. Wicked

    April 16th, 2007 at 5:10 pm

    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!

    comment

  18. 68 Web 2.0 design tutorials » A blog you can use!

    April 22nd, 2007 at 7:43 am

    [...] 43. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]

    comment

  20. Ujin

    April 25th, 2007 at 2:51 am

    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.

    comment

  21. Sam Zaydel

    May 9th, 2007 at 8:57 am

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

    comment

  23. Web 2.0 Tutorials | Tekjuice.com

    May 30th, 2007 at 11:06 am

    [...] 43. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]

    comment

  24. Conception Web » Blog Archive » Web 2.0. Design

    June 3rd, 2007 at 7:27 pm

    [...] 42. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]

    comment

  25. Igor Klajo

    June 8th, 2007 at 4:25 pm

    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.

    comment

  26. Andrew

    June 11th, 2007 at 11:31 pm

    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!

    comment

  27. Create Web 2.0 Button online

    June 12th, 2007 at 2:25 pm

    [...] Photoshop Tutorial: Create glossy button for web 2.0 [...]

    comment

  28. Manu

    June 23rd, 2007 at 6:38 am

    Very good! Thanks

    comment

  29. UizL » Blog Archive » Tutorial WEB 2.0

    June 28th, 2007 at 11:03 pm

    [...] Create glossy button for web 2.0 por 24th Floor [...]

    comment

  30. Tha DLL King

    July 25th, 2007 at 1:45 am

    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 :)

    comment

  31. Shakira

    July 26th, 2007 at 4:35 pm

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

    comment

  32. Preston

    July 30th, 2007 at 5:52 am

    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…

    comment

  33. RN

    August 9th, 2007 at 10:10 pm

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

    comment

  34. Djuna

    August 15th, 2007 at 12:27 pm

    Very detailed and helpful. Thanks!!

    comment

  35. picbros

    August 20th, 2007 at 12:27 am

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

    comment

  36. scancode

    August 27th, 2007 at 5:39 am

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

    comment

  37. video jump

    September 2nd, 2007 at 9:58 pm

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

    comment

  40. HiTCraft

    October 6th, 2007 at 9:58 pm

    Perfect design. Thank you for all

    comment

  42. vidbros

    October 23rd, 2007 at 9:41 pm

    very good tutorial for beginner like me thank you

    owner : vidbros

    comment

  44. Web 2.0 Tutorials Round-Up - Article Save

    November 13th, 2007 at 4:50 am

    [...] 43. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]

    comment

  46. Ayiva » Blog Archive » Web 2.0 Tutorials Round-Up

    January 8th, 2008 at 10:06 pm

    [...] 43. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]

    comment

  49. Web 2.0 Tutorials | Pxdev.com

    January 29th, 2008 at 7:32 am

    [...] 43. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]

    comment

  50. Smashing Coding » Plus de 60 tutoriels Web Design 2.0

    February 1st, 2008 at 5:12 am

    [...] 42. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]

    comment

  51. Clean Tm » Blog Archive » Web 2.0 Tutorials Round-Up

    February 16th, 2008 at 12:32 pm

    [...] 43. Photoshop Buttons Create glossy button for web 2.0 Tutorial [...]

    comment

  52. Optic-Designs »  Gloss Red Button

    February 19th, 2008 at 5:17 pm

    [...] selecting ‘Button’ layer. HOLD your <ctrl> key and click on layer ‘Buttons’’s layer thumbnail. Your button should now be [...]

    comment

  54. Hiệu ứng cho Button « câu chuyện tình yêu

    March 5th, 2008 at 9:36 am

    [...] Photoshop Buttons Create glossy button for web 2.0 Tutorial Glossy button for web [...]

    comment

  55. Anna Woodfield

    March 17th, 2008 at 4:23 pm

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

    comment

  56. Anna Woodfield

    March 17th, 2008 at 4:35 pm

    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

    comment

  57. Anna Woodfield

    March 17th, 2008 at 4:36 pm

    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

    comment

  59. O GREAT ONE

    March 22nd, 2008 at 7:15 am

    master - u show mere mortals the way of sharing in true web 2 fashion
    big up the hong

    comment

  61. ah

    April 29th, 2008 at 5:58 am

    Thanks for the great tutorial! Very easy to understand.

    comment

  62. 2008 | Yerles.com » Adobe Photoshop Uygulamaları

    May 4th, 2008 at 6:14 am

    [...] yapma, burası, burası, burası, burası ve [...]

    comment

  66. cps

    May 10th, 2008 at 11:05 am

    Can u write sth abt AdobeDreamweaver??

    comment


Leave a reply