Part I: The Ball a star

  1. Create a new image. 500x500 is a good size. You can always change this later if you want to. A white canvas is fine.
  2. If the Tools window is not open, go to the Window menu and choose Tools.
  3. Find the shape tool in the Tool panel. (It may be set to Rectangle, Rounded Rectangle, Ellipse or Polygon.) Hold down your mouse button while pointing to it and select Ellipse.
  4. Draw a circle with the shape tool (hold down the shift key to make it a perfect circle, rather than an oval).
  5. From the Properties window, change the Fill from Solid to Radial Gradient
  6. Edit the gradient by clicking on the color box next to the paint bucket. Choose white for the left bucket, and any other color for the right box.
  7. Modify the gradient's position. Click on the paint bucket tool to bring up the Gradient Modifying handles.
  8. Adjust the Circle and Square handles so they match the image shown here. This makes it seem as though light is coming from above and to the left.
  9. Add a drop shadow. First, clicking on the box with the "+" to the right of Filters

    From the menu, select Shadow and Blur > Drop Shadow.
  10. Go to the File menu, and Save your graphic. This will be your PNG file. You can open your PNG file again in Fireworks for further editing.
  11. Go to File menu, and choose Export Wizard. After answering a couple of questions from the Export Wizard, you can choose a .gif or .jpg format for your sphere.

Notice that in this exercise you have been working with "Vectors" (as opposed to "Bitmaps"). If you need to copy a Vector Object, like the sphere above, and paste it into a new document, you select the object, Copy it,and then Paste it into the new document.

How to do transparency

It is often times desirable to set a certain color in a graphic to be transparent, so the color of the object behind it, or the background color, can show through. Remember though, that the only graphic format that supports transparency is the GIF format! One way to set transparency is in the Preview Window (File --> Export Wizard): Click continue, then Continue again and then Exit. Now your screen is split into two horizontal areas. One is .jpg format, and the other is .gif. Only .gif supports transparent background. Here are the steps to set the background color of a graphic to be transparent:
In the Export Wizard window, you click on the .GIF format figure. Then, using the add-eyedropper tool click-select the color that you want to be transparent (any pixel with this color will do). Transparent areas will be shown, in the Preview window, filled with a gray/white checkerboard.  

Introduction Syllabus Assignments Documentation Project

© Computer Science 110 Staff
Date Created: June 2001
Date Modified: February 2007