How to design shiny web 2.0 buttons in Illustrator

How to design shiny web 2.0 buttons in Illustrator

You could do this in almost the same way in Photoshop but I have recently been following the mantra “If you can do it in Illustrator, do it in Illustrator” – to save on disc space if for no other reason.

First draw the circle of your button (I’m following the bottom line of blue buttons in the above picture).

Then copy (Cntl/Cmd -C), paste in front (Cntl/Cmd -F), apply a gradient (the default white-to-black gradient is the one you want, with an angel of 90º) and, lastly, squash it vertically upwards to about half the size (you may need the bounding box for this (Cntl/Cmd-Shift -B).

Now the gradient orb needs to fit inside the button so you need to apply a little perspective. To do this in Illustrator, get your Free Transform Tool (E) click on the top left hand corner, once clicked hold down and press Cntl/Cmd-Option-Shift and then drag towards the right.

You can hardly see the difference after doing the next stage but it’s essential- move the gradient orb down a touch.

Here’s the clever bit. With the both the blue button and the gradient orb selected go to your Transparency palette and select Make Opacity Mask (make sure both Clip and Invert Mask and all other options in the palette are unchecked.

Finally, go Effect > Stylize > Inner Glow, leave the default options of Screen Mode, the yellow colour and a 75% opacity, but play with the blur (these are 35 pixels) and click the Center radio button.

The advantage of this method is that you can then change the fill of the button and keep all the effects. Obviously, it works on all other possible shapes.

And then you can have fun experimenting with adding type to your buttons!

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

Related articles

This article was posted on Friday, June 8th, 2007 at 2:04 pm and is filed under Illustrator, Internet.
You can follow any responses to this article through the RSS 2.0 feed.

16 Responses to “How to design shiny web 2.0 buttons in Illustrator”

  1. Gabriel, on June 9th, 2007 at 3:33 pm, said:

    Wow! Thanks for this tutorial! I have been learning Illustrator for a while and what better way to test out what I’ve learned so far than to try this one out.

  2. Rob Cubbon, on June 10th, 2007 at 10:21 pm, said:

    Hope you like it, Gabriel. They’ll be more Illustrator stuff to come, as well!

  3. Gabriel, on June 11th, 2007 at 7:23 am, said:

    Yeah, I really do! Whohoo, I’m looking forward to more of your Illustrator tips, Rob.

  4. Michael, on August 20th, 2007 at 6:03 pm, said:

    If you haven’t yet, give Xara Xtreme a go. It’s been largely ignored because Illustrator is the reigning champion (and i do love me some Illustrator, don’t get me wrong), but in terms of streamlining things, it’s got the right idea. Try their drop-shadow tool, or transparancy. Or better yet, try their gradiant-tool, you’ll forever curse the one in AI after :D

    Why i’m posting this here though, one of the example vids on their website goes through the process of creating one of these, and it really is *very quick and easy.

    I hope Adobe pays attention, although I wouldn’t hold my breath. Apparantly Xara were the first with transparancy and anti-aliasing as well.

  5. Rob Cubbon, on August 21st, 2007 at 2:06 pm, said:

    Wow, I’ve just checked out the Xara Xtreme gallery. There’s some really great stuff there. I really should check it out and support open source software. Thanks for the tip, Michael.

  6. Joe Berry, on September 20th, 2007 at 9:50 am, said:

    I’ve been using Coral Xara packages for many years now and they have developed with leaps and bounds. Their interface is totally easy to pick up and the latest Xara Xtreme can do everything illustrator does and some more. I definately urge you, especially if from a design background to take it for a test drive. I think you will be pleasantly suprised.

  7. Rob Cubbon, on September 20th, 2007 at 2:30 pm, said:

    I promise to take it for a test drive. Not sure when though! Thanks for the recommendation.

  8. fairx, on December 15th, 2007 at 10:59 am, said:

    I’ve been using both Xara & Illustrator since 2000. And yet Xara manage to introduce transparency effect way better than illustrator.

    AI do have their own special characteristics though..

  9. Rob Cubbon, on December 26th, 2007 at 4:58 pm, said:

    :( Just realised I can’t do a Xara Xtreme test drive on a mac.

  10. Web Design New York, on January 11th, 2008 at 3:24 am, said:

    I been using Xara Xtreme and it works nice love it!!

  11. Rob Cubbon, on January 13th, 2008 at 11:44 am, said:

    Still waiting for the mac version!

  12. Best Web Design Company, on July 2nd, 2008 at 2:01 pm, said:

    We are also using Adobe Package. I think adobe is best for design.

  13. Rob Cubbon, on July 2nd, 2008 at 3:26 pm, said:

    I would say the Adobe Creative Suite Design Premium is the way to go. :)

  14. Khalil, on June 10th, 2009 at 10:34 pm, said:

    Hi Rob,

    I’ve been trying painfully hard to re-create your beautiful shiny web button (the circular one) using Fireworks CS4 but can’t for the life of me do it. I’m a complete novice and can’t seem to locate the transparency toolbar or whatever it is I need to follow your steps. Can you help me please?! Much appreciated.

  15. Rob Cubbon, on June 10th, 2009 at 11:01 pm, said:

    Khalil, this tutorial is written about Illustrator not Fireworks!

  16. Nuzhat Nehem, on June 11th, 2009 at 5:44 am, said:

    Great tips

Leave a Reply