Fireworks Auto Shapes are very useful but often overlooked vector tools. This tutorial demonstrates the effective manipulation of these creative tools. By the end of the tutorial, you will be able to create the logo on the left, and you will be more familiar with the creative application of Auto Shapes. The resulting image will be used in a soon-to-be-published watermark command tutorial. 

Follow along using Fireworks MX 2004, Fireworks 8, or Fireworks CS3. 

Overview

The tutorial is comprised of six chapters:

1. Creating the Doughnut Auto Shape
2. Creating the Star Auto Shape
   
3. Constructing the final shape
4. Finishing touches
5. Where to go from here
6. Recommended reading  

Let's look at each step in detail.

Creating the Doughnut Auto Shape

1. Let's start with a 100x100 blue canvas. Select the Doughnut Auto Shape tool from the Vector panel and draw a 70x70 object. Set its color to be #99FF00  Solid, and then position the object at (15,15).

Fireworks 8 and CS3 users have the option to numerically define Auto Shape properties in a dedicated panel. If you have FW 8 or CS3, you can skip the second and third step of the Doughnut chapter. To set up the Donut Auto Shape used in this tutorial, open the Auto Shape Properties panel (Window >> Auto Shape Properties) and copy the following settings:

 

This technique is also applicable for the Star Auto Shape discussed later in the tutorial. Using this method, you can skip steps 3-4 of the Star Auto Shape chapter.

2. Set the inner radius of the doughnut to be 25px wide. If you need to do this step manually, you might want to turn the rulers on and move the ruler origin to the doughnut center. (Click on the image below to zoom in.)

3. Click on one of the top "Alt/Opt-drag to segment" handles and  drag it clockwise to 90 degrees (three-o'clock position). To make this easier, you can place a horizontal guide right through the center of the doughnut.

We are done with the donut for now. Let's go on to create the star inside!

Creating the Star Auto Shape

1. Hide and lock the layer that contains the donut, and then create a new layer.

2. Select the Star Auto Shape tool from the Vector panel. Place your cursor in the top left corner of the outmost guides, carefully drag the cursor diagonally all the way to the bottom right corner of the outmost guides. See the image below for illustration (red dash shows the dragging pattern):

3. You might have noticed that some of the star's points don't touch the guides. This is okay, because we want an 8-point star and that will increase its dimensions to be just right. To create it, simply find the handle with the label Points:5 and drag it clockwise until the object becomes an 8-pointed star. Notice that now all the points rest perfectly on the inner and outer guides. 

4. Tweak the autoshape to suit your preferences, using its inner and outer Radius and Roundness tabs. I recommend moving the Radius 2 tab inward to decrease the inner radius of the star. I left the outer radius at its original value, but I changed the roundness of the point tips to be less sharp. I also increased the inner roundness slightly. After all that tweaking, my final star autoshape looked like this:

 Again, FW 8 and CS3 users can open the Auto Shape Properties panel (Window >> Auto Shape Properties) and simply enter the following values:

5. Unlock the donut layer and make it visible to superimpose it on the star object. If you have used the guides, the two shapes now match seamlessly. 

Now we  finished altering both the star and the donut autoshapes. On the next page, you will see how to construct the final composite shape .