One of things I promised myself last fall was that I would take a bit more time and start putting up tutorials for you but I’ve been so busy with projects since October that I simply haven’t had a lot of spare time.

This week is different, I’ve just put up a new YouTube video tutorial showing how to create an Apple / Aqua style button in Adobe Fireworks using just three circles.

To help you follow along, here are the steps in non video format …

Create a new document

I choose to do mine as a 200 x 200 pixel document but you can select any size you’d like.

Create a new circle

Add a circle to your document and size it to be the same size as your working area, located at 0,0. This puts it in the top corner.

Create the top glow

Copy (Apple-C) the base circle and past it (Apple-V) to create a second circle. Transform it (Apple-T) to be half the size and push it up near the top of your base circle. 

Create a linear gradient, white to white with an opacity of 100% to 10%. Then, add a gaussian blur to the circle to make it blend.

Create the bottom shadow

Copy (Apple-C) the top glow and past it (Apple-V) to create a third circle. Transform it (Apple-T) to be half the size and push it to be bottom of your main circle. Edit the  linear gradient, to make it black to black adjusting as you see fit.

Beveling the main circle

To make the main circle appear bevelled, select it and add an inside glow, adjusting the settings to suit your visual needs. 

When you’re done what you should have is a pretty nifty and easy glowing button effect for graphics on your website, I’ve included the YouTube video here for you if you’d like to follow along. Please don’t forget to comment or link to other cool tutorials if you’ve enjoyed this one.