How to Make Simple GIF Animations

Return to Home Page

Sometimes, it is useful to make a short animation from a series of separate photos. These can be taken automatically, by means of time-lapse equipment, or simply be a series of still photographs taken from a reasonably fixed location.

One method for displaying the result is as a 'GIF animation', which is a facility included in the GIF (Graphic Interchange Format) image specification that allows a series of layers in an image to be displayed sucessively, at pre-selected time intervals. For the following example, I used Ulead's 'GIF Animator2', though other software is available.

The first step is to select and align the individual photos to be used for the animation.

photo selection

My method is to open the individual photos in Photoshop Elements and then build up a series of aligned layers. The process starts by opening the first two images in the sequence, as shown below:

open images

N.B. My screen images are based on Adobe Photoshop Elements v.2.  Later versions operate in a similar way but the screen layout may be different.

Once the two images are opened, Step 1 is to select and copy the whole of the second image and then, Step 2, to paste it over the first.

Once the two images have been placed together as 'layers', Step 3 is to set the layer 'Opacity' to aound 50%, so that the first image can be seen 'through' the pasted second image.

Step 4 is to use the 'Move' tool, in conjunction with the mouse, to bring the two images into alignment. This is best done when viewing the images at 'actual size' (100% size), so that small details can be aligned precisely.

 In the example I've shown, I made an initial 'coarse' alignment, using the grass stems, and then made final adjustments, to bring the fine hairs around the flower into precise alignment.

Once the first two images have been aligned, then repeat the process by copying and pasting the third mage over the first two, repeating the alignment process by adjusting the 'Opacity' of the new, third, layer. Then continue for the complete 'stack' of images. The multi-layered image can be saved in psd format, without losing the layer information - but be ready for a very large file-size.

The multi-layered image can be cropped and re-sized if required, before making the animation. The individal layers can then be saved as separate JPEGs by making just the required layer 'visible', in the 'layers' palette, and saving a copy of this layer, using the JPEG 'save as a copy' dialogue.  (Make sure that the top layer has an Opacity of 100% before saving)

layered image

Its best to save the final set of JPEG images in a separate folder, as this makes it easier to import them into the animation software. At this stage, you have all the images, correctly sized and aligned, for making your animation.

When using the Ulead software, I use the 'animation wizard' to import and sort the files, and then use the 'preview' to get a first impression of the result.

Animation Pre-view

Sometimes, one or two images do not fit smoothly into the sequence and these can be deleted, or the sequence can be re-arranged (if appropriate) to achieve a smoother result. The timing of individual images can also be selected and 'title slides' or other additions can be inserted, with their own individual timing.

Once the animation is running smoothly, it can be saved. The Ulead software 'optimises' the result, for minimal file-size, by allowing use of a reduced colour palette and by identifying static parts of the image, which do not need to be re-saved for each layer.

Optimise the Animation

The end-result is a short animated sequence that need not occupy a large amount of file-space and can be made suitable for attachment to an e-mail, for example.

Butterfly Animation


©Mike Flemming, June 2015

Return to Home Page