Creating an animated GIF

About Blog Projects

Animated GIFs are great for making your website more interesting and can be an effective marketing tool if used right. Below are three ways to get the effect you want. You will need Gimp or some similar tool to follow these tutorials.

Animated Banners

Animated banners are probably the most used way of animating a website with images, but it isn't always the simplest. It isn't very difficult to add multiple layers to a Gimp project, to produce one animated .gif file, but if you want to create faded transitions, these layers will need to be duplicated. Below are two banners, which will be combined into an animated .gif file with a faded transition.

Banner 1 Banner 2

First, you will need to add the above images to a Gimp project, by selecting them as layers.

Gimp - Open as layers

Alternated layers Once the layers have been added, you will need to duplicate them a few times. The general idea is to have the first banner at the very top of the layers, the second banner at the very bottom of the layers, and 9 copies of each alternated in between. So the example on the right shows banner1.png at the top, then the first copy of banner2.png, followed by the first copy of banner1.png. There are then 8 further pairs of copies, finishing with banner2.png (can't be seen in the screen shot).

Once you have your layers configured, you will need to set their opacity. A great way of imitating a fade effect is to gradually increase the opacity of banner2.png, while gradually decreasing the opacity of banner1.png. Starting from the top pair of copied layers, set the opacity of the first copy of banner2.png to 10% and the opacity of the first copy of banner1.png to 90%.

Continue this method for each subsequent pair, altering the opacity by 10% each time, so the next pair will have 80% opacity for banner1.png and 20% opacity for banner1.png. The third pair will have 70% opacity for banner1.png and 30% opacity for banner2.png and so on. The opacity can be set at the top of the layers bar.

Setting layer opacity

The last thing to do before exporting the project to a .gif file, is to merge these pairs of layers together. This will create 9 images that display both banner1.png and banner2.png, of varying opacities. The idea is that each consecutive image will be shown very quickly, giving the illusion of a faded transition. Right-click the first layer of each pair and select "merge down", to merge it into the layer below.

Merge layers together

You should now have 11 layers: banner1.png, banner2.png and 9 merged pairs. The final step is to export this as a GIF. Go to file->export and save as "example.gif", where "example" can be a name of your choice. You should then be prompted by another box, which holds all the configuration needed to make the animated GIF. Check the "As animation" checkbox. Under "Animated GIF Options", you can set whether you want the animation to repeat once it hits the second banner, how many milliseconds between each frame and how to dispose of each frame once displayed.

Banner 1 Export as animation

Set "Frame disposal where unspecified" to "One frame per layer (replace)" and check both "Use delay entered above for all frames" and "Use disposal entered above for all frames" checkboxes. Click "Export" and you're done! To quickly view the animation, drag the GIF to a browser window and it should start to play. Try experimenting with the different configurations and other possible transitions such as flips and rotates. Click here to see a slightly more complex version of this GIF.

Simple animated GIFs

As you may have already worked out, you don't necessarily need any transitional effect at all between frames. When creating a simple flick-book-type animation, you don't want the transitions to show, you want it to appear as if the content is moving seemlessly.

The animated GIF at the top of this page is an example of what you can do with this type of project. This is simply a series of images, with a slight change each time. All I did was open them all as layers into a Gimp project (just like with the previous example) and exported to an animated GIF. I missed out any work with opacity as I only wanted to replace each frame immediately.

Creating a drawn animation

Drawing a chalk circle. A short while back I wanted to create an effect of someone drawing for a noughts and crosses game and found an effective method using animated GIFs. This example was made by starting with the full image and duplicating it a few times, so that I had about 20 identical layers. Then, in each layer I erased some of the image, until there was nothing but a blank layer left. If you play the frames backwards, it looks like the image is being drawn. As with the previous example, there's no need to any transition. Just export the project to an animated GIF as before.

Greetings, Our daily Scripture email delivery will be unavailable while we upgrade our system. We expect it to continue in the near future. We encourage you to continue to read Scripture every day, it is alive and powerful. Many devotions are available at aDevotion.org/archive as well as adevotion.blogspot.com; additional Bible teachings are available at believers.org.

ABibleverse.org pausing (God bless you!)