Benchmarks Online

Skip Navigation Links


Page One

Campus Computing News

Holiday Hours

SPAM Blocking Measures Instituted on UNT Mailhosts

Whitelisting BULK: Mail Using GroupWise Rules

Your GroupWise Archive

An Online Campus Directory

JAWS 5.0 has arrived

New Equipment in the Adaptive Lab to Expand Learning Opportunities

SPSS 12.0 is Available Now from Academic Computing Services

Today's Cartoon

RSS Matters

The Network Connection

Link of the Month

WWW@UNT.EDU

Short Courses

IRC News

Staff Activities

Subscribe to Benchmarks Online
    

WWW@UNT.EDU

 

Smoke & Mirrors

By Charity Beck, UNT Central Web Support

Using Fireworks to create a 3D button

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:

image of the 3D finished button (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:

screen shot of 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.

screen shot of property inspector (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:

screen shot of property inspector (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.

screen shot of gradient editor (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.

screen shot of gradient fill(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..

screen shot of gradient fill (Ex. 8)screen shot of gradient fill(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.

screen shot of copied and pasted circles (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.

screen shot of fill category pull down menu (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.

Screen shot of properties menu (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.

screen shot of the window menu (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.

Screen shot of button(Ex. 14)

The direction of the gradient needs to be similar to example 15.

Screen shot of button (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.

horizontal oval(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.

subselection tool (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.

screen shot of crescent (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.

screen shot of crescent (Ex. 19 )

screen shot of crescent(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.

screen shot of properties menu

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.

sample button (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.

"radio" graphic with "buttons" (Ex. 22)

 

I'll be glad to take any questions or comments: cbeck@unt.edu