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. Мдяя… а когда то это называлось aqua-style…

    Posted on November 26th, 2006 at 9:53 pm

  2. :-) Времена меняются

    Posted on November 26th, 2006 at 9:57 pm

  3. final buttons look great

    Posted on November 26th, 2006 at 10:53 pm

  4. I love web 2.0, and I don’t wanna be a jerk… but I’d like to point out that the web 2.0 style is very closely related (in fact, almost a copy of) apple’s “Aqua” interface style.

    Posted on November 26th, 2006 at 10:56 pm

  5. Nice tut

    Posted on November 26th, 2006 at 11:37 pm

  6. Really nice button, but it’d be more web 2.0 if it had a reflection at the bottom.

    Posted on November 26th, 2006 at 11:43 pm

  7. Thanks for the tip, I am gonna try it out in Photoshop 7, hope it works.

    -Ben

    Posted on November 27th, 2006 at 12:26 am

  8. Oh! So these nice shiny thingies are called web 2.0 😛

    I alwasys believed that web 2.0 is some kind of system of more advanced and interective web services and Rich Internet applications that use SOAP, AJAX and REST etc. :)

    Posted on November 27th, 2006 at 12:28 am

  9. IMNSHO, we should not split this web-2.0 phenomenon to parts like design, technologies, etc. I think everybody agree that design changes were inspired by technologies and technologies became so popular because of great implementations with great design.

    Posted on November 27th, 2006 at 1:02 am

  10. Simple yet effective!

    Posted on November 27th, 2006 at 1:19 am

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

    Posted on November 27th, 2006 at 1:27 am

  12. Buttons look great, but the tutorial is really hard to follow unless your a photoshop expert.

    Posted on November 27th, 2006 at 1:36 am

  13. Any chance you can upload this action or styles for download. I’m a bit stuck on 12 – but don’t have CS2, which could be the problem.

    Posted on November 27th, 2006 at 3:20 am

  14. Yeah steps 11 & 12 are hard to follow. Where do you find quick mask mode?

    Posted on November 27th, 2006 at 3:46 am

  15. Brandon: Quick mask mode button placed right under the color selection box in toolbar. Another way to enter/leave quick mask mode is to press “Q” button on your keyboard.

    2.0: Will ask my wife at the morning and she will upload PSD files.

    Posted on November 27th, 2006 at 3:52 am

  16. Nice tip! Thanks for sharing.

    Posted on November 27th, 2006 at 3:55 am

  17. Glad to help you :-)

    Posted on November 27th, 2006 at 3:56 am

  18. I enjoyed reading this tutorial. I am by far a photoshop expert and would have enjoyed seeing some additional references instead of going back to Google to continue my search. Other than that, great article and nice graphics.

    Posted on November 27th, 2006 at 4:31 am

  19. Thanks for this walk-through, very nice. Your effort is appreciated. Btw, what did you use to make the screen captures pop-up when clicked?
    Thanks again,
    Sean

    Posted on November 27th, 2006 at 7:35 am

  20. 2 Sean: I’m using plugin for Worpress called WordPress Lightbox 2. It’s based on JavaScript library Lightbox JS v2.0

    Posted on November 27th, 2006 at 7:39 am

  21. How about sharing with us the Photoshop action file?

    Posted on November 27th, 2006 at 7:55 am

  22. If you like creating professional, glossy buttons, try checking out http://www.buttongadget.com.

    ButtonGadget2

    Posted on November 27th, 2006 at 8:04 am

  23. А на фига утруждаться, что то делать когда в инете есть все готовое?

    Posted on November 27th, 2006 at 10:11 am

  24. just include the psd file then people can edit as they please.

    Posted on November 27th, 2006 at 10:16 am

  25. Приятный стиль оформления, но главное – юзабилити.

    Posted on November 27th, 2006 at 10:24 am

  26. Great tutorial 😉

    Posted on November 27th, 2006 at 1:14 pm

  27. 2Andy: правильно – всех дизайнеров на свалку! а то в инете же все уже есть! :-)

    Posted on November 27th, 2006 at 9:48 pm

  28. I also haven’t managed to create so beautiful button, could you please provide us with PSD file? Thank you.

    Posted on November 27th, 2006 at 10:15 pm

  29. “After leaving quick mask mode, you will get selection area. Click Delete button.” When I leave quick mask mode it shows a selection and “delete button” wont do anything, have to quit the changes. Get get past 12 also. :(

    Posted on November 28th, 2006 at 12:53 am

  30. У меня получилось создать что-то подобное

    http://www.wazaber.com/files/wazaber-rss.gif

    Posted on November 28th, 2006 at 2:33 am

  31. Wazaber: Думаю, стоит немного увеличить радиус скругления углов, и блик сделать чуть более бледным, а то он выглядит неестественно. Плюс посмотри в сторону размытия нижней границы блика – эффект красивше получается :-)

    Posted on November 28th, 2006 at 3:01 am

  32. One of the best web 2.0 tutorials, very good job.
    I love the orange button!

    Posted on November 28th, 2006 at 10:57 am

  33. Nice tut

    Posted on November 28th, 2006 at 12:25 pm

  34. Molodca! Peshi ischo!

    Posted on November 28th, 2006 at 1:36 pm

  35. Very nice, I always wanted to know how to make them.

    To all you people asking for the PSD – just follow the instructions and stop being lazy!

    Posted on November 28th, 2006 at 2:26 pm

  36. Superb… but 1 question ¿What´s the name of the font??

    Posted on November 28th, 2006 at 5:43 pm

  37. What the hell does this have to do with Web 2.0?

    Web 2.0 is all about user generated content this crap could be done with photoshop 3.

    Posted on November 28th, 2006 at 8:24 pm

  38. For the glare layer why rasterize it? All you have to do is click Add Layer Mask on the rounded rectangle shape, apply the gradient with the Gradient Tool and then lower the opacity of that layer. This way you can tweak the shape of the glare without having to redo the layer every single time. We who use Photoshop everyday know destructive editing is not a recommended method.

    Posted on November 29th, 2006 at 12:48 am

  39. Guys, sorry for delay, I’ve just uploaded PSD sources. Feel free to download and use it where are you want.

    2 Meese: Thanks for sharing your expirience!

    Posted on November 29th, 2006 at 1:46 am

  40. I don’t like how you leave out a lot of smaller details or show better examples. You could have also explained to those who are not too familiar with the font selection what font you used and what if any layer styles were used on said font.

    Posted on November 29th, 2006 at 4:16 am

  41. I used Verdana 16 pt font for all of those buttons.

    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!

    PEACE

    Posted on November 29th, 2006 at 4:47 am

  42. Не пойму, почему ЭТО называется “стилем Web 2.0”? По-моему это “тяжелый”, чисто американский стиль, а-ля Windows Vista… Ну а Web 2.0 — это не визуальный стиль, а тенденции в развитии технологий интернета.

    Posted on November 29th, 2006 at 8:06 pm

  43. 2SLA80: Попрошу заметить, что висты не было тогда, когда все это придумали… Как выше заметили, это – аква от маков. Вот только признайте, что видя страницу с таким оформлением, вы невольно отнесете ее к “новому вебу” в отличие от сайта амазона, который как ни крути – 100% non web 2.0.

    Posted on November 29th, 2006 at 8:51 pm

  44. “тяжелый”, чисто американский стиль

    Вот это понравилось больше всего. Можете показать пример “легкого отечественного стиля”? Не знаю как у вас, но лично у меня возникает стойкое впечатление легкости и стиля при виде сайтов, которые принято относить к Web 2.0.

    Насчет того, что Веб 2.0 – это не визуальный стиль, обратите внимание, что легко можно отличить на глаз новый модный сайт от любого старого (как и отметил Scoundrel). Ради хохмы наберите в Google web 2.0 style, думаю будете сильно удивлены количеством статей.

    От себя могу порекомендовать следующие статьи

    Они как раз и в топе гугла. Для общего развития можете и остальное посмотреть.

    Posted on November 29th, 2006 at 8:58 pm

  45. Nice tut for newbies

    Posted on November 30th, 2006 at 5:35 am

  46. that was fun. nice result. thanks

    Posted on December 1st, 2006 at 5:39 am

  47. what is web 2.0 ?

    Posted on December 1st, 2006 at 3:13 pm

  48. Very clear! Nice tutorial.

    Posted on December 1st, 2006 at 3:23 pm

  49. Sean Johnson it is web-Style

    Posted on December 2nd, 2006 at 2:24 am

  50. Someone here said that these buttons look like Apple´s aqua interface… that is… retarded, to say the least. This style of design existed well before OS X. Stop being a geek fanboy and leave the design theories for those experienced. And yes, you are being a jerk ungus… sigh

    Posted on December 3rd, 2006 at 9:59 am

  51. Has anyone managed to do this in fireworks?

    Posted on December 8th, 2006 at 1:24 am

  52. Very beautiful shiny button, but if you want make a web 2.0 logo, you can see this tutorial :

    http://daleetstudios.free.fr/dotclear/?2006/10/04/25-tutoriel-video-n2-le-logo-web-20

    Posted on December 12th, 2006 at 3:08 pm

  53. I’m keen to include web 2.0 styles buttons I have from photoshop however don’t really want to lose the flexibility of text (e.g. changing the text, multiple languages supports – don’t need to have multiple images)

    Would someone be able to clarify whether there is an “Image Overlay on Text with CSS” approach regarding the displaying of dynamic text within an image?

    If yes, how is this accomplished? Is it based on HTML 4.0 “Button”? Is the idea to slice up the image (say a button) that you want so you can then use DIV’s to have the edges of the cutup image grow/shrink depending on the size of the dynamic text?

    Background –

    Regards
    Greg

    Posted on December 24th, 2006 at 6:19 am

  54. nice tutorial

    Posted on December 28th, 2006 at 9:47 pm

  55. Very interesting article! thanks

    Posted on January 11th, 2007 at 5:05 pm

  56. Where I find psd files?

    Posted on January 30th, 2007 at 9:48 pm

  57. Клёво! спасибо за подсказочку, просто супер, давно хотел сделать но не как не получалось, Спасибо ещё раз:)

    Posted on February 13th, 2007 at 3:22 pm

  58. I’m also having problem with steps 11 / 12, I did everything as suggested but no result. When you are ask to create a gradient after entering Quick Mask Mode, do we create the gradient on a new layer or on the “glare” layer. It would be good to have a video tutorial :)

    Anyway the buttons you did are great, i like the look.

    Posted on February 21st, 2007 at 2:02 pm

  59. I realy superb web 2.0 buttons

    Posted on March 2nd, 2007 at 12:05 pm

  60. Like to see more tutorials on Web 2, like creating Web 2 Logo and other type of buttons

    Posted on March 2nd, 2007 at 10:52 pm

  61. looks great. thanx alot

    Posted on March 10th, 2007 at 4:30 pm

  62. wow. aqua style would be great..

    Posted on March 13th, 2007 at 3:27 am

  63. Nice tip! Thanks for sharing

    Posted on March 14th, 2007 at 3:57 am

  64. thanks for tutorials..

    Posted on March 14th, 2007 at 12:09 pm

  65. Excellent tutorial. Dugg too. Thanks

    Posted on March 20th, 2007 at 4:10 am

  66. Just FYI: it also works with Photoshop 6 but the PSD files take a huge amount of RAM to open. Better to learn how to do it myself I say. Great tutorial. Thank you. :)

    Posted on March 21st, 2007 at 2:59 am

  67. I’m doing a redesign for this website, http://www.comonetwork.com, and this is a perfect tutorial! Thanks!

    Posted on March 24th, 2007 at 7:57 pm

  68. looks very nice. thanx

    Posted on March 26th, 2007 at 2:59 pm

  69. Realy good example.
    Many thanks

    Posted on March 28th, 2007 at 9:46 am

  70. Really nice tutorial !
    Always nice to see someone who can clearly describe a process clearly to the point, without getting lost by adding too many fringes.
    Congrats!

    On a separate note:
    I personally have a big problem with this whole Web2.0 HYPE …
    Web 2.0 is just another way of saying ‘I’m a developer, I can’t design for days, so let’s call my limited creative skills a standard, and all of a sudden I can sell myself as hot again’.
    The only other thing those people need now is a pre-fabricated step-by-step tutorial on how to clone the “37signals style of page layout”, and that’ll then totally suck out every little bit of identity and individuality.

    It used to be ‘form and function’, now it’s ‘uniform as function’.
    Compliance has been replaced with complacency.
    Mediocrity becomes the new standard.

    Posted on March 28th, 2007 at 12:21 pm

  71. Hi there fantastic buttons, really
    Between you and some developers in Japan, the best i have seen.

    our very clever…

    Im going to use one on my seo world championship site if thats okay?
    i will give full credit of course.

    Phillip Kemp.
    Sheffield 7306
    Tasmania
    http://www.globalwarming-awareness2007.mobi

    Posted on March 28th, 2007 at 5:27 pm

  72. Thank you very much… very useful guide! I’m waiting for more tutorials! 😉

    Posted on April 6th, 2007 at 11:28 am

  73. Excellent guide. I’ve used it multiple times now and it is really sharp. I can impress friends with my awesome photoshop skills. I just neglect to mention that I memorized your guide :p

    Thanks

    Posted on April 9th, 2007 at 8:36 am

  74. Красота…. Обязательно поставлю на свой сайт 8g.by.ru

    Posted on April 10th, 2007 at 2:47 pm

  75. Great design tips! It doesn’t look like it worked until you take a step back and look at it, then the effect blends together! Thanks! I am going to use it on my site redesign.

    Posted on April 27th, 2007 at 3:32 am

  76. With phtotshop you can do anything.Excellent guide.I will use it.

    Posted on April 27th, 2007 at 5:34 pm

  77. I can follow the instruction until step 12!

    When i leave the Quick Edit Mode, there is a rectancle selection, but then you write “delete button”.

    When i delete the Layer “Button” the hole button disapears. Where exactly should this “Delete Button” should be?

    Please help :-(

    dominik

    Posted on May 3rd, 2007 at 11:52 pm

  78. very elegant. Thank you!

    Posted on May 6th, 2007 at 4:36 am

  79. hi, nice article! Could I ask how you do the effect, when you click a picture, the background gets dark and pictures can be shown in slides

    Could you send me an email back? Thanks.

    Posted on May 6th, 2007 at 4:55 pm

  80. Danke, ich frage mich schon lange wie sowas geht.

    Posted on May 10th, 2007 at 1:42 pm

  81. Nice photoshop tutorial using web 2.0 design.

    Posted on May 31st, 2007 at 5:49 pm

  82. So nice 😀

    I love the orange css :)

    Posted on May 31st, 2007 at 10:21 pm

  83. Excellent tutorial,
    Thanks a lot.

    Posted on June 14th, 2007 at 11:07 am

  84. Hi, Great design!

    Applying this to my site as we speak! 😉

    Thx!

    Posted on June 15th, 2007 at 6:20 pm

  85. Симпатично. Взял на вооружение.

    Posted on June 16th, 2007 at 7:48 pm

  86. Wonderful buttons. Some of the best I’ve seen. Thank you!

    Posted on June 22nd, 2007 at 1:04 am

  87. Спасибо за кнопочки может будет продолжение в качестве закачек типа http://www.drweb.de/weblog/weblog/?p=780

    Posted on June 28th, 2007 at 10:48 am

  88. Thanks for PSD examples.

    Posted on June 28th, 2007 at 3:44 pm

  89. Hi, Great design!
    very cool button.thanks

    Posted on July 13th, 2007 at 10:46 pm

  90. Great tutorial thanks so much. Got a abit lost at step 4 though with “Set the Gradient Overlay effect parameters. I have following color of first and second thumb: 434343, third – 000000.” I’m no expert but I couldn’t work out what you meant by “first and second thumb: 434343, third – 000000.”

    If you have a moment to explain that I’d be very appeciative.

    Kind regads,
    Cam

    Posted on July 16th, 2007 at 5:24 pm

  91. Thx a lot for the nice tutorial and the psd – exactly what I was looking for!

    Posted on July 16th, 2007 at 5:35 pm

  92. Thanks for the tutorial.

    Posted on July 18th, 2007 at 8:23 pm

  93. Непонимаю почему у меня вторая фигура не белая как у вас ? она у меня получается с такими же настройками как и первая (цвет и т.д.)..вроде и легкий урок а все равно неполучается (((

    Posted on July 20th, 2007 at 1:09 pm

  94. да вот я попробовал вашим способом делать такой эффект, нормально получилось. Но, я реально все это без масок делаю быстрее. Не могу привыкнуть. вернее даже понять, функию быстрой маски.
    Спасибо за урок.

    Posted on August 1st, 2007 at 10:05 pm

  95. This is absolutely incredible! Thanks so much for the tips. I am not a designer, but if I can get this to work that will be so good for my sites. Thanks again.

    Posted on August 3rd, 2007 at 1:43 am

  96. Hi, great post.
    I`d like to translate your article to Polish. Let me know if its ok?

    Posted on August 7th, 2007 at 2:45 pm

  97. Im at the part where you edit in quick mask mode.. ok, im in quick mask mode, now what do i put for the gradient??? nothing i do comes out like that, its all a flat red…

    Posted on August 23rd, 2007 at 5:23 am

  98. can you make 2.0 buttons for me and sell them so me?

    Posted on August 23rd, 2007 at 6:38 pm

  99. With phtotshop you can do anything.Excellent guide

    Posted on September 8th, 2007 at 11:50 am

  100. hey,

    thanks for taking the time to put this together…..but i’m having a problem …..I get all the way to #11 and that is where i start having trouble. I click the quick edit mask mode …and then i click on the gradient tool, then drag it down so that it looks similar to yours but when i go back to edit in standard mode after i click delete it doesn’t look like yours……what could i possibly be doing wrong ….

    Posted on September 8th, 2007 at 8:28 pm

  101. 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

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

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

  103. 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

  104. 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

  105. 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

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

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

  107. 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

  108. 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

  109. 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

  110. Fucking sick of Web 2.0.

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

  111. 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

  112. 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

  113. Thanks for PSD examples.
    fantastic buttons.

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

  114. 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

  115. Very nice contribution.

    thanks

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

  116. Woaooo nice button!
    keep it up.

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

  117. I like this web2.0 style. hope it survive for a long time! :-)

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

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

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

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

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

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

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

  121. “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

  122. 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

  123. 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

  124. very stylish button .. i love it

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

  125. You should be ashamed – totally useless for newbies

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

  126. Thanks for sharing the technique, hopefully I’ll implement a one in my website :) thanks.

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

  127. 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

  128. ne other tuts available?..

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

  129. Great stuff. Keep up the good work.

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

  130. 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

  131. 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

  132. good job, thanx

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

  133. 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

  134. 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

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

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

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

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

  137. 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

  138. 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

  139. 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

  140. 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

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

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

  142. 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

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

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

  144. 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

  145. 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

  146. 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