Animated GIFs & Photoshop - An Overview

Introduction

Of the four image file formats used for most web page images (JPEG, PNG, GIF, and SVG) only GIF can be used to create self-contained animated images. Note that video files can be used to deliver animation, but video files usually have much larger file sizes requiring longer load times. The following other animation methods require CSS and/or JavaScript code.

Although Adobe Flash can do a vastly superior job creating and presenting animation and has a phenomenal compression scheme (when used with vector shapes), its lack of support by iOS (iPad, iPhone) has relegated it to second-tier status. Because of this, animated GIFs have gained importance. The ability to create animated GIF files is many years old.

Note that animated GIFs are sometimes referred to as videos, but this is inaccurate because video is not involved in the process under normal circumstances.

Warning

Some animated GIFs can contain malicious code including ransomware. I found this out. As I understand it, the malware loads when the image buffer is not immediately large enough to display the image. When you create a GIF you do not need to be concerned about this. But if you are searching for GIFs on the web and play one of them it may infect your computer.

Google Doodles

Google often uses animated GIFs for its doodles, the little animations that is uses on its primary search page. These animations can be a source for ideas and technique. If you right-click on one and use Save Image As (or similar) you will see what format the file is by looking at the name the file will be saved as.

If the file name ends with .gif then you may want to save it on your computer so that you can open it in Photoshop to find out what each frame contains and therefore how the animation works. When you complete this exercise you will know how to view the frames in such a file. But note that the images are the property of Google, therefore only use it for your edification. Also note that many Google doodles use sprite animation instead of GIF.

GIF Animation - technical considerations

GIF animation file sizes can be quite large depending on the image content and how many frames are in the animation. Web developers must always strive for reducing file sizes to minimize download times. Because of this concern it is best to attempt to minimize the pixel height and width dimensions of the file and to minimize the total amount of frames used. Each frame is in essence a separate image that requires its own storage space.

In addition, GIF files have are limited to a maximum of 256 colors. The colors can be any colors, but there can only be 256. This is referred to as indexed color because the file contains an index of the colors used.

256 colors may seem like many colors, but when an image includes gradual changes of color such as gradients, the limitation may become visually apparent as visually displeasing bands of color. Also, the file size will become bloated due to the RLE compression method employed by GIF to keep file sizes small.

The GIF compression method (or, scheme) saves color information only when colors change. Therefore, if you have 20 rows of one color, for example blue, then the only information that the file needs to record is that are 20 rows of blue pixels that run the width of the image. This requires only a negligible amount of data storage.

This limited use of color reduces file size but it relies on using image components that have a limited amount of colors. That is why GIF files are best suited for images that contain mainly solid colors such as logos, cartoons, simple geometric shapes, and text. Incidentally, PNG-8 is identical to GIF in this regard, but generates slightly smaller file sizes than GIF. However PNG does not allow for animation within its file.

This is unlike what what happens when there are images with lots of different colors or shades. In that case, almost every pixel needs to be saved with unique color information. This results in larger file sizes and poor quality images.

Comparison of a gradient saved as a JPEG on the left and as a GIF on the right:

example of a jpg image of a gradient showing smooth blending from light to dark exmaple of GIF compression showing bands of color, without a smooth transition.

Frames

To create an animation, individual images need to be created and then shown in rapid succession to create the illusion of movement. Each image is referred to as a frame.

The success of the animation is based on a smooth transition from one frame to the next, the frame display rate (the amount of frames shown per second), the amount of distance that the objects in the image move from frame to frame, and the use of motion blur when practical (motion blur is beyond the scope of this article).

There are two ways to create frame-by-frame animated GIFs of a moving object in Photoshop:

  1. Manually positioning the object in each frame.
    • This technique is very labor intensive and often requires a certain amount of experience otherwise it can be very frustrating.
    • Photoshop does not have particularly good tools for doing this.
  2. Using tweening.
    • Tweening is an old animation term.
    • When animation is produced in the traditional manner, each frame requires a hand-drawn image.
    • The most skilled artists are assigned to draw the most critical frames. These frames are referred to as the key frames.
    • The key frames depict the most important positions that an animated object or character takes. A keyframe will often represent a major change of direction or position.
    • Other artists draw the frames that are needed between the key frames. This process is known of as tweening.
    • Photoshop tweening is similar. The animator creates start and end positions in separate frames. These are Photoshop key frames. Then Photoshop computes the in between positions, generating the amount of in-between frames specified by the animator.
    • Photoshop (and several other Adobe programs) refer to this as tweening due to its similarly with the traditional methods of animation.