Creating and animated GIFs essentials

 

data-animation-override>
“Hans Weichselbaum looks at creating animated GIFs that will add some pizzazz to web pages or email marketing”

In today’s world we are bombarded with images, all competing for our attention. Moving images, in the form of short videos and animation, do a better job than still images, and it comes as no surprise that ‘rich media’ is increasing on websites and in email marketing. File size, bandwidth, and download times are not as critical as they were 10 years ago, and there’s really no reason to not take advantage of this new way of communication.

One option is to use software to create a slide show, then render it to make a movie file for downloading. PDF slide shows are also a very elegant way of getting your message across. However, despite broadband connections, file size and download time are still an issue since people don’t like waiting and watching spinning circles — they’d rather click somewhere else.
The GIF file format (Graphics Interchange Format) was introduced in 1987, and since the early days of the internet it has been a popular image format. The one big drawback of GIF files is that they only allow for 256 colours. This is plenty for images with solid blocks of colour, line art, logos, and comic strips, but it is not ideal for photographic images. Photos with smooth colour gradients can show posterization.

However, there are many things you can do with GIF files, like having transparent backgrounds, which allows you to blend an image seamlessly into the background of a web page. Another big advantage is the ability to store multiple images into one file, and this property is utilized in animated GIFs. 

Animated GIF files

You might think that creating an animation is a complicated process, but it isn’t. While there are many tools available for creating GIFs, the go-to application for most designers is Adobe Photoshop, and that’s what I will use in this demonstration. If you don’t have Photoshop there are plenty of tools for Mac and Windows users, otherwise you might try a web-based GIF creator — you can even find apps for your mobile that can help create GIFs.

The main use for animation is to attract attention on a website or in email marketing. Keep in mind that animations work on almost all browsers, except for newer versions of Outlook (2007, 2010, and 2013). For these browsers only the first frame of the animation will be shown. It is therefore important to make your first image your primary one. That could be your logo or the main product shot.

Secondly, if used too frequently and aggressively, animations can become a nuisance and turn off potential customers. Finally, keep an eye on the total file size and try to keep it under 200KB. This ensures that your animations will load fast and run smoothly. 

Reverse engineering animations

The easiest way to learn about animated GIFs is to download some ready-made ones from the internet and look at them with Photoshop. There are plenty of sites offering copyright-free animations, for example animatedgif.net, or giphy.com. 

Photoshop lets you open animated GIF files and preserves the individual frames they’re made of. This comes in very handy if you want to edit an existing animation and don’t have the original files. In other words, you don’t need to start from scratch.

Image 1 shows you what you get if you open an animated GIF file in Photoshop. In this case we have a rotating globe, made of more than 20 individual images. 

In the Layers panel you will see a whole list of layers, each having a single image representing one frame of your animation. You can click on the little eyeball on the left to make each image visible or to hide it.

Now go to Windows > Timeline and you will get a horizontal Timeline panel at the bottom of your screen. The length will depend on the number of images in the animation (Image 2).
If you work with an older version of Photoshop then the command is Windows > Animation — everything else is the same.

The button at the bottom left is to switch from the animation to the video timeline. The next drop-down menu lets you determine how many times the animation plays, from once to forever. Three times is probably a safe choice for an advertisement in order not to annoy the viewer. If you choose ‘Other’, Photoshop lets you enter any number.

You’ll find the usual playback buttons alongside this drop-down menu. The playback feature allows you to play the animation, or go through it frame by frame.

The last three buttons at the bottom are the Tween button (the one marked with the red arrow), Duplicate Frame, and Delete Frame. We’ll discuss them in the next chapter when we build our own animation.

The button on the top right opens the Menu panel and brings up a whole list of commands and options (Image 3).

Creating your own animated GIF

After having examined an existing GIF animation, we can tackle our own. There are many ways of starting a new project. Some people recommend opening a new document in sRGB with the exact dimension of the final product. For example this could be a 140×140-pixel ad for your retail business. The images you’ll need include your logo, a few product shots, and perhaps a 10-per-cent-off coupon.

I find it easier to work with larger images, and leave the downsizing until creating the final GIF size and as the last step prior to saving. Having a larger version saved as a Photoshop document (PSD) also allows you to go back to your ad at any time, and change the pixel size if your original design turns out to be too small.

The easiest way is to start with your first image and then put all subsequent images into individual layers, this is the same as we saw when we reverse engineered our first animation (Image 1).

Once you have all your images saved into layers, open the Timeline panel through Windows > Timeline (or > Animation). This panel also has controls for video editing, so you need to switch it to animation mode by clicking on the Create Frame Animation button. Photoshop then creates a single frame representing what is currently visible in the Layers panel. Each frame acts as a placeholder for the image you want to show.

At the bottom of the Timeline panel click on the Duplicate frame icon to create a new placeholder for the next image in the series. It will contain the same image as the starter frame. Use the visibility eyes in the Layer panel to display only the layer containing the next image in your animation. When you turn off the visibility of every layer except the one that you want to show next, Photoshop displays the visible layer in the new frame.

That’s all there is to it. But there is an even easier, and certainly quicker way if you have lots of frames — simply select the Make Frames from Layers command found in the Menu panel of the Timeline (Image 3).

Editing your animation

Once you’ve created all your frames you can run the animation with the Play button, but there are still lots of options to refine your animation.

Frame delay controls the length of time each image is visible, and can range from no delay to 10 seconds, or you can enter any number you choose. You can also set the delay individually for every image.

You can set the loop count from only one loop to any number you choose. Note that you can also set the loop count in the final Save for Web dialogue panel. 

Rearranging the frame order is easy, you simply click and drag them left or right. To delete frames, go to the Timeline panel and you’ll see that it has its own little rubbish bin. Select the frame(s) you want to get rid of and drag them to the bin. Alternatively, choose Delete Frame from the Timeline panel menu.

Tween frames gives you control over the transitions between frames. Tweening (short for in-betweening) makes the frames fade in and out. Just tell Photoshop which frames to tween, plus the number of frames of fading you want, and the program adds the new frames for you.
You can create all kinds of special effects using tweening. It’s simply a matter of setting up a layer for each frame, creating the frames, and then adjusting what you want to happen between a pair of frames. For example, if you move the contents of a layer in a frame, you can use tweening to make it look like the object is moving.

Nothing stops you from turning Layer styles on and off, or adding a solid-coloured frame to make the animation look as if it fades into that colour. There are endless possibilities, but keep an eye on the file size, because each frame you add will increase the final GIF size. Once these processes have been fine-tuned, you can save your animation as a PSD file so that you can come back to it later for more editing. Before saving it as a GIF file you might want to trim it further to minimize its size.

To optimize the GIF’s animation, go to the Timeline panel menu (Image 3) and select Optimize Animation. You will see a dialogue box with two settings. The Bounding Box setting crops each frame that has been changed, to the part that’s different to the previous frame. The second setting removes redundant pixels to squeeze the last bit of file size out of your animation. Interestingly, both these settings are switched on by default, but they are only applied after you run Optimize Animation.

Save your animation

Finally you’ll want to save your work of art as an animated GIF file. Choose File > Save for Web, and Photoshop will present you with a panel, which might look intimidating when you see it for the first time (Image 5).

The most important settings are as follows; first, you choose the 2-Up or 4-Up setting above the preview. This gives you a visual indication of any image deterioration when you apply file compression. Go on to select the GIF file option at the top right, tick the Convert to sRGB box, and if you want to minimize the file size, select the compression setting, Lossy, with a slider. Make sure you keep an eye on the image quality while you apply a lossy compression.

Underneath the Colour Table you get the option of sizing your file to a certain pixel dimension (that’s why I suggested working with a larger image to start with). Finally you get a last chance to set the number of loops your animation is running through.

Once you are ready, press the Save… button, name your file, and select a destination. Keep in mind that many web servers don’t like capital letters and spaces in the file names. Instead, use the underscore to separate words and numbers within the file name. 

Animated GIFs can add an element of excitement to ordinary email or static web pages. They are also fun to watch, and bring a new challenge into your Photoshop repertoire.

This article was originally published in D-Photo Issue No. 66. Missing this issue from your collection? You can pick up a print copy or a digital copy of the magazine below: