visitor stats

Photoshop: Create Web 2.0 Button

Buttons Photoshop tutorials are probably one of the hottest categories in any Photoshop tutorials site and since Web 2.0 is such hot topics now, lets go about doing a simple button suitable for any Web 2.0 application of websites. Tutorial after jump.

Create a blank canvas at about 500px (width) x 400px (height) to start off the button design. Create a new layer call ‘bg01‘. Select the Rounded Rectangular Tool, hold SHIFT and draw a round sided square in the center. Any color is fine at the current stage.

Call up the Blending Options of ‘bg01‘ and adjust the following styles:

Drop Shadow

  • Opacity: 40%
  • Distance: 0px
  • Spread: 0%
  • Size: 6px

Gradiant Overlay

  • Color stop: 0%, #d00031
  • Color stop: 100%, #ff2b5d

Hold CTRL, left click on ‘bg01‘ Layer Thumbnail to select its shape. Go Select -> Modify -> Contract and enter the value ‘2px‘. This will shrink the selected area by 2 pixel.

Create a new layer call ‘bg02‘ and filled the highlighted (after shrink) area with any color. I use #000000 black here. Double click on ‘bg02′ to launch up the Blending Option and tweak the following style.

Gradiant Overlay

  • Color stop: 0%, #c6002f
  • Color stop: 100%, #c6002f

Create another new layer for text, call it ‘txt‘. Insert your button’s text. I’ll use an alphabet to represent. The font styles I’m using here are as follow:

  • Rounded Arial Bold
  • 150pt

Same, after deciding your text, double click on ‘txt’ to launch the Blending Options and tweak the following styles.

Drop Shadow

  • Opacity: 25%
  • Distance: 0px
  • Spread: 0px
  • Size: 5px

Inner Shadow

  • Opacity: 10%
  • Distance: 0px
  • Choke: 0
  • Size: 10px

Bevel Emboss

  • Depth: 1px
  • Direction: Down
  • Size: 0px
  • Softten: 0px
  • Highlight Mode Opacity: 32%
  • Shadow Mode Opacity: 32%

Gradiant Overlay

  • Color Stop:0% #d2d2d2
  • Color Stop:100% #f0efef

Button is almost done. Let’s give it a little glow over the top part. Hold CTRL, left click ‘bg02‘ Layer Thumbnail to highlight the outer shape; choose Eclipse Marquee Tool. Now hold ALT, with Eclipse Marquee Tool selected, drag is across to minus out bottom half of the highlighted area. Refer to image above.

With the top portion highlighted and Eclipse Marquee Tool still selected, right click and choose Feather; enter 15px for the radius.

Create a new layer, call it ‘glow‘ and fill the highlighted part with white [#ffffff]. This should add glow effect to the top part of your button. Final product should look something like the image below.

Something extra..

Tweak the Blending Options of ‘bg01‘ and ‘bg02‘ will give you more interesting buttons. Here’s another Photoshop tutorial on button I’ve done previously - Create Glossy button for Web 2.0

Posted by hongkiat in Photoshop Tutorial, at 04.03.07

Tags: , , , ,

Related Contents

Sponsors

Comments

  1. www.dudu2.com

    April 5th, 2007 at 2:17 pm

    where is the trackback address?

    I use this.
    http://www.dudu2.com
    THANK U.

    comment

  2. hongkiat

    April 5th, 2007 at 2:28 pm

    dudu: i really appreciate a link back to this page if you are to copy-paste my original content on your site. Thanks.

    comment

  3. danny

    April 5th, 2007 at 3:10 pm

    Very nice!!

    Thanks for the awesome guide.

    comment

  4. dudu2

    April 5th, 2007 at 5:35 pm

    HI,SIR,I come from CHINA.My Englis is poor.I hope you can understand what I write.MAY I translate your photoshop tutorials into CHINESE? I do write your blog address in every article.
    WAITING FOR YOUR ANSWER.
    THANKS A LOT.

    comment

  5. zap

    April 7th, 2007 at 12:13 am

    Thanks for the very useful tutorial.

    comment

  6. Hannes

    April 16th, 2007 at 6:29 am

    Thank you for nice tut. I have the following i’d like to point out so you can either explain or rectify (or ignore - ha!):

    1. For ‘bg2′ layer you specify a gradient overlay with the following: * Color stop: 0%, #c6002f * Color stop: 100%, #c6002f

    Both the color stops are the same. This doesn’t give the “gradiated” look needed here. Is this intentional? If so, why not just do a color overlay of the color? Or specify the color before filling the contracted square?

    2. The text specifies a ‘Bevel and emboss’ of Depth: 1 px

    The depth option in PS is given as a percentage and not as pixels. Should this be 10%?

    Hopefully you can clear that up for us. Many thanks!

    comment

  7. JH

    April 21st, 2007 at 12:07 pm

    I’m creating an internal training ui and this may be just what i need for the css rollover buttons in the nav pane. Wish I got paid more for it else i’d throw a bone your way. Thanks!

    comment

  8. links for 2007-05-26 | nicharalambous.com

    May 26th, 2007 at 10:20 pm

    [...] Photoshop: Create Web 2.0 Button (tags: photoshop feathering buttons web2.0) [...]

    comment

  9. Create Web 2.0 Button online

    June 12th, 2007 at 2:25 pm

    [...] Photoshop: Create Web 2.0 Button [...]

    comment

  10. wayne zhu

    June 17th, 2007 at 2:55 pm

    thank you!!!

    comment

  11. Create Web 2.0 Button in Photoshop » Cool Web Tools

    June 21st, 2007 at 3:47 am

    [...] a blog entry from Hongkiat.com that gave step by step instructions on creating a web 2.0 button.  Check it out! spread the joy:These icons link to social bookmarking sites where readers can share and discover [...]

    comment

  12. web design mumbai

    July 28th, 2007 at 2:45 pm

    well this is not the first tutorial that i am following from your blog and let me tell you like rest of the tuts this is also amazing but again faced a few problems. in the end got the result and i am happy

    comment

  13. Chris Kameir

    August 10th, 2007 at 2:03 am

    Worked great for me - thank you!

    comment

  14. Reza

    August 17th, 2007 at 6:54 pm

    That’s a great tutorial, it helped me much. Thanks a lot :)

    comment

  15. Make you own web 2.0 « Familyresource4u’s Weblog

    September 20th, 2007 at 10:00 pm

    [...] Use Gradients and curves in your new buttons. Look at nearly all the new Web 2.0 sites out there and you will notice that most of them use a lot of gradients, with drop shadows, and curves.  This style is critical if you are going to look like a new Web 2.0 site! Web 2.0 Resource: Create Web.0 Buttons in PhotoShop [...]

    comment

  16. Free casino on line games.

    November 9th, 2007 at 8:25 am

    Play free casino games online….

    Vagas casino games for ps2. Spin palace casino over online casino games. Play casino games. Play casino games online. Iwon games casino. Casino games. Free casino games….

    comment

  17. Ray

    December 2nd, 2007 at 3:25 pm

    Great post. using the button on my site 611rent.com . Thanks

    comment

  18. Generate Web Button Online with Freewebstuff

    January 10th, 2008 at 10:37 pm

    [...] previously written a tutorial on how you can create Web 2.0 button with Photoshop, but for those who wants it quick and dirty; there are web services that allows you to do it free [...]

    comment

  19. D3scene "guarantee" button.

    January 19th, 2008 at 8:33 am

    [...] of a Web 2.0 style button… The following are some examples to give you an idea of Web 2.0: Photoshop: Create Web 2.0 Button IRIS Design Archive Web 2.0 style buttons [...]

    comment

  20. Look What I Found » links for 2008-02-08

    February 8th, 2008 at 12:21 pm

    [...] Photoshop: Create Web 2.0 Button Good photoshop tutorial on how to make web 2.0 buttons (tags: web20 photoshop buttons tutorial howto) [...]

    comment

  21. love is nothing but destiny » how to create web2 buttons

    February 11th, 2008 at 2:38 am

    [...] CTRL, left click on ‘bg01‘ Layer Thumbnail to select its shape. Go Select -> Modify -> Contract and enter the value ‘2px‘. This will [...]

    comment

  22. Frank

    February 28th, 2008 at 5:31 am

    Cheers, this is really helpful.

    comment

  23. Durkin

    March 23rd, 2008 at 1:26 am

    hi there, excellent tutorial. These buttons differ slightly from the normal web 2.0 buttons i see around the net, but i like them!

    comment

  24. Sangesh

    March 31st, 2008 at 11:11 pm

    this is quite helpful, thankx mate.

    comment

  25. Media

    April 21st, 2008 at 2:18 pm

    Great tutorial! Thank’s

    comment

  26. webpix

    April 28th, 2008 at 3:26 am

    Its really a nice tutorial for explaining very in clean manner.

    comment

  27. squall

    April 28th, 2008 at 1:13 pm

    very nice! I want to translate to Chinese language in my blog,can i ? thank you ^^

    comment


Leave a reply