Creating an animated GIF in Adobe Fireworks CS4

If you've ever worked with images, you've probably wondered how to create an animated GIF. Although it may seem difficult, the truth is that creating GIFs is easy when using the right tools. In this tutorial, we'll look at how to create an animated GIF using Adobe Fireworks CS4.

First, open Fireworks. Click on File and Open, then navigate to the folder where you've saved the images you want to use in your animation. After you open them, you need to check their sizes. To do this, click Modify then Canvas and Image Size.



A dialogue box will pop up, showing the size of the image and allowing you to change it. For this demonstration, the pictures I used were too big, so I changed the size to be 200 px wide and 133 px high.



Now you need to open your other picture files and make sure their image sizes are the same. If they haven't already been created to be the same size or resized, then change their sizes to be same width or height. You should be constraining proportions and keeping the objects to scale, so if one of the other values is different after you enter a new value, you can use the crop tool in the Tools panel until you have the exact same size as the first picture. It's very important for all your pictures to be the same size. If you need to crop, select the tool, drag your selection, and hit Enter.



Create a new document by clicking File then New. When the dialogue box appears, make sure the background is set to transparent and enter new values in the width and height boxes. Make sure the canvas size is the same size as your pictures.



At this point, you want to show the States window (called Frames in earlier versions of Fireworks). States are used similarly to layers, though instead of being on top of each other, they're used for images that are to be shown in ordered succession. In order to show the States window, click Window and then States.



Switch over to the tab of your first image. Select it by clicking Select and then All. Next, copy it and switch over to your new document, then paste the image. This will put the image in the first state (or frame) of your document. At this point, you can label your states to tell them apart. To do this, double click on the name (like State 1) and enter a new name.



Now add a new state. You can do this by navigating to the States panel on the right side of the workspace and clicking the notepad icon on the lower right.



Copy and paste your second picture into the document, and rename the state. You can do this as many times as you need to, depending on how many pictures you have. Once you're finished copying and pasting, you can change the speed of the animation. The default is 7/100, where 100/100 is one second. To change the value, double click on the 7 next to the State name and enter a new value.



Here, you can customize some other options if desired. For example, you might not want your animation to keep playing continuously, or you might want the images to gradually fade into the next. To change the way the GIF behaves, look at the bottom of the States panel and click the icons to explore your options.



Clicking on the arrow will give you the option of changing how many times the GIF plays. I want to leave mine on a continuous loop, so I keep the default.



The first icon controls onion skin options. Using onion skin means that your images will gradually fade into the next image instead of switching over. This provides a smoother transition.



At any time during the process, you can preview your animation by clicking the play button at the bottom right of the workspace, just above the properties panel.



Now that you've chosen your settings, it's time to save. Navigate to the Optimize panel at the top of the right side of the workspace and click the drop down for file extension. Choose Animated GIF.



Next, click File then Export. Give it a name and navigate to the folder you want to save it in. You can view your GIF by going to the folder it's saved in and right clicking, then moving down to Open with and choosing Internet Explorer.



And that's it! Now that you see how simple it is to create animated GIFs, you can make icons and other moving images quickly and easily.

About CODANK Web Design

CODANK is a top rated Web Design and Internet Marketing firm located in Charlotte, NC. We are dedicated to providing the highest quality, cost effective custom software development services, delivering a broad range of business consulting and outsourcing services.

For more information, visit us at www.codank.com