By Charity Beck, UNT Central Web Support
This article is going to
demonstrate the process of creating a 3D button in Macromedia Fireworks
MX. To get the most of this article you will need basic knowledge of
Fireworks and have basic image editing skills.
To begin, open Fireworks and create a new file 500 x 500 pixels. The
finished image will only be 60 x 60, but having a larger canvas will
give you more development room. You may always trim the canvas to fit
the finished graphic. The finished product will look like this:
(Ex. 1 )
We need 2 circles with gradient fills and a crescent. You will begin
by drawing the background circle. From the Tools pallet select the
Ellipse Tool:
(Ex. 2 )
You need a circle 60 x 60 pixels. You may constrain the proportions
of the circle you are drawing by holding down the shift key as you draw
the circle. To get the dimensions accurate (height 60 pixels, and width
60 pixels) you may use the Property Inspector to tweak the dimensions.
(Ex. 3 )
Change the fill color to the "Linear" gradient. The stroke properties
need to be changed to 1 pixel soft and choose a medium gray for the
color. The property inspector should resemble this:
(Ex. 5 )
We have set the gradient type, and now we need to modify the colors
of the gradient. From the fill category pull down menu select "Fill
Options". A new dialog box opens. Click on the "Edit" button to modify
the color properties of the gradient.
(Ex. 6 )
From the "Tools" pallet select the pointer tool. Click on the first
color handle, labeled 1 from example. 6 above, to choose a new color.
The color swatch panel opens and you will choose a medium gray I used
#999999. Click on the second color handle and choose white. Your circle
should be similar to Ex. 7.
(Ex. 7 )
The direction of the gradient needs to be vertical. To change the
direction of the gradient click on the gradient's anchor, and move it to
the top of the circle. The gradient handle needs to be at the bottom of
the circle. See example 8 and 9 below..
(Ex. 8)
(Ex.
9)
That's it for the background circle.
To create the second circle copy and paste the circle you just
created. Change the dimensions of the new circle to 50 x 50 pixels.
(Ex. 10)
From the fill category pull down menu select "Radial" as the fill and
gradient type. Edit the gradient and choose white for the first color
handle, and a vibrant color for the second. #0033FF was used in this
lesson.
(Ex. 11)
The stroke color and weight will stay the same 1 pixel soft in a
medium gray
The properties of the new circle will look similar to example 12.
(Ex. 12)
The circles need to be centered to each other. One of the quickest
way to accurately center objects on the canvas is to utilize the "Align"
panel. From the "Window" menu select "Align". A new panel should appear
similar to example 13.
(Ex. 13)
For the desired result, make sure that the "To Canvas:" button is NOT
depressed. Select both of the circles on the canvas, and click on the
"Align horizontal center" and "Align vertical. center" buttons.
(Ex. 14)
The direction of the gradient needs to be similar to example 15.
(Ex. 15)
Now for the white crescent. that gives the button that extra touch. I
use the ellipse tool to create a horizontal oval with the dimensions of
40 X 20 on an empty part of the canvas. I used a solid red as the fill
color just so I can see it better. After the oval is modified to make a
crescent. the color may be changed to white. There will not be a stroke
on this oval, so you may turn the stroke fill off.
(Ex. 16)
The best way to morph this oval into a crescent. is by using the "Subselection"
tool. (Editorial comment: I did the dance of joy when I figured out I
could modify the anchor points individually by using the "Subselection"
tool) Click on the "Subselection" tool in the "Tools" panel to select
it.
(Ex. 17)
Click on the bottom most anchor point to select it and move it up 10
pixels. (TIP: by holding your shift key on your keyboard and using the
arrow keys you move selected objects 10 pixels at a time.) This should
result in example 18.
(Ex. 18)
To sharpen the corners to make the crescent. you will use the
Subselection tool to edit the right and left anchor points of the oval.
This will be a bit of trial and error. Following example 19 and 20 might
help.
(Ex. 19 )
(Ex. 20)
The bottom center anchor point may need to be adjusted further up by
3 or 4 pixels. The final dimensions of the crescent. should be 30 X 10.
Change the fill color to solid and white. The final properties of the
crescent. should look like example 21.
Select the "Pointer" tool in the "Tools" panel and select the
crescent. and move it to the near top of the button. It should be
similar to example 21.
(Ex. 21)
That's all there is to it! You may export this image as a individual
graphic or add it to some other design element such as example 22.
(Ex. 22)
I'll be glad to take any questions or comments:
cbeck@unt.edu
