There are many different image file formats — PNG and JPEG and each are good for their own specific uses, but there’s a few things that make the GIF (Graphics Interchanged Format) different. GIFs tend to take up less room than similar images in other formats. But perhaps what GIFs are known for — and when used poorly, despised for — is their ability to show animations while retaining their tiny file sizes.
Despite the hate that is often heaped upon GIFs a little too broadly, there are plenty of instances where an efficiently sized animation could come in handy, and you should know how to create one. In this tutorial, we’ll create and export your very own GIF animation using Photoshop CS5.
Part One: Preparing for Animation
1. Firstly we need to actually create our images. Imagine a GIF as a keyframe animation and each frame is a different image — now we need to create each individual image that we’re going to put together to form an animation.
2. Open up Photoshop and create a new document, ensuring it has a colored background and isn’t transparent (traditional GIFs don’t support transparency). For this tutorial I’ll be using a document that has a white background and is 600 x 400 pixels, and I’ve called it 001Frame.
3. Because the purpose of this tutorial is to simply get you started with creating GIFs, we won’t be making some sort of extremely complex animation masterpiece — I’ll keep it simple while teaching you what you need to know to create more complex animations. For now we’ll just move a square across our canvas, while making it bigger and then smaller.
4. Grab the rectangle tool (or hit ‘U’), draw a rectangle on your canvas and give it a color. If you hold down Shift and draw the rectangle, Photoshop will constrain the proportions of the rectangle and make it a square.
5. Now, duplicate the square’s layer and call it Shape 2 (make sure Shape 1’s layer is always at the top).
6. Change the position of the square so that it aligns horizontally with the first square and enlarge it slightly. Change its color if you want. Continue duplicating and changing your squares until the entire width of your canvas is covered.
7. Once you’ve lined your squares up you need to give each layer a white background so that only one shape will appear in each frame. So, for Shape 1, you’ll want a white background over all of the other shapes. Select the rectangle tool again and draw a white rectangle to hide the other shapes.
8. Once you’ve created a shape to cover the other shapes, you need to convert both the shape and its background to a smart object and then rasterize them. To do this select both the shape and its corresponding background and right-click them. Click ‘Convert to Smart Object’ to combine both layers. Now you can right-click the object and select ‘Rasterize Layer’. Do this for every pair of shapes.
9. Now, you have a sequence of shapes on your canvas and you’ve prepared each of them to be animated. Actually, just creating these frames was probably more complex than actually animating it!
Part Two: Animating
1. With all of your prepared, rasterized shapes, it’s now time to actually animate them. Firstly go to ‘Window – Animation’ and click on the button in the bottom left of this new palette to switch to a timeline animation.
2. Now, click on the small icon in the top right of the palette and click ‘Make Frames from Layers’ and ensure that for each frame in the timeline, the background layer is visible.
3. For each layer on the timeline, you’ll be able to see a duration of time. Change this to whatever you feel it necessary — for this tutorial, I’ll use 0.05 seconds.
4. Now, we’ll make the animation loop. Select the drop-down menu underneath the first layer in the timeline and select ‘Forever’ — this will make the animation loop forever. Be warned that the liberal use of this setting is a big part of what gave GIFs a bad name!
5. You can now preview your animation by pressing the play button at the bottom of the animation palette. If everything has been done correctly, it should play a fluid animation — although you may have to tweak the order of your frames to get them appearing in the right order.
Part Three: Exporting
1. So far, we have our animation created within Photoshop and we’ve tweaked the duration and the order of the frames. Now we want to export it and share it! Unlike traditional Photoshop images and graphics, you need to export a GIF differently.
2. To export, go to ‘File – Save for Web & Devices…’ and you’ll be presented with a dialogue that’ll display various options.
3. By default, the GIF preset settings are sufficient and work but if you’ve changed something in the past, make sure they correspond with the values and options below:
4. Once you’re ready to go, click Save, give your animation a name and export the file to the destination of your choice.
5. Now, you have saved your GIF, go ahead and open it up in a web browser or select it and press the space key to quickly preview it. Congratulations! You’ve successfully created your very own GIF image! This tutorial has served to teach you how to use Photoshop’s basic animation capabilities, how to configure the timeline, how to animate layers and how to export your graphic so you can use it online and on your computer!
Some browsers may play this GIF back without any frame delay — if this has the speed of a particularly annoying strobelight for you, try downloading the image and viewing it outside of the browser.
iOS, Mac and web developer and designer.