Rounded Corners Activity
1. Launch Fireworks 8 and create a new file with a canvas size of 400 x 400.
2. Save the file to your Fireworks folder as “rounded_corners.png”.
3. Save after each step. Save early, save often!
4. Import the picture “cat_face.jpg” from the V drive by doing the
following:
a. Click the File menu and then select Import…
b. Using the Look in drop down box, browse to the Web Design
Outbox folder on the V drive.
c. Select the cat_face.jpg image and click Open.
d. Move the mouse to the upper left corner of the canvas and click.
5. Create a rounded rectangle over the cat by doing the following:
a. Click and hold the Rectangle tool. Select the Rounded Rectangle option.
b. Draw a rectangle around the majority of the picture. If your rectangle is not balanced around
the image, use your arrow keys on the keyboard to move it until it is balanced.
c. On the Properties panel, set the fill color to none and the line color to none. The object will be
invisible.
6. Place the image inside your rectangle by doing the following:
a. Click the Pointer tool
b. Select the image of the cat (use the layers panel).
c. Click the Edit menu and choose cut; the picture of the cat will disappear.
d. Select the rounded rectangle object (use the layers panel).
e. Click the Edit menu and choose Paste Inside. The image should be placed inside the
rectangle. It can be moved inside the rectangle by grabbing the clover shaped symbol that is in
the middle of the image when selected.
7. Put the finishing touches on by doing the following:
a. Click somewhere on the white canvas area.
b. On the Properties panel click the “Fit Canvas” button.
c. On the Properties panel click the color button and select the transparent option (white box with
red slash) to make the canvas transparent.
8. Export the image into a gif format by doing the following:
a. Click the file menu and click Image Preview…
b. In the Format drop down box, choose GIF.
c. Change the transparency setting to “Index Transparency”.
d. Click the Export… button.
e. Verify that the file is being exported to your Fireworks folder and contains the name
“rounded_corners.gif”.
f. Click Export.
9. You’re finished! Submit both files to the V drive for grading.