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!
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.
Hope you like it, Gabriel. They’ll be more Illustrator stuff to come, as well!
Yeah, I really do! Whohoo, I’m looking forward to more of your Illustrator tips, Rob.
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
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.
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.
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.
I promise to take it for a test drive. Not sure when though! Thanks for the recommendation.
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..
I been using Xara Xtreme and it works nice love it!!
Still waiting for the mac version!
We are also using Adobe Package. I think adobe is best for design.
I would say the Adobe Creative Suite Design Premium is the way to go.
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.
Khalil, this tutorial is written about Illustrator not Fireworks!
Great tips
Thanks for this. I used it recently for a logo and it looks great!
Glad it was useful for you!