Internet Cross Logo
Internet Cross your one stop web tutorial website
Search Internet Cross Shop:

Simple glass buttons in Fireworks

by Internet Cross
This tutorial teaches you how to create a simple glass button effect in fireworks in less than 60 seconds!
Firstly open a new file with a canvas size of 200 pixels by 200 pixels.
On that canvas draw a white circle, 70 pixels in diameter using the ellipse tool (Shortcut for ellipse tool: U).
We will use this circle to form a border around our button. Lets add a bevel and drop shadow to this circle. Click on the circle and go to the live effects section on the properties bar.
Use the following settings for our inner bevel:
And for our drop shadow, use:
Your circle should look like
Now lets create the colored center of our button, draw another circle, this time with a diameter of 62 pixels. We need to use a gradient fill for this circle, we'll use a couple of nice colors for the gradient, say blue and purple.
Now select our blue/purple circle and move the gradient scale tool around until you get a result similar to the below.
Lets create one last circle which will give our button the reflective appearance of glass. Create a circle with a 22 pixel diameter with a linear gradient fill. Both colours in the gradient should be white.
Now we need to alter the gradient on the white circle slightly, by altering the alpha transperency of one colour. Click on the box as indicated by the red circle below to alter the alpha of the finishing point of the gradient. Set the alpha to 0.
Use the gradient tool to change the direction of the gradient until you get something like:
Lower the overall alpha of our reflection circle to about 75%. I also added a white inner glow to the reflection circle (optional)
Now I just added a number for text, But you could write whatever you wanted.
You can add textures and glows to any of the 3 circles to add some more zing to the end product, go play with it.
[Page 1]
Visit our forums to discuss / post your problems.