How to Create an Animated Banner

With GIMP, creating an animated banner just takes a few clicks of the mouse.

Creating an animated banner is a simple task using the GNU Image Manipulation Program, a free image-editing software available for Mac and PC. Being comfortable with image-editing software helps but isn't necessary. GIMP provides a simple way to create animations. As an example, we will create a banner with simple animated text.

Difficulty:

Moderately Easy

Instructions

Things You'll Need

• GIMP image-editing software

Creating Animated Text in GIMP

1. Open GIMP, click the File menu and select "New." In the "Create a New Image" window, select an image size appropriate for the banner you would like to create. For example, a width of 750 pixels and a height of 80 pixels.

2. Click the Layers palette and select the "Background" layer. The layer should have defaulted to a flat white. If it didn't, use the Fill tool in the tools palette to fill the background with white. In the Layers palette, duplicate the background layer two times.

3. Select the Type tool in the tools palette. Set the size in the Type tool option to 40 and make sure that the type color is black. Click inside the image with the Type tool to open the type window. Type in "Hello" in the window. Move the type box containing "Hello" to approximately the center of your image.

4. Select the layer for "Hello" in the Layers palette and duplicate it. In the "Hello" copy, double click in the text box to open the type window. Change "Hello" to "World." You may need to adjust the size of the text box to show all of "World."

5. Move the "Hello" layer above your first copy of the white background. Click on the Layers menu and select "Merge Down." This will combine "Hello" with the background copy.

6. Move the "World" layer above your first copy of the white background. Click on the Layers menu and select "Merge Down." This will combine "World" with the background copy. You should now have three layers. The bottom layer should be a blank white background. The first layer above that should be the combined "Hello" layer. The top layer should be the combined "World" layer.

7. Double click on the bottom background layer to rename it. Rename the layer "Frame 1 (1000ms)" and press enter to save the name change. Do the same with the remaining layers, naming the middle layer "Frame 2 (1000ms)" and the top layer "Frame 3 (1000ms)." The most important part of this step is the "(1000ms)." This tells GIMP how long the layer should be displayed when it makes an animation. We are telling GIMP to display each layer for 1,000 milliseconds or 1 second. Naming them Frame 1-3 is just for us. You can adjust each layer individually in GIMP, changing the length of time each frame of the animation will be displayed.

8. Click the Filters menu and then the Animation submenu. Select "Playback." This opens a window showing the blank white background layer. Here, we will test our animation to make sure the settings look right. Click "Play." Each of the layers should display for one second. The animation should show blank white, then the word "Hello," then the word "World." Close the Playback window.

9. Click the File menu and select "Save As." In the Save As window, call this image "helloworld", choose a folder to save it to, and click "Select File Type." Select the GIF image file type. A window pops up. Select "Save as Animation and Convert to Indexed" using default settings. Click the Export button. Leave the default settings in the next window and click "Save."

10. Navigate to where you saved "helloworld.gif" and open the file in your preferred Web browser. The file should play the same as it did when you tested it in Playback.

Tips & Warnings

• This is just a simple example using text. Animations in GIMP can be made using images with more or less the same process. All you need to do is create each frame of the animation as a separate layer in your image and define the duration of that frame in milliseconds for GIMP, then save it as a GIF. If you use images for your animation, it is best to use the Optimize (for GIF) tool under the Animations submenu of the Filters Menu for the best image quality.

References

• GIMP: Simple Animations