The Internet is full of images. These are a great way to capture attention and convey information. Adding motion to images can provide even more information and keep people interested. Video clips are great, but downloads can become tedious with longer videos at higher quality. The animated GIF is a great option if we wish to demonstrate motion with a relatively small number of frames, for example a sequence of several still images. The animated gif provides relatively small file sizes while maintining good image quality so download times are quite short. We are going to go through the steps for making an animated GIF using an older version of Adobe Photoshop, the CS5 edition, – it’s what I currently have available and it does the job just fine. Other versions of Photoshop will follow similar steps, tools may move around the interface, but they should work with a bit of experimentation.

Summary for those who don’t need the details:

  • open Photoshop
  • load the image files: Scripts -> Load Files into Stack…
  • in the ANIMATION (FRAMES) window -> Make Frames from Layers
  • set the display time in the ANIMATION (FRAMES) window
  • preview the animation with the VCR controls on the ANIMATION (FRAMES) window
  • reverse the order of frames if necessary
  • save the animation: File -> “Save for Web & Devices…”
    • set GIF options – click Save
  • done

The Details

We are going to animate the dragging of the fill handle in Microsoft Excel. The fill handle is the small green square located in the lower right corner of the selected range in Fig. 1. We can drag that handle and Excel will infer simple patterns and fill in the cells that we drag over. The animation will demonstrate the fill handle moving to the right, one column at a time.

Fig. 1: The Microsoft Excel Fill Handle

Seven frames were saved by dragging the fill handle from columns B to H and taking a screenshot of the result at each column. The excellent image viewer/editor Irfanview  by Irfan Skiljan, was used to crop the images in batch mode, selecting the desired section and ensuring that the images are all the same size. In this case, all the resulting images have a resolution of 766 pixels wide and 208 pixels tall.

Open Adobe Photoshop and create a new image with the size that you want, the size of the images you wish to animate – under the File menu, click on New to get the new Photoshop document panel shown in Fig. 2. Enter the width and height of the images  in pixels – in this case, 766 and 208 pixels. There are other measurement options, but pixels are easy to understand for this application – if the units aren’t pixels, click on the downward arrow on the right side of the units box and click on “pixels” to select that option.

Fig. 2: New Photoshop Document

Leave the other default settings unless you have a reason to change something, and click “OK”. One way to find the dimensions of the images in Windows is to right-click on the image file, select Properties, and look at the Details tab. The Image section contains the dimensions in pixels as shown in Fig. 3.

Fig. 3: Windows Image Properties

We have a blank document in Photoshop sized for our animation frames. Now we need the Animation panel if it isn’t already open. To make the Animation panel visible, select the Window tab and click on Animation to show the ANIMATION (FRAMES) window.

Fig. 4: Photoshop Animation Panel

Import the frames for the animation into Photoshop as layers: under the File menu, click on Scripts and Load Files into Stack…

Fig. 5: Photoshop Load Files into Stack… Command

Browse to the folder containing the images and select the ones you want for your animation and click OK to start the import. Each image file becomes a layer as shown in the Layers panel of Fig. 6.

Fig. 6: Imported Layers in Photoshop

These image layers aren’t available to the Animation tool yet. In the upper right corner of the ANIMATION (FRAMES) window there is a dropdown menu – use this to turn the layers into frames for the animation. Select “Make Frames from Layers” as shown in Fig. 7.

Fig. 7: Make Frames Form Layers in Photoshop

The set of layers is copied into the Animation (Frames) panel as shown in Fig. 8. Note the key idea here is to treat each layer that we’ve added to Photoshop as an animation frame.

Fig. 8: Animation Frames in Photoshop

The display time for each frame can be adjusted with the time tool in the bottom right corner of each frame’s thumbnail in the Animation window. If each frame is to be displayed for the same length of time, select all the frames and set the display time using the time tool for any of the frames as shown in Fig. 9.

Fig. 9: Setting the Frame Display Time

The display time will be set for all the selected frames. In this case, 0.5 seconds is appropriate for all the frames. The VCR controls at the bottom of the Animation window allow you to preview what you’ve done so far. These frames play in reverse of the desired order so we use the drop-down in the upper right corner of the animation window and select “Reverse Frames” to get the result shown in Fig. 10.

Fig. 10: Order of Frames Reversed in Photoshop

The frames each show a display time of 0.5 seconds, and the frames are ordered from left to right in the order we want them to play. Note the word “Forever” in the bottom left left corner of the Animation panel; this indicates that the animation will loop without stopping. There are settings to have the animation stop after a given number of times, but for our purposes, Forever is the right choice.

We are now ready to save the animated gif, so under the File menu choose “Save for Web & Devices…” and choose the  desired options. I’ve already sized my frames so I
use the full frame size, 766×208 pixels for this example, along with setting 100% scaling and looping Forever. The default values can be left alone for now and changes can be made as the need arises. Click the “Save”, browse to the desired output folder and set the filename. The result in this example is shown in Fig. 11.

Fig. 11: Dragging the Fill Handle in Excel

In Fig. 11 we see the effect of dragging the fill handle, beginning with two cells in each row selected. Excel tries to discern a simple pattern and we can see the values change according to the different patterns for each row. These changes are easy to see in an animation, which can help with both faster and greater understanding.

Adobe Photoshop is a very powerful tool with many useful features and the ability to create animated gifs can be very helpful.