UBB.Developers Forums Announcements Announcements U-Zine Articles August 2002 : Aqua Effect in Fireworks MX

Tutorial for: Fireworks MX
Created by: Bookie

My next set of tutorials are going to be tutorials on how to do advanced looking effects for interfaces, the entire set will consist of about 8 tutorials, each going over something different. This tutorial will look at creating a simple, but great looking aqua effect. This effect can be used for a variety of different things like interfaces or buttons.

Okay, so we can start out by starting up fireworks and creating a document with the settings in the image below.



Now create a circle about 160x160 in the center fo the canvas. You can use the numbers in the property bar to adjust sizes as seen in the picture below.



You can make sure the object is in the center fo the canvas by using the new align docker available in fireworks MX (window > align). Make sure the canvas icon is selected and click the align in center horizontal and vertical. This will come in very handy so it is best your remember it.



So now that we have the circle give it a stroke of 1 px black, and a linear fill from a dark color to a light color. In my example I used #8795A0 to #A9B9C5. Turn the fill from horizontal to vertical using the black pointer tool until it looks like the image below,



Next we are going to give it an aqua looking effect. Do this by cloning the current circle. (edit > clone) and in the property bar enter its width/height as 123x123px, and center it in the other circle.



Set the stroke to none, and edit the linear fill so it starts at white and goes to transparent. You can set the end color as transparent by clicking the black pointer thing above the linear fill and set the opacity to zero.



Now, change the fill handles so the linear fill only takes up the top of the circle.



Okay, so we have a semi-aqua looking thing... but to get the full aqua look we need to blur it a bit. Select the white gradient circle and add a gaussian blur (filters > blur > gaussian blur). You can adjust the blur until it looks like it is aqua like, in my example I used a gausian blur of 7.4.



Looks pretty good, but it could use some finishing adjustments, clone the white gradient object, and flip vertical (you can do that in the modify > tansform menu). In the info box set the height and width to 150. Then change the the white to transparent fill to black and transparent. Make sure the circle is centered and set the opacity to about 35%.



You now have an aqua looking circle. This effect can be applied to a number of different shapes, but when creating more complex shapes there is a much better method that I will demonstrate in my next tutorial.