How to Create an Animated GIF with GIMP (with Images)

Table of contents:

How to Create an Animated GIF with GIMP (with Images)
How to Create an Animated GIF with GIMP (with Images)
Anonim

Animated GIFs are images that you can find anywhere while browsing the web. This type of special images are used to animate buttons, links, icons, backgrounds, banners, advertisements or to divide the various sections of a page. Thanks to their captivating effect, they are able to attract the observer's attention very easily and therefore are an excellent tool to express one's creativity and ideas. This article explains the basic process of creating an animated-g.webp

Steps

Part 1 of 2: Creating the Frames of an Animation with GIMP

Create an Animated Image with GIMP Step 1
Create an Animated Image with GIMP Step 1

Step 1. Launch GIMP

It is a free and open-source program that allows you to edit any type of image and offers features very similar to those of Photoshop. It features an icon depicting the muzzle of a fox with a brush in its mouth. Click on the GIMP icon found in the Windows "Start" menu, in the "Applications" folder of your Mac or Linux computer.

You can download the installation file for free by visiting the GIMP website

Create an Animated Image with GIMP Step 2
Create an Animated Image with GIMP Step 2

Step 2. Create a new project

The size of the file in question depends on the use you intend to make of it. Advertising banners, for example, generally have standard dimensions of 60-120 pixels high by 400-800 pixels wide. Buttons, on the other hand, are normally about 40 pixels high by 300 pixels wide. Every software, web service or system for creating banners has very specific requirements to be able to use content such as-g.webp

  • Click on the menu File;
  • Click on the item New;
  • Type the number of pixels that will correspond to the total width of the image in the "Width" field;
  • Do the same thing to indicate the number of pixels relative to the height by entering it in the "Height" field;
  • Click on the button OK.
Create an Animated Image with GIMP Step 3
Create an Animated Image with GIMP Step 3

Step 3. Choose the background color of your GIF

The background and foreground layer color are shown inside two slightly overlapping rectangles located at the bottom of the GIMP toolbar on the left side of the window. To select a color click on the upper rectangle, then click on the color you want to use displayed inside the bar that shows all the available colors. Use the box located to the left of the color bar to choose the shade of the color you have selected. This way you have set the primary color that GIMP will use.

Create an Animated Image with GIMP Step 4
Create an Animated Image with GIMP Step 4

Step 4. Use the "Color Fill" tool to use the chosen color as the background of the-g.webp" />

The "Color Fill" tool has a paint can icon angled at 45 °. It is located within the "Tools" panel displayed on the left side of the GIMP window. Click anywhere in the image area displayed in the center of the program window to insert the background color.

If you need to insert or draw any subject or object in the background, you can use the tools that GIMP offers you. But remember to work on the image layer that will be used as the background

Create an Animated Image with GIMP Step 5
Create an Animated Image with GIMP Step 5

Step 5. Add a new layer

The "Layers" panel is located in the lower right part of the program window. To create a new layer click on the small icon in the shape of a sheet of paper with a small "+" sign. It is located in the lower left corner of the "Layers" panel. Now create a single layer for each of the objects that will make up the-g.webp

Create an Animated Image with GIMP Step 6
Create an Animated Image with GIMP Step 6

Step 6. Insert the animated objects into the image

Use the new layers you created to incorporate all the objects or subjects that will characterize the animation into the GIF. You can use the "Brush" tool to draw a subject or you can use the "Text" tool to add a text message if it is the subject of your animated GIF. Make sure that each of the subjects that will bring the-g.webp

Create an Animated Image with GIMP Step 7
Create an Animated Image with GIMP Step 7

Step 7. Create the first frame of the final image

After creating all the objects that will make up the animation and placing them in the corresponding layers, place them all within the first frame of the GIF.

Create an Animated Image with GIMP Step 8
Create an Animated Image with GIMP Step 8

Step 8. Save the first frame of the-g.webp" />

Any animation is created by joining a sequence of individual images called frames. For this reason you need to create every single frame of your animation and save it as a static image. Follow these instructions to save the image of the first frame of the animation:

  • Click on the menu File;
  • Click on the option Export as;
  • Type the text "[Animation_Name] frame 1" in the "Name" field;
  • Click on the drop-down menu located in the lower right part of the "Export Image" dialog box;
  • Click on the item JPEG image;
  • Click on the button Export;
  • Click the button again Export.
Create an Animated Image with GIMP Step 9
Create an Animated Image with GIMP Step 9

Step 9. Use the "Move" tool to move individual objects within the frame

The "Move" tool is characterized by an icon depicting four arrows starting from the same point of origin and pointing up, right, down and left respectively. Use this GIMP tool to move all the individual objects from their original position to what will be their final position within the second frame. To create a good quality animated-g.webp

To be able to create smooth and coherent movements it might be useful to activate the display "Grid". Access the menu View and click on the item Grill.

Create an Animated Image with GIMP Step 10
Create an Animated Image with GIMP Step 10

Step 10. Save the second frame of the animation

Once you have consistently moved all the animation objects to their correct position within the second frame, follow these instructions to save the latter as a static image:

  • Click on the menu File;
  • Click on the option Export as;
  • Type the text "[Animation_Name] frame 2" in the "Name" field;
  • Click on the drop-down menu located in the lower right part of the "Export Image" dialog box;
  • Click on the item JPEG image;
  • Click on the button Export;
  • Click the button again Export.
Create an Animated Image with GIMP Step 11
Create an Animated Image with GIMP Step 11

Step 11. Repeat the previous step to create all the frames that will make up your animation

Use the "Move" tool to move all objects to their final position within each frame, then save each frame as a static image. Make sure that each image contains the frame number within the name (for example "Flowing Text Frame 1", "Flowing Text Frame 2", "Flowing Text Frame 3" and so on).

Create an Animated Image with GIMP Step 12
Create an Animated Image with GIMP Step 12

Step 12. Save the project using the native GIMP format

It is a good idea to save all your work so far as a GIMP project in XCF format, so that you can make changes or adjustments to the frames if you need to. Give the GIMP project a name like "[Animation_name] frames.xcf". Follow these instructions to save it to your hard drive:

  • Click on the menu File;
  • Click on the option Save as;
  • Type the name you want to assign to the file in the "Name" text field;
  • Click on the button Save.

Part 2 of 2: Creating an Animated-g.webp" />
Create an Animated Image with GIMP Step 13
Create an Animated Image with GIMP Step 13

Step 1. Create a new project using GIMP

After creating the individual images that will be used as frames for animation, create a new project. Make sure that the dimensions of the new file are identical to those of the individual frames that will make up the animated GIF. Follow these instructions to create a new project using GIMP:

  • Click on the menu File;
  • Click on the item New;
  • Type the number of pixels that will correspond to the total width of the image in the "Width" field;
  • Do the same thing to indicate the number of pixels relative to the height by entering it in the "Height" field;
  • Click on the button OK.
Create an Animated Image with GIMP Step 14
Create an Animated Image with GIMP Step 14

Step 2. Import the individual frames of the animation as a new layer

GIMP creates animations using individual layers of a project as if they were frames. The bottom layer represents the first frame of the animation, while the foreground layer represents the last. Follow these instructions to import all the individual frame images into your GIMP project as new layers. To make a multiple selection of images, hold down the key Shift while clicking on the first photo to use and the last one:

  • Click on the menu File;
  • Click on the item Open as layers;
  • Press and hold the button Shift of the keyboard while clicking on the image corresponding to the first frame of the final animation;
  • At this point, click on the image corresponding to the last frame of the animation while still holding down the key Shift;
  • Click on the button You open.
Create an Animated Image with GIMP Step 15
Create an Animated Image with GIMP Step 15

Step 3. Add the frame rate (the number of frames displayed per second) in milliseconds to the name of each layer

By default GIMP exports animations as-g.webp

Create an Animated Image with GIMP Step 16
Create an Animated Image with GIMP Step 16

Step 4. Preview the animation

Before exporting your entire project as a-g.webp

  • Click on the menu Filters;
  • Click on the option Animation and then on the voice Execution;
  • Use the "fps" drop-down menu to select the correct frame rate;
  • Click on the "Play" button located in the upper left corner of the "Run animation" window.
Create an Animated Image with GIMP Step 17
Create an Animated Image with GIMP Step 17

Step 5. Export the project as a-g.webp" />

If the result of your efforts satisfies you completely, follow these instructions to turn the entire project into an animated-g.webp

  • Click on the menu File;
  • Click on the item Export as;
  • Type the name you want to assign to the-g.webp" />
  • Click on the drop-down menu located in the lower right part of the "Export Image" dialog box;
  • Click on the item ;
  • Click on the button Export;
  • Click the button again Export;
  • Click on the option As an animation;
  • Type the frame rate you have chosen to use (for example 30) in the text field "Delay between frames if not specified";
  • Click on the button Export.

Advice

  • Remember that images in-g.webp" />
  • To convey a message to others effectively it is sometimes better to use a funny or cute subject rather than a series of colorful frames that simply blink.
  • By combining animation and transparency effect offered by the-g.webp" />
  • To get a prettier GIF, try adding a persistent, but slightly less intense, light effect behind the main light layer of the image.

Recommended: