How to Make GIF Animation

An animated GIF attracts attention to a website and is popular for advertisements and headers. To create it, you need a graphics program, such as Adobe ImageReady. Draw the individual frames and then animate them. Learn how to create an animated banner that encourages the viewer to click on it.

Things You'll Need

• Graphics program that handles GIF Animation, such as Adobe ImageReady

Instructions

Drawing

1. Choose New > File. You'll get the New dialog box. Enter a width of "500" and a height of "100." Click "OK" to display the document window.

2. Color the "Background" layer; in this case, red.

3. 

   Click "Type Tool," and click the center of the document window. The Text cursor appears. Type "Click Here." A new layer named "Click Here" appears in the Text palette.

4. Click "Move Tool," and center the text in the window. Right click the text layer and choose "Duplicate Layer" from the pop-up menu. Change the name of this new layer from "Click Here Copy" to "Click Here 2."

5. 

   Move the text of this new layer to the left side of the document window. If the previous "Click Here" layer is making things difficult to see, hide that layer by clicking off the eye from its "Visibility" icon.

6. Duplicate the "Click Here 2" layer. Change the name of this new layer from "Click Here 2 Copy" to "Click Here 3." Move the text of this new layer to the right side of the document window. Make all the text layers invisible by clicking off the eye from their "Visibility" icons.

Animating

1. Click the arrow circle in the upper right of the Animation window and choose "Make Frames from Layers." Three new frames appear in the animation window for 4 frames.

2. 

   Click on Frame 1 to select it and then on the arrow circle. Choose "Delete Frame" to delete the 1st frame. You now have 3 frames, numbered from 1 to 3.

3. 

   Click on Frame 1 to select it. Then click an eye into the "Visibility" icon of the "Click Here" layer.

4. 

   Click on Frame 2 to select it. Click off the "Visibility" icon from the previous "Click Here" layer. Finally, click an eye into the "Visibility" icon for the "Click Here 2" layer.

5. 

   Click on Frame 3 to select it. Click off the "Visibility" icon from the previous "Click Here 2" layer. Finally, click and eye into the "Visibility" icon for the "Click Here 3" layer.

6. Click on the "Delay Time" drop down for each frame to set the number of seconds each frame is displayed: Frame 1: 0.5; Frame 2: 0.2; and Frame 3: 0.2. Click "Play" in the Animation window to preview the animation.

Saving

1. Choose "Save Optimized As" from the File menu. A file dialog box appears.

2. Navigate to the folder in which to store the file. Enter a file name and click "OK." Your animation is saved as a GIF file. You can also save your current ImageReady source by choosing "Save" from the File menu and entering a source name.

3. 

   Through My Computer or Windows Explorer, double click the GIF file to open it and watch the animation.

Resources

• Read this Article in Spanish