How to design a cool web 2.0 button in Illustrator and Photoshop

a cool web 2.0 button

An earlier tutorial on how to make a shiny button in Illustrator using the Opacity Mask feature can be improved upon greatly by adding a sexy brushed steel surrounding ring to your amber jelly button!

As previously explained, the shiny “web 2.0″ button look can be made by placing a circle with a linear black-to-white gradient over a circle with a radial gradient and selecting Make Opacity Mask in the Transparency palette with both selected. See the first row in key below.

Other crescent shapes can be added by putting a smaller circle on top of another and Option-clicking on the second icon from the left of the Shape Modes row in the Pathfinder palette, the tool tip says “Subtract from shape area (Option-click to expand)”. This is a one click way to subtract one shape from another and something I use all the time in Illustrator. See rows 2, 3 and 4 below.

In row 5 below, the steel rim. Double-click the Scale Tool (S) enter 125% and hit Copy with the orange button selected (go Release Opacity Mask in the Transparency palette and get rid of the black and white circle. Put a linear gradient going white-to-black-to-white onto this larger circle. Duplicate the orange button again by pasting in front (Cmd/Ctl-F) get rid of the black and white circle and go Object > Compound Paths > Make (Cmd/Ctl-8).

Finally put all the elements on separate layers in Illustrator and go File > Export and choose Photoshop (psd) from the Format drop down menu. Choose RGB, 72 ppi and make sure you have the Write Layer radio button clicked on. Now we move into Photoshop for some final tweaking and blurring. Open the PSD you exported from Illustrator and you will see all your layers from Illustrator on different layers in Photoshop (top tip!).

a cool web 2.0 button tutorial

Play around with it by blurring the crescent shapes a bit and copying and colouring layers a bit.

Most of the work I did was to the steel rim layer. Add a Drop Shadow and an Inner Glow in Layer Styles in Photoshop. Add Grain or Noise and a horizontal Motion Blur for the steel effect.

I put the orange button layer on top of the House layer and set it to Linear Burn Blend Mode.

5 cool web 2.0 button

They look quite nice as navigation icons.

You can subscribe to new posts via RSS or by email, or follow me on Twitter.

Related articles

This article was posted on Friday, August 17th, 2007 at 12:35 pm and is filed under Illustrator, Internet, Photoshop.
You can follow any responses to this article through the RSS 2.0 feed.

62 Responses to “How to design a cool web 2.0 button in Illustrator and Photoshop”

  1. Jenny, on September 22nd, 2007 at 1:31 am, said:

    Nice buttons

  2. Greenville Web Design, on October 5th, 2007 at 3:42 am, said:

    Great buttons, I will be using these tips in my next design project.

  3. Rob Cubbon, on October 12th, 2007 at 1:35 pm, said:

    @Jenny and @Greenvilled Web Design, thanks for your comments!

  4. Wallace, on October 13th, 2007 at 3:00 pm, said:

    these is great and prefect….i used to try once but the result was not as good as your. will try using your way to redo.

  5. Rob Cubbon, on October 16th, 2007 at 12:22 am, said:

    Hope it goes well, Wallace!

  6. Ben, on January 25th, 2008 at 5:30 pm, said:

    Thanks for the tip!

  7. Carlos Stumpo, on February 2nd, 2008 at 12:46 pm, said:

    Is there anybody can help me…I have not enought technical skills to do it.
    I just can’t create the circle ???
    I would like to abble to build up the firts 3 steps of that explanation.

    Anybody can help me …

    Thank you … cstumpo [at] sapo.pt (Portugal)

  8. Rob Cubbon, on February 3rd, 2008 at 2:07 pm, said:

    Thanks for the comment, Ben. Carlos, I’ve sent you an email.

  9. Photoshop User, on February 6th, 2008 at 12:18 pm, said:

    Thanks a lot for sharing! I like this shiny web 2.0 effect.

  10. Jon bann00n, on February 8th, 2008 at 2:58 pm, said:

    Brill,

  11. Rob Cubbon, on February 23rd, 2008 at 1:45 pm, said:

    You’re welcome, Photoshop User and Jon bann00n!

  12. Bray, on March 23rd, 2008 at 5:18 pm, said:

    Cool. I keep trying this out but I use gimp and I can’t figure out how to do the steel rim layer thing. It always looks atrocious.

  13. Rob Cubbon, on March 24th, 2008 at 12:26 pm, said:

    Hi Bray, I’m sorry I’ve got limited experience with GIMP. I’m sure you should be able to add the Noise and Motion Blur filters. GIMP maybe doesn’t have layer styles like Photoshop, but are you able to somehow darken the outside and lighten the inside by modifying selections? Good luck, anyway! :)

  14. Multimediedesigner, on April 13th, 2008 at 7:30 pm, said:

    Damn those buttons looks nice.

    Loves your tutorials Rob…

  15. Rob Cubbon, on April 20th, 2008 at 12:55 pm, said:

    Thank you, Multimediedesigner :)

  16. ボタン・バッジいろいろ - DesignWalker, on April 25th, 2008 at 7:18 am, said:

    [...] How to design a cool web 2.0 button in Illustrator and Photoshop [...]

  17. Eugene, on May 7th, 2008 at 12:21 pm, said:

    Very nice example. But I’ve just try that in Corel Draw 12. Thank you!

  18. Rob Cubbon, on May 9th, 2008 at 9:37 am, said:

    Thank you, Eugene. Good to hear it works in Corel Draw.

  19. Zoltan, on May 9th, 2008 at 11:53 pm, said:

    Thanks! Very nice!

  20. Jon, on May 17th, 2008 at 10:22 am, said:

    Awesome stuff. And some more good news for cheapskates: I’ve just managed to get it to work in Photoshop Elements 5, using a white-to-transparent gradient instead of the opacity mask.

    Oddly, the trickiest part was creating the curve in step 3; the solution was to intersect an elliptical marquee with a circular one and then smooth out the corners.

    Cheers for the tip, Rob – nice one.

  21. Rob Cubbon, on May 19th, 2008 at 7:49 pm, said:

    Hi Jon. That’s great news. I love to hear how these techniques work in platforms other that CS3. I know a lot of people use Elements, Gimp and Xara, etc. and they work very well. I’ve used the white to transparent gradient before in Photoshop to do the shiny bit many times! Thank you!

    Thank you, Zoltan, you’re very welcome! :)

  22. Sajt, on June 3rd, 2008 at 7:52 am, said:

    Hi! I have seen a lot of Corel draw and photoshop tutorials, but I do not remember finding one that is so descriptive and easy to follow. I am gonna try it out with my next project. Thanks for sharing.

  23. tedd62, on June 3rd, 2008 at 10:31 am, said:

    merci bcp pr les explication
    thanks

  24. Rob Cubbon, on June 3rd, 2008 at 10:52 am, said:

    Hi Sajt! I’m glad you found it descriptive and easy to follow. Best of luck when you try it with your next project.

    Bonjour, tedd62. De rien!

  25. Wordpress Hosting, on June 6th, 2008 at 2:37 am, said:

    im addicted to web 2.0!! Can’t get enough

  26. Hostmonster, on June 9th, 2008 at 4:15 pm, said:

    these are some spiffy icons

  27. talyp, on June 16th, 2008 at 10:31 am, said:

    Thanks, this is what I was looking for.
    Thanks you very much again.

  28. outsource web design, on June 22nd, 2008 at 11:33 am, said:

    the tutorial is nice , but you have not mentioned which version of photoshop illustrator is in use . it is important to match the steps you are going through .

  29. Rob van der Hoek The Netherlands, on June 25th, 2008 at 7:40 pm, said:

    Thank you Rob!
    I have managed to make a very nice shiny button with your help!

  30. Rob Cubbon, on June 27th, 2008 at 5:35 pm, said:

    @Admitting it is the first step, Wordpress Hosting
    @talyp, you’re welcome, you’re welcome
    @outsource web design. This tutorial was done while I had CS2. I now have CS3 and it’s no different. I can’t remember which version of Illustrator the Make Transparency Mask option came in or the Transparency palette (I think about 7 or 8). That would be the only problem you’d have with an old version. What version do you have?
    @Rob van der Hoek from The Netherlands. Well done, I’m glad you found it helpful.

  31. Bayan, on July 10th, 2008 at 5:00 am, said:

    Thanks. The button would be good in site application, I think.

  32. daytona beach, on July 10th, 2008 at 9:25 pm, said:

    these pointers have helped me out quite a bit with my new real estate site. i’m going for that web 2.0 look. thanks for the illustrations and how to.

  33. Rob Cubbon, on July 11th, 2008 at 2:14 am, said:

    Glad it’s been of help to you guys, Bayan and daytona beach. Let us know if you have any of the results of your efforts online.

  34. Aaron, on July 21st, 2008 at 5:00 am, said:

    Nice.

    I already knew the opacity mask trick but the brushed steel with the motion blur was a good idea (have always done this with a rendered fibers layer composite in the past).

    Just one thing though – if you’re going to use drop shadow this is a pixel based effect (as far as I know). I would opt for using a mask with a gradient wipe instead so everything will scale nicely (that’s if you’re doing it in Illustrator rather than Photoshop).

  35. Rob Cubbon, on July 21st, 2008 at 11:08 am, said:

    Yes, the drop shadows in Illustrator are made with bitmaps rather than vectors. To do a vector drop shadow I use the Blend tool in Illustrator. Thanks for the comment.

  36. Testii, on August 9th, 2008 at 5:24 pm, said:

    Nice Button. Thanks.

  37. steve, on August 22nd, 2008 at 10:10 am, said:

    nine nice nice!!! teach me more…

  38. Andy, on September 23rd, 2008 at 11:49 am, said:

    Thanks for sharing, great tutorial of course.

  39. Rob Cubbon, on September 24th, 2008 at 10:17 am, said:

    Hello Testii, steve, and Andy, I’m glad you all liked the tutorial. More to come, of course. Thanks for the comments!

  40. SJL Web Design, on October 7th, 2008 at 5:02 pm, said:

    Thanks for the awesome tutorial, nicely explained, was easy to follow and the buttons look great.

  41. Mr.K, on October 17th, 2008 at 3:06 pm, said:

    Thx Rob!

    Very nice and clear tutorial!
    quite helpfull :)

  42. mr. m, on October 17th, 2008 at 9:35 pm, said:

    Very nice.

    How about a rollover version of this?

  43. keo, on October 22nd, 2008 at 5:29 am, said:

    Great post m8, looking forward to more posts like this, so i bookmarked you ;)

    keos last blog post..Link feed – submit your blog to get better page rank !

  44. Rob Cubbon, on October 25th, 2008 at 6:49 pm, said:

    Thank you, SJL, Mr K, mr m and keo! Keep on coming back for more. Maybe I’ll do a rollover!

  45. SEO Co, on December 15th, 2008 at 11:58 am, said:

    Nice tutorial Rob! Very neatly explained, maybe rollovers would be an interesting post?

  46. Andy, on December 31st, 2008 at 2:21 pm, said:

    Nice tut. Added bro :)

  47. sherene, on January 9th, 2009 at 8:14 am, said:

    wow….nice button…learn something new here…tats great!! keep it on

  48. kiran, on February 8th, 2009 at 2:51 pm, said:

    Very useful tutorial.Thanks

  49. Mani, on February 11th, 2009 at 11:07 am, said:

    Cool buttons. This tutorial can help many new bees to learn and design glossy 2.0 style buttons at there own.

  50. Rob Cubbon, on February 22nd, 2009 at 1:12 pm, said:

    SEO Co, yes, I should do something about rollovers.

    Hello Andy, thanks for adding

    Hi sherene, glad you like the button designs.

    Hello Mani, hope the bees learn! Thanks!

  51. marc andrew, on May 9th, 2009 at 2:31 pm, said:

    They have done really wonderful work here

  52. Sikis, on June 4th, 2009 at 1:25 pm, said:

    Great buttons, I will be using these.

  53. sven, on June 23rd, 2009 at 6:08 pm, said:

    web 2.0 buttons ?! do you know what web 2.0 is? hint… it has nothing to do with design or visual properties whatsoever… so there cannot be any web 2.0 buttons.

  54. Rob Cubbon, on June 25th, 2009 at 5:36 pm, said:

    The concept of web 2.0 design has been with us for ages. You can go elsewhere on the internet to seek to re-define definitions in a living language – hint: give up!

  55. Henry Gilbert, on July 16th, 2009 at 3:07 pm, said:

    I really like this tutorial. Easy and simple to follow. I always struggle with Web 2.0 anything. Specially the buttons.

  56. Rob Cubbon, on July 18th, 2009 at 1:58 pm, said:

    Thanks, Henry, I appreciate the comment. I’m glad you found the Web 2.0 tutorial helpful.

  57. Marco, on August 10th, 2009 at 9:58 pm, said:

    Excellent! You explained the concepts rather than listing lots of parameters… which probably wouldn’t work on a different size or shape. Thanks Rob!

  58. Rob Cubbon, on August 22nd, 2009 at 1:33 pm, said:

    No problem, Marco, this has proved to be one of my most popular posts. Making 3d buttons is such a staple of the web designer’s world!

  59. SEO Manchester, on December 30th, 2009 at 7:36 pm, said:

    Nice. I like.

  60. Clasamente Fotbal, on January 20th, 2010 at 8:15 am, said:

    Well worth the read. Thanks for sharing this information. I got a chance to know about this.

  61. Web Design, on February 27th, 2010 at 5:00 pm, said:

    These are all cool ideas for buttons. Thanks a lot for writing about this because I am into web design and this is very useful for me.

  62. Borge, on March 10th, 2010 at 5:03 am, said:

    Thanks for this nice tutorial dude, love it awesome. And now I know.

Leave a Reply