Create an Animated GIF Image with GIMP

Animated .gif images can be found all over the Internet. Used in buttons, links, icons, backgrounds, dividers, and Make a Banner With Paint Shop Pro, these eye-catching images can be anything from an excellent tool for personal expression to a downright nuisance. In this article article, we'll guide you through the basics of building your own animated .gif images from scratch using GIMP., a free image editor for Linux, Mac, and Windows. Just see Step 1 below to get started.

Steps

  1. Run GIMP, and create a new image using File->New. If you need to, read How to Install GIMP.
    • The size you select depends largely on your purpose. Make a Banner With Paint Shop Pro are generally between 60 and 120 pixels tall and 400 to 800 pixels wide. Different website software and banner exchange systems will list their own requirements. For buttons, the height is generally not more than 40 pixels, and the width is usually less than 300 pixels. Separators, accents, widgets, doodads, and thingamabobs that you want to build have no restriction except the question of how much drive space and bandwidth do you want to use up?
    • In this tutorial, we will select 200 pixels for width and 20 for height, then click OK. GIMP will give you a nice white little rectangle.
  2. Make sure the toolbox is visible and the Layers tool is available. Each Layer we create will be a 'frame' in the animation.
  3. Use the bucket tool to fill the background layer with black.
  4. Use Filters->Render->Pattern->Grid, unlock the Horizontal and Vertical values by clicking on the little chain symbol between them, and enter 3 for Horizontal width, 4 for Vertical width, 0 for Intersection, 22 for Horizontal Spacing, 18 for Vertical Spacing, 2 for Intersection Spacing, 1 for Horizontal Offset, 0 for Vertical Offset, and 6 for Intersection Offset. Select a dark red color for the Horizontal and Vertical grid lines, then click OK.
  5. Using the Layers tool, Right click on the Background layer and select Duplicate Layer. Now right click the layer named 'Background copy' and select Layer Properties to rename it to something simple like 'Frame 1'.
  6. Use the same method to duplicate the frame 16 times for a total of 16 frames plus the Background frame.
  7. This is a good point to Save the work up to now. Some animations lend themselves to several variations, and saving a framework will save a ton of time making those variations. Use GIMP's internal .xcf format for this base file, such as "LightBarBase.xcf".
  8. "Hide" all of the frames by clicking the Eye icon next to them.
  9. Select Frame 1, Show Frame 1, and fill the leftmost grid box with a bright red.
  10. Un Show Frame 1, Show Frame 2, Select Frame 2 and fill the next grid box over with the same color.
  11. Continue through all of the Frames, 'bouncing' back toward the left when you reach the rightmost grid box.
  12. Save this as a backup in case you want to make small changes. "LightBarSave.xcf"
  13. Delete the "Background" layer. Doing this last allows you to replace mistakes and extend the animation if you choose to by duplicating the background, but at the end it usually isn't needed for the animation.
  14. Select File->Save As, name the file "LightBar.gif", and click Save. GIMP will ask if you want to Merge Visible Layers or Save as Animation. Select "Save as Animation" and click "Export"(NOTE: In new version of GIMP, You cannot use "Save As" command for GIF format, You may use export menu instead of Save As).
  15. The next window offers a place to save a .gif comment within the file, and the standard delay between frames. Higher number equals slower animation. (NOTE: In new version of GIMP, Comments and frames option is available in export dialogue box itself).
  16. Finally, click Save. Your new animated .gif has been created!



Tips

  • Remember that .gif images only have 256 colors available, and "transparent" is one of them, so you can't do TOO much shading or your shading will disappear in the final export.
  • Something cute or funny is often more effective than large rude blinking blocks at getting a message across in a favorable way.
  • Combining the animation and transparency capabilities of the .gif format can make for some very nice effects.
  • Adding 'lingering' dimmer light behind the bright light makes this image a bit nicer.

Warnings

  • Very blinky images or messages can cause headaches, nausea, and disdain from your peers.

Things You'll Need

  • Install-GIMP, a free, open source graphics creation/editing program that runs on most personal computers including Mac, Linux, and Windows.

Related Articles

Retrieved from "https://kipkis.com/index.php?title=Create_an_Animated_GIF_Image_with_GIMP&oldid=353189"