I recently made an animated GIF of my daughter playing in the park. I hadn’t set out to animate the stills, but I realized when looking at the outtakes of our photo session that there were plenty of frames that could be animated together to tell a little story in an interesting way. I’ve also made animated GIFs from portrait outtakes and scanned film-based photos. I’ve even made an animated GIF for a commercial client who wanted to show the way his product functioned. For some things, the animated GIF is the perfect storytelling tool.
The great thing about animated GIFs is that they don’t have to have a natural A-to-B progression that a good time-lapse video would require. They also don’t have to be perfectly smooth and seamless to work well. I will say, though, that it will definitely make for a more natural animation if you start with shots that were created to be a part of the clip. So, if your goal is high-quality motion, start with a series of photos that shows a very minor change from frame to frame. When animated, this will make the motion—and the overall look of the animation—much smoother. I’ve made animations from as few as eight shots to as many as 75.
Whatever you’re starting with—whether it’s a bunch of outtakes, a handful of unrelated shots or a meticulously crafted series—the process of assembling these frames into an animated gif is easily carried out in Photoshop. To start, I like to make sure my image files are all sized appropriately to the finished size I’d like to see online. I find something in the neighborhood of 800 pixels on the longest side is usually a good place to start. After selecting the frames that will make up the animation, I export them into a folder on my desktop with Lightroom set to output a maximum dimension of 800 pixels. (If you want to be safe and decide later, something along the lines of 1200 or 1500 pixels should be more than enough to resize down during saving.)
Next, in Photoshop I choose Load Layers Into Stack from the Scripts function under the File menu. This tool allows me to select a group of files or a whole folder, opening them into individual layers in a single Photoshop document. This is a huge timesaver.
Then I open the Animation palette (by choosing it under the Window menu) to begin turning those layers into an animation. The drop-down menu in the top right corner of the Animation palette offers the option to Make Frames from Layers. Click this, et voila—your individual layers are now shown side by side in the palette. The next step is to drag them into place and get them organized correctly, then adjust the speed of the animation by dictating how long each frame is shown.
There’s no formula for success when it comes to timing, but there are a few great rules of thumb. For instance, I like to start with a longer view of the first frame, in order to allow the viewer to get their bearings before the image starts to move. I’ve also made animations where I periodically pause on a given frame that I want to make sure is seen. Generally speaking, the shorter the duration each frame is shown (say, 1/10th of a second) the faster the animation will be. This would be a great way to make a time- lapse of many frames without making the finished animation too cumbersome. Since I usually make fairly short animations, maybe only 10, 20 or 50 frames, I’m not concerned about keeping the length of these animations short, so I can afford to let each frame display for a longer duration. The downside of this, of course, is that the animation doesn’t look as smooth and seamless.
Below each frame is the delay (Photoshop calls it delay, but I think it’s easier to think of it as duration), which can be adjusted by clicking the icon below each frame. You can select a single frame by clicking on it, or shift-clicking to select a range and apply that delay adjustment to many frames simultaneously.
There’s also a tool for helping animations appear smoother by “tweening.” This is helpful if you’re really pulling out all the stops to make an animation as perfect as possible, but to be honest I’ve never found it especially necessary for my fun and funky lo-fi animations. The Tween tool (found in the dropdown menu in the top right of the Animation palette) simply adds frames between two existing frames, and dissolves between them for a smoother, less jarring animation than the hard change from one frame to another.
Once you’re happy with the timing of your animation, it’s time to export. Photoshop’s Save For Web & Devices lets you save an animated GIF, and it allows you some control over the particulars from file size to compression and image quality. You can even create presets once you’ve found the perfect settings for your animations. At the top right of the window, choose GIF as the file type. The rest of the options have various affects on the image quality, and can vary from shot to shot. A few things I’ll suggest here. One, experiment. Since you can see the effect on the finished image in the preview pane to the left, you can be sure that you’ve chosen the best options for outputting the best quality at the smallest file size. That’s the catch with animated GIFs, just as it is with prepping any image for the web: you’ve got to define the balance between high quality and fast-loading, and it’s going to be different for every person and every application.
I also suggest checking the box to convert the color space of your GIF to sRGB. This is a web-safe profile that will help deliver color accuracy. The Lossy slider is a great way to get the file size down dramatically, thereby decreasing load time, without significantly impacting image quality. Again, you can see how compressed the image appears, and also track the file size and load time below the preview to the left. A Lossy adjustment of just 10 or 20 may not be visible to your eye, but it might cut the file size and load time in half. That tradeoff is definitely worth it.
Lastly, if you didn’t start with the right image size, this window gives you the opportunity to adjust the output size. Don’t upsize, but you can easily downsize here to fine-tune the size at which the animation will display.
When you think you’ve got it just right, you can actually click the Preview button to prompt your computer to open the animation in a browser window, with the pertinent settings displayed there for easy reference. Once everything looks good, simply choose Save, select the location and name as you would for any other file, and you’re finished. You can then view your animation by double-clicking the file to open it in your browser, or simply drag and drop it to your open browser window. Upload the GIF to almost any website and it should display perfectly, just like any other JPEG or GIF file—but with one obvious, and pretty dang fun, difference.