Web 2.0 style buttons

Nowadays Web 2.0 style becomes more popular. Every day tons of sites which has simple, bright and very interesting things, appear in Network. There are no standards about creating any Web 2.0 elements, but we have several typical features, for example and clean colors, many gradients.

Today I want to show you how to create Web 2.0 styled button using Adobe Photoshop CS2.

  1. Open the Photoshop, create new document for the button.
  2. Create shape for future button using Rounded Rectangle tool on toolbar, specify round radius.
    Web 2.0 Button - Initial
  3. Right click on rectangle layer in Layers palette, choose Blending Options.
  4. Set the Gradient Overlay effect parameters. I have following color of first and second thumb: 434343, third – 000000.
    Web 2.0 Button - Initial gradient
  5. You can find Stroke effect parameters below. Stroke color is 363636.
    Web 2.0 Button - Initial stroke
  6. Set the Inner Glow effect options.
    Web 2.0 Button - Initial inner glow
  7. As the result you will get following image:
    Web 2.0 Button - Initial result
  8. Create rectangle using Rounded Rectangle tool, it will be used as button glare.
    Web 2.0 Button - Glare
  9. Right click on “glare” layer, choose Rasterize Layer.
  10. Click Edit in Quick Mask Mode on toolbar.
  11. Choose Gradient Tool, create gradient like following:
    Web 2.0 Button - Glare mask
  12. After leaving quick mask mode, you will get selection area. Click Delete button.
    Web 2.0 Button - Glare result
  13. Add layer with text “Entries RSS” and RSS icon. Set Drop Shadow effect parameters.
    Web 2.0 Button - Text

Now you got following button:

Web 2.0 Button - Result

After changing different effects parameters, adding or changing elements, I got following buttons:

Web 2.0 Button - Example 1

Web 2.0 Button - Example 2

Web 2.0 Button - Example 3

Web 2.0 Button - Example 4

Updated: You can download PSD sources here.

146 Responses

  1. Thanks alot! Wicked web 2.0 buttons. I am going to make some of these for my blogs! Great tutorial! Keep it up!

    Posted on September 9th, 2007 at 10:39 pm

  2. Отличные кнопки… Это тебе не плоская полосатая кнопочка из стандартного набора… В новых темах вордпресса повсюду RSS кнопки такого вида. Скорее всего списали с этого поста 🙂

    Posted on September 10th, 2007 at 8:29 pm

  3. Thanks for the well written article. We used a bit of your technique for some of the search button we are using on our travel search site – travature.com

    Posted on September 11th, 2007 at 6:13 am

  4. I have spent the past 2 hours just trying to figure out the first two steps.
    Are you sure this is CS2? My CS2 version 9.0.2 displays look nothing like what your are showing.

    Posted on September 13th, 2007 at 7:56 pm

  5. Sweet. I’m going to use this technique to create a few better header images for my basketball blog. Thanks

    Posted on September 17th, 2007 at 5:20 am

  6. That’s a great tutorial. I guess everybody liked it and commenting on it.

    Posted on September 24th, 2007 at 2:02 pm

  7. Great tutorial but…

    “About minor details – we are not children. Do I want to teach you Photoshop? No! Do I want to show, how to create something cool things using this tool? Yes! Article (and most of others in this blog) supposed that you have some experience with Adobe products. I’m apologise for this, but I don’t like articles like “move your mouse to main menu at the top of window and click ‘File’ item”. Be smarty!”

    Whoa there! I think you’ve got it all wrong! Teaching people how to use Photoshop *thoroughly* AND *properly* while taking the time to show them a dumbed-down step-by-step example might be better than skipping steps leaving a good chunk of your audience totally lost and helpless. Take the extra 20-30 minutes and throw a few more steps in there and save some confusion! (please) It’ll make for a better tutorial in the end.

    I’m not knocking your work, It looks great… (I’d pay to see a tutorial for button #2) I just compared my end result with your .PSD file and sadly the two are nothing alike. =[

    Thanks!

    Posted on September 30th, 2007 at 8:57 pm

  8. Great so now we all know what web 2 is, however like the guy from earlier in the conversation I was inspired to write about the fact that whatever you call web 2.0 as a style that will all change next year when some hotshot designer really ups the tempo. You cant have a web 2.0 design the whole concept of web 2.0 is the fact that it is content driven user interaction. So the interface really doesnt matter to the substance that is web 2.0. Hey I have designed some web 3.0 interfaces for the web 2.0 technoilogy. Dont bother with this old stuff look at my web 3.0 concepts… hey now dont any of you go designing no web 4. stuff before I get famous with web 3.0 desgn ya hear me!?

    Posted on October 1st, 2007 at 11:52 am

  9. I had problems creating the glare. Did anyone else run into any problems with this? I got to the step where you Rasterize Layer, created gradient with the gradient tool… selected Edit in Quick Mask tool, however, when unclicking or leaving Edit in Quick Mask tool, I dont get a selection to delete. Can someone help me? I am unable to get through this! Thanks in advance.

    mike

    Posted on October 6th, 2007 at 2:20 am

  10. Fucking sick of Web 2.0.

    Posted on October 11th, 2007 at 9:29 pm

  11. jesus, i also have problems with the glare. could someone please answer the question below?!? thx

    Posted on October 19th, 2007 at 8:34 am

  12. A showcase of very nice buttons; a useless tutorial. Anyone proficient enough in Photoshop to follow the many missing steps (not simple stuff like “click File” either) shouldn’t need this tutorial in the first place.

    By definition, a tutorial IS supposed to guide you step by step.

    NAPP’s tutorials blow these away, but I guess you get what you pay for.

    Posted on November 13th, 2007 at 5:18 pm

  13. Thanks for PSD examples.
    fantastic buttons.

    Posted on November 22nd, 2007 at 8:10 am

  14. hey, i just wanted to say thanks for the tutorial. i have seen a number of these on the web, but yours is very concise and easy to follow. so, thanks again.
    alex

    Posted on November 25th, 2007 at 9:00 am

  15. Very nice contribution.

    thanks

    Posted on December 22nd, 2007 at 2:22 am

  16. Woaooo nice button!
    keep it up.

    Posted on December 29th, 2007 at 8:55 am

  17. I like this web2.0 style. hope it survive for a long time! 🙂

    Posted on January 10th, 2008 at 4:25 am

  18. Урок полезный, щас веб20 конкретно наступает и мне как дизайнеру это хоть и не по душе, но надо адаптироваться

    Posted on January 11th, 2008 at 2:51 pm

  19. Thanks!! great tutorial…simple, fast, effective, keep uploading more tutorials!

    Posted on January 22nd, 2008 at 2:34 pm

  20. wow, looks great! thanks for the tutorial.

    Posted on January 24th, 2008 at 3:56 am

  21. “After leaving quick mask mode, you will get selection area. Click Delete button” simply means that you have to hit the “DEL” (English) or “CANC” (Italian) button on your keyboard after leaving quick mask mode (to do this just click on the same button you clicked in step 10): cursor is now a cross and then clicking delete will make the glare layer become.
    Remember to raterize the layer, as explained in step 9.

    Thanks to Iris Design for this tutorial.

    Rock & Roll!

    Posted on January 30th, 2008 at 12:26 am

  22. Hi Thanks a lot for this tutorial. Indebted. I am a photoshop noob and I can’t figure out one thing.. along with the web2.0 button the entire canvass also gets exported. So when I plug the thing into dreamweaver, the entire table gets distorted to make space for the entire canvass size. 🙁 Can you tell me what to do so tht the godforsaken background canvass doesn’t come into the image while exporting. Thanks.

    Posted on February 22nd, 2008 at 11:40 pm

  23. OH lord, I can’t follow this because I don’t know what I am doing.

    I really need someone standing over my shoulder.

    I don’t even know what the word rasterize and mask do…

    Posted on February 23rd, 2008 at 8:09 pm

  24. very stylish button .. i love it

    Posted on April 11th, 2008 at 2:02 pm

  25. You should be ashamed – totally useless for newbies

    Posted on April 11th, 2008 at 5:15 pm

  26. Thanks for sharing the technique, hopefully I’ll implement a one in my website 🙂 thanks.

    Posted on April 18th, 2008 at 11:47 am

  27. Thank you, I will be putting this to use straight away.

    Hope to see more Web 2.0 techniques on here, there is a serious lack of this type of quality tutorials available for free.

    Keep up the good work

    Thank 😉

    Posted on April 26th, 2008 at 1:35 pm

  28. ne other tuts available?..

    Posted on April 30th, 2008 at 7:47 am

  29. Great stuff. Keep up the good work.

    Posted on May 2nd, 2008 at 5:09 pm

  30. Thanks a lot for this tutorial. Indebted. I am a photoshop noob and I can’t figure out one thing.. along with the web2.0 button the entire canvass also gets exported. So when I plug the thing into dreamweaver, the entire table gets distorted to make space for the entire canvass size. 🙁 Can you tell me what to do so tht the godforsaken background canvass doesn’t come into the image while exporting. Thanks…

    Posted on May 26th, 2008 at 7:26 pm

  31. Hello,
    Thanks,for your nice tips .Your effort is appreciated because this point clear with psd example. so again i want to thanks for the tutorial.

    Posted on June 2nd, 2008 at 7:14 am

  32. good job, thanx

    Posted on June 27th, 2008 at 2:56 pm

  33. I will confuse what is “click Edit in Quick Mask Mode on toolbar.” this optinon not in CS3 photoshop so plz clear my confusion

    Posted on September 30th, 2008 at 11:59 am

  34. The steps were not very clear. Your an asshole. Sorry.. that’s just how i felt.
    Thanks any way I will look somewhere else.

    Posted on October 12th, 2008 at 5:55 pm

  35. Thanx a Lot !!!
    Can you tell me how exactly did you get the “Example 3” ?

    Posted on October 18th, 2008 at 9:20 pm

  36. Как и у Радимира, нифига не получилось. Делаю все по Вашему мануалу, результат совсем другой получается. Один я такой тупой?

    Posted on November 14th, 2008 at 4:05 pm

  37. looks good, but it needs some photoshop experience to create them.. if you don’t have it, better to take a look at web2.0 buttons generators. there are a lot of the, free and commercial, for example Vista Buttons http://vista-buttons.com/ or free-buttons.org

    Posted on January 22nd, 2009 at 10:02 am

  38. this is great tutorial and simple too, @elahti what ar you talkin bout, its the quick mask mode bit that i always forget how to do. this site has been in my bookmarks for a long time now.

    Posted on May 26th, 2009 at 11:25 am

  39. This wasn’t made in Photoshop CS2. It must be CS3 which has rounded rectangle as an option instead of having to make one with blur, etc. The tutorial is old now, but it really should be updated to state the correct version used.

    Posted on May 28th, 2009 at 5:11 pm

  40. You say ‘Create gradient like the following’ in Step 11. I’ve been using Photoshop for 10 years and I can’t see exactly what kind of gradient you are using. Step 11 might as well say ‘Read my mind’. Very frustrating.

    Posted on June 12th, 2009 at 6:30 am

  41. Amazing!!! That’s the correct method I was searching for creating shiny buttons in Photoshop.

    Posted on July 6th, 2009 at 11:14 am

  42. Hi Guys,

    Re. Step 7, I have found a way to do it with quick mask and gradient but I am not sure if it is the correct way.

    1. Once glare layer has been created and rasterized, load the selection of just the layer by pressing ctrl+alt+shift and clicking on layer icon against layer in layer panel.
    2. Click Select -> Inverse, to inverse the selection and select everything but the white glare box.
    3. Press “Q” to enter quick mask mode (the white box should now be red).
    4. Select the Gradient tool and ‘Foreground To Transparent’ gradient type.
    5. Drag a gradient from bottom of the glare box to top of the glare box ensuring it is 90% straight.
    6. Press “Q” again to exit quick mask mode.
    7. Press “delete” on your keyboard whilst that new selection is there and a transparent gradient should have been created!

    Not sure what the easier way around that is, because that was a lot of steps for Iris to miss!

    Posted on September 17th, 2009 at 4:42 am

  43. Sorry that should be re. Step 10 guys. Thanks!

    Posted on September 17th, 2009 at 4:42 am

  44. Thanks a lot for this tutorial. Indebted. I am a photoshop noob and I can’t figure out one thing.. along with the web2.0 button the entire canvass also gets exported. So when I plug the thing into dreamweaver, the entire table gets distorted to make space for the entire canvass size. Can you tell me what to do so tht the godforsaken background canvass doesn’t come into the image while exporting. Thanks

    Posted on September 25th, 2009 at 12:35 am

  45. wow. just “discovered” this wonderful tutorial today. i’m a relative newbie with Photoshop – still feeling my way around, trying to teach myself.

    i zooooomed through your tutorial in about 15 minutes, managing to create a beautiful web 2.0 button.

    so i thank you for the tutorial and even more for the clear and concise instructions. i am shocked i did not have to download the PSD files!

    LOL

    Posted on September 29th, 2009 at 4:27 am

  46. looks good, but it needs some photoshop experience to create them.. if you don’t have it, better to take a look at web2.0 buttons generators. there are a lot of the, free and commercial, for example

    Posted on October 12th, 2009 at 12:12 pm

Leave a Reply