Create an Animated GIF with Ease
ADOBE PHOTOSHOP You can subscribe to various packages at www.adobe.com.
DESPITE BEING AT THE HEIGHT of its popularity on Geocities back in 1999 (it was the third most visited webpage at the time of its takeover by Yahoo!), the animated GIF refuses to die. Now a staple of the witty reply on Twitter (where the GIFs are converted into more efficient video files, as Twitter doesn’t have infinite storage), the GIF seems like it’s never going to go away. Even Facebook caught up eventually, adding support for GIFs, originally launched in 1987, in 2015.
Animations came about as an extension to the reworked 1989 GIF specification. Each frame is stored within the same file, and they are displayed in succession with a time delay between. GIFs don’t have to loop, and you can set the number of times they repeat—a setting of “0” produces a GIF that loops indefinitely.
There’s also a debate over its pronunciation. The creators of the Graphics Interchange Format insist it should be pronounced “Jif,” like the peanut butter. However, the first word is clearly “graphics,” not “giraffe,” so we favor the hard G. It makes no difference to the written word, so pronounce it in your own head any way you like.
1 CREATE A BLANK DOCUMENT
It’s not often we start with a completely blank document, but here we need to. We’ve created one at 1920x1080 pixels
[ Image A], mainly so we have something large that will look good in screenshots, but you may choose to make yours smaller in order to create a smaller file at the end. GIFs can display a full range of colors through a block-tiling trick, but the palette table of each block only has 256 entries, meaning 256 colors (commonly 255 plus transparent). This means an animated GIF isn’t the ideal format for photorealistic images, especially if you care about such things as quality and file size. What it is good for, however, is graphics, cartoon-like images, and text.
2 CREATE SOMETHING
Simple, eh? Create something. What you create needs to be reasonably simple, so you can draw it again and again, only slightly differently each time as you create the frames of your animation, or something that can be copied and pasted multiple times before being tweaked for each frame. We’ve created two layers of text at 300pt, and flipped one so it looks a bit like a shadow under the other. We also removed the background layer, using the trashcan button at the bottom of the Layers palette, so we have the checkerboard pattern of a transparent document.
3 CREATE FRAMES
Decide how your image needs to change between the first and last frame, and create the frames by changing your image, with each complete frame having its own layer. We copied and pasted the text we’d created on to 20 layers [ Image B]— 10 for the red text and 10 for the black—and changed each black one a little more using “Edit > Transform > Skew,” and its blending opacity on the Layers palette, so that the shadow text appeared to move and strengthen below the red, which never moves. Then we used “Layer > Merge,” along with the Layers palette and Ctrl-Left Click to select multiple layers, to create 10 final layers, each with red
and black text, moving from the beginning at the bottom of the palette to the end at the top. Showing and hiding layers using the eye icon at the left of their entry in the Layers palette can make this easier to manage, and if you’re duplicating layers, try linking them by selecting them both, and choosing “Layer > Link Layers” before duplication—this keeps red and black together. Just remember to unlink them before you start editing, or you could get unwanted effects.
4 MERGE FRAMES
Make all your layers visible, then use Ctrl-Left Click to select a red and black pair, before merging them with “Layer > Merge Layers.” Once this is done, make sure they’re all visible, and open the Timeline from the “Window” menu
[ Image C]. It appears at the bottom of the screen, and at first doesn’t have anything on it except a drop-down with two options: “Video” and “Frame animation.” Choose “Frame animation” and, in a moment of counter-intuitive design unusual for Adobe, it becomes a button. Click it. The timeline opens, but still looks bare. To fix this, open the three-line menu at its far-right, and choose “Make Frames from Layers.” Now you have one frame for each of the layers you prepared earlier. Hit the play button at the bottom-left of the Timeline to preview the final effect.
5 EDIT DELAYS
Each frame in the Timeline has a little drop-down at its base, which currently reads 0 sec. This is the delay on that frame before the next one is shown, and currently there are no delays. You can change this to up to 10 seconds with a click, or enter a custom value [ Image D]. Beware, though, that it can make your GIF look jerky, and isn’t ideal for animation. If you’re using the GIF to display a slideshow, however, this is the perfect way to make your images stay on screen longer.
6 SAVING
Once you’re happy with how your animation looks, you need to export it. Save the file first as a PSD, in case you want to come back later and edit anything or check your settings. Then head to the “File” menu, and choose “Export > Save for Web (Legacy).” Adobe has been trying to replace this relic of pre-CC Photoshop for a while, but it always has its uses, and this is one of them. It correctly guesses you want to export a GIF, but there are color palette options you can play with to keep the file size down. A “Restrictive” palette produced the smallest file, but watch out for dithering if you’ve got too many colors in your animation. Setting the number of colors to “Auto” also pares down the table for a smaller file, but the best way to shrink it down is to reduce the resolution, even if you created it at a higher one. You can do this from the “Save for Web” window by choosing new pixel dimensions at the bottomright, where you can also choose how many times the GIF will loop, or whether it will go on forever. A quirk of this window is that hitting the “Done” button doesn’t mean your image gets saved—you need to specifically press the “Save” button [ Image E].