How to Create an Animated GIF in Fireworks

What to Know

  • Create an illustration and duplicate it. Make changes to one, convert both into symbols, create a second state. Preview the animation.
  • Change the duration time of both states, save the file as an animated GIF, and view it in a web browser.

In this tutorial, you will learn to use Fireworks CS6 to create an animated GIF of a turkey with tail feathers that change color. Although Fireworks CS6 is used in this tutorial, you should be able to follow along using any recent version of Fireworks or even Photoshop.

How to Make a Turkey Animated GIF in Fireworks

It's important to note that Adobe no longer offers Fireworks CC as a part of the Creative Cloud. If you are looking for Fireworks it can be found in the Find Additional Apps section of the Creative Cloud. When Adobe announces that it will no longer support or update applications, you can assume it is only a matter of time before the application disappears.

Sandra Trainor

  1. Create a New Document

    First, you will create a new document by choosing File > New. Make the width and height 400 x 400 pixels, and the resolution of 72 pixels per inch. Choose white for the canvas color, and click OK.

    Next, choose File > Save, name the file turkey with a png extension, choose where you want to save it, and click Save.

    Create a New Document

    Sandra Trainor

  2. Draw a Circle

    In the Tools panel click on the Stroke color box and choose black, then on the Fill color box and choose a brown swatch or type in the Hex number value field, #8C4600.

    In the Properties panel, make the stroke width 2 pixels. Then choose the Ellipse tool in the Tools panel, which can be found by clicking on the small arrow next to the Rectangle tool or other visible shape tools. While holding down the shift key, click and drag to create a large circle. (Using the shift assures that the circle will be perfectly round.)

    Draw a Circle

    Sandra Trainor

  3. Draw Another Circle

    Again, hold down the shift key as you draw another circle, with the intention that this circle will be smaller than the last.

    With the Pointer tool, click and drag the small circle into place. You want it to overlap the top of the large circle, as shown.

    Draw Another Circle

    Sandra Trainor

  4. Draw a Rounded Rectangle

    With the Rounded Rectangle tool, draw a rectangle. With the Pointer tool, move it into place. You want it to be centered and slightly overlap the bottom of the small circle.

    Draw a Rounded Rectangle

    Sandra Trainor

  5. Combine Paths

    Hold down the shift key as you click on the small circle then the rounded rectangle. This will select both shapes. Then choose Modify, Combine Paths > Union.

    Combine Paths

    Sandra Trainor

  6. Change Color

    In the Tools panel, click on the Fill box and choose a cream swatch, or type #FFCC99 in the Hex value field, then press return.

    Change Color

    Sandra Trainor

  7. Make the Eyes

    You could draw two small circles to make the eyes, but instead, use the Type tool for this. Click on the Type tool in the Tools panel, then on the canvas. In the Property inspector, choose Arial Regular for the font, make the size 72, and change the color to black. Hold down the Alt or Options key as you press the key holding the number 8, which will make a bullet. Then, press the space bar before making another bullet.

    Make the Eyes

    Sandra Trainor

  8. Make the Beak

    In the Tools panel, click on the Polygon shape tool. In the Properties panel, choose an orange swatch for the fill or type #FF9933 in the Hex value field. Also in the Properties panel, make the stroke black with a width of 1.

    Next, choose Window > Auto Shape Properties. Click on the polygon shape and indicate that you want both the points and sides to be 3 and the radius 180 degrees. To make the triangle smaller, type 20 in the Outer Radius value field. The number for this depends on how large the triangle was, to begin with. Then press return.

    With the Pointer tool, click on the triangle and drag it to where you think it should sit for the beak.

    Make the Beak

    Sandra Trainor

  9. Make the Snood

    The red thing that hangs from a turkey's beak is called a Snood. To make one, you'll use the Pen tool.

    After selecting the Pen tool in the Tools panel, click on the Fill box and choose a red swatch, or type #FF0000 in the Hex value field, then press return.

    With the Pen tool, click to create points that form a path, and sometimes click and drag to create a rounded path. When the last point connects with the first, you will have formed a shape that looks like a turkey's snood.

    Make the Snood

    Sandra Trainor

  10. Make the Legs

    You can set the Fill color to the same Orange as the beak by clicking on the Fill box then on the beak. With the Pen tool selected, make the stroke color black and set the stroke width to 2 in the Properties panel.

    Next, use the Pen tool to create points that form a shape that resembles a turkey's leg. With the shape selected, choose Edit > Duplicate. Then choose Modify > Transform > Flip Horizontal. With the Pointer tool, position the legs where they look best.

    Make the Legs

    Sandra Trainor

  11. Reduce Size

    Choose Select > Select All. Then click on the Scale tool in the Tools panel. A bounding box will appear with​ handles that can be moved inward or outward. Click on a corner handle and move it inward, making the whole smaller, then press return.

    With all of your shapes still selected, use the Pointer tool to move the turkey into place. You want it centered low on the canvas.

    Reduce Size

    Sandra Trainor

  12. Make the Tail Feathers

    With the Ellipse tool, click and drag to form a long oval. Then choose Edit > Duplicate. You'll duplicate the oval again and again until you have a total of five ovals.

    Make the Tail Feathers

    Sandra Trainor

  13. Change the Color

    With one of the ovals selected, click on the Fill box and choose a different color. Do this with three more ovals, choosing a different color for each.

    Change the Color

    Sandra Trainor

  14. Move Ovals

    With the Pointer tool, click and drag over the five ovals to select them all. Then choose Modify > Arrange > Send to Back. This will cause the tail feathers to fall behind the turkey when you move them into place.

    Click away from the ovals to deselect them, then click on one oval at a time and drag them separately to where they will sit next to each other and partially behind the turkey.

    Using Smart Guides can help to evenly position the ovals that are opposite each other. If you don't see the smart guides at work, choose View > Smart Guides > Show Smart Guides.

    Move Ovals

    Sandra Trainor

  15. Rotate Ovals

    You'll want to rotate the ovals and reposition them. To do so, select one and choose Modify > Transform > Free Transform. Then click and drag your cursor just outside the bounding box in order to slightly rotate the oval. With the Pointer tool, position the oval to where you think it looks best.

    Rotate the remaining ovals in the same way, and position them into place; distributing them evenly.

    Rotate Ovals

    Sandra Trainor

  16. Save and Save As

    Looking at your image, you'll see that the turkey is too low on the canvas, so choose Select > Select All, then use the Pointer tool to place the turkey in the center of the canvas. When you're happy with how it looks, choose File > Save.

    Next, click on a tail feather to select it, then on the Fill box and choose a different color. Do this for each tail feather, then choose File > Save As. Rename the file, turkey2 with a png extension, and click Save.

    Save and Save As

    Sandra Trainor

  17. Convert to Symbol

    Choose File > Open, navigate to your turkey.png file and click Open. Click on on the turkey.png tab at the top, and choose Select > Select All. You'll then choose Modify > Convert > Convert to Symbol. Name it symbol 1, choose Graphic for the Type, then click OK.

    Click on the turkey2.png tab and do the same, only you'll name this one symbol 2.

    Convert to Symbol

    Sandra Trainor

  18. Create a New State

    Click back on the turkey.png tab. If your States panel isn't visible, you can choose Window > States. At the bottom of the States panel, click on the New Duplicate States button.

    When you click on the first state to select it, you'll see that it holds a symbol. When you click on the second state, you'll see that it's empty. To add a symbol to this empty state, Choose File > Import > navigate to your turkey2.png file, click Open, then Open again. Then click on the upper right corner of the canvas to place the file in the correct position. Now, when you click between the first and second states, you'll see that both hold images. You can also press the Play/Stop button at the bottom of the window to preview the animation.

    If you don't like the speed of the animation, you can double-click on the numbers to the right of each state to make adjustments. The higher the number the longer the duration time.

    Create a New State

    Sandra Trainor

  19. Save Animated GIF

    Finally, choose File > Save As, rename the file, choose Animated GIF (*.gif), then click Save.

    To open and play the Animation GIF in your browser, launch your browser and choose File > Open or Open File. Navigate to your saved Animated GIF file, choose it, click Open, and enjoy the fruits of your labor!

    Save Animated GIF

    Sandra Trainor

Was this page helpful?