Are you trying to find a tutorial on how to create a gif file or a gif image? If yes, here is your solution to create your animated gif images using a free image editing program, gimp.

Suppose you want to make cool animated gifs, like a web banner, for a website that doesn’t take too much time to create and is fun to watch at the same time. Is it possible? Yes!

But how? Let’s find out below!

5 Steps To Make An Easy Animated GIF In Gimp

We have used the windows version to create this web banner. However, you don’t need to worry if you are a Mac or Linux user, as only shortcuts will be slightly different, not the interface.

Step #1

Let’s start with an easy web banner. For this, go to file and select a new template. Choose a huge web banner with a 468×60 pixel picture. Click on the file menu.

Make the backdrop color white—new transparent layer creation. Ctrl+A will select the entire Image, and Ctrl+ will fill it with black. Select the area to be shrunk by 1 px (Selection shrink), then press Ctrl+K to remove the selection. Our banner has a 1 px frame around it.

Now add the logo of your choice to the banner. Please select a file using an alpha channel, create a blank layer below it, and then use Ctrl+ to fill the selection with black.

After that, shift the shadow by 2px to the bottom right and blur it using a Gaussian blur RLE. By using Filters> Render Grid, and a layer mask, you can create an interlaced effect. Use a black-and-white gradient in that layer mask to prevent the left side of the blossom from interlacing.

 Use Image>Flatten Image to flatten the Image once you’re ready.

Step #2

The real animation work now begins. We’ll make a banner with, let’s say, three lines of animated text in it. The side image will be the main component of each frame, along with some text.

Let’s make it three frames to make it look attractive. Our flattened Image will naturally need to be duplicated twice using the duplicate layer button in the layers window as the first step.

Then we’ll add a brief text message to each frame using the default text tool. When you enter text in the frame, gimp will create a floating selection.

You must shift this selection to the right using the move tool and anchor it using Ctrl+H.

The positioning is essential to the final animation. Therefore, you may make it simple to adjust using the following tip. To be able to see the layer underneath the text tool while using the text tool, reduce the layer (frame) opacity setting.

You can then position the newly formed text by the text below (on the previous frame).

Step #3

You can customize the gap between frames in every GIF animation. By eliminating the need for the delay constant, you may produce an animation that lasts for 12 seconds with just a few frames.

In GIMP, the delay is specified as a layer remark. To add a delay in milliseconds, double-click the layer comment in the layers window ().

The animation can be previewed using the Filters >Animation> Animation Playback to see if the timing is correct. On your desktop, you may even drag the preview.

Step #4

The final stage will involve using a very useful function for applying a filter to several levels. GAP, or the GIMP Animation Package, offers this feature. Please visit the “Using GAP” instruction for additional information about the tool.

We need to make a new image out of the third frame before we can apply this effect. You must drag the layer preview from the layers window to the toolbar. Now make four copies of the Image.

Draw a selection around the text using a rectangular select tool. We can now use variable parameters to apply a gaussian blur filter to each layer. Pick plugin-gauss-rle2 from the list using the Filters> Filter All Layers feature, and then click the apply varying button.

A blur dialog box appears. Now that we have defined the settings for the first frame, which is the bottom layer of the stack.

Let’s set a smaller number for the initial frame since we want to blur the text away over time. We’ll simply blur horizontally. Therefore, let’s set the scale to v:0 h:2. Another dialog appears when you click OK. Here, select continue and enter the last frame’s settings.

We’ll use a horizontal blur of 20 pixels. You can go back and undo your progress, but for the time being, we’ll click continue in the following window and apply the filter to every layer in between. Drag the layers back to the original Image is all that is left to be done at this point.

Step #5

All that is left to do is save our animation as a GIF. Let’s use the Filters>Animation> Animation Optimize function to optimize the animation first. 

This will generate a brand-new image in a manner that differs from the one we currently use. For each animation frame, you can choose from two alternative options.

Alternatively, you can utilize the replace mode (the default), which will swap out the existing frame for the new one. It resembles removing the frame before replacing it. The second approach, called the combined method, involves adding the new frame to the last frame.

Only changes would then need to be updated. That is essentially what an animation optimizer does. The size of the file drastically decreases. We must now index the Image using the Image> Mode>Indexed function (Alt+I).

Use as few colors as you can, and steer clear of dithering. Dithering and the total amount of colors tend to increase file size significantly. I built a 32-color palette without using any color dithering.

The banner’s file size is around 7kB. Now that you have saved the Image as a GIF, GIMP will prompt you to save it as an animation, which is just what we require.

You can set the default delay (in our example, we will use it for the blurred frames) and the disposal method in the save as GIF dialog. To view the animation, use your web browser or the animation playback feature found in the animation menu under the picture menu.

Conclusion

So now you know how to make an animated gif using GIMP (Gnu image manipulation program). You can refer to this guide to create animated gifs for your projects, website, or videos. Want to learn more about tools and features in gimp? Then comment down “Yes” below.

Leave a Comment

Your email address will not be published. Required fields are marked *