How To Create An Animated GIF in Adobe Photoshop

of 05
How To Create An Animated GIF in Adobe Photoshop

The Save For Web dialog box from Photoshop is shown
Who would have thought Photoshop was a great tool for creating Animated GIFs?.

It has always struck me as bit odd, in today’s environment of high bandwidth and ubiquitous devices, that the lowly Animated GIF is undergoing a renaissance of sorts. You see them everywhere: Twitter, Facebook, Web pages, digital magazines and practically anywhere else there is a screen. In fact there are now web sites dedicated to featuring these things.

Which leads me to the inevitable question “”How do you create an Animated GIF?”

In this How To I am going to show one method and, along the way, point out some important things to keep in mind when you feel the urge to post that cute video of your kitten getting into trouble.

Let’s get started

of 05
How To Prepare To Create An Animated GIF

The Adobe Media Encoder interface is shown
You can use video editing software to bring your video to a more manageable size and duration.

The assumption I am going to make is you have shot a video and now want to put it up on the web as an Animated GIF.

The first thing you need to know is your video is both physically too large and too long. Most videos have a 16:9 aspect ratio and are 1280 pixels wide and 720 pixels high. Animated GIFs should be about 400 pixels wide. Also your cat was so cute that the video is 20 seconds long. Most Animated GIFs have a duration of no more than 2 seconds.

Though you can use Photoshop’s Timeline - the next step in this Hpw To - to make these changes, I usually break out my video software to change the output size and set the In and Out points  to trim the video to a more manageable duration. In the above image I am using the Adobe Media Encoder CC 2014 to trim a shot of traffic in Seoul, South Korea, to 1.5 seconds and changing the with to 400 pixels. From there I can output it either as an mp4 or a QuickTime video.

of 05
How To Import, Trim and Resize A Video In Photoshop

The Photoshop timeline panel is highlighted
There is a lot you can do, including Looping, using the Photoshop timeline panel.

Not everybody has access to a video editor and Photoshop’s Timeline panel is great for simple edits.

The first thing you do is open the video in Photoshop. The video will be placed on the timeline and you can use the End Of Work Area slider to set the duration. Next you simply drag the video timeline to the time just set.

If the video’s dimensions are too large, select Image>Image Size and change the width value. If you are doing this, choose to keep things sharp in the image. Click OK to accept the change.

If you wish to preview your video, click the Playback options – it looks like a gear – and select Loop Playback from the popdown. Click the play button.

of 05
How To Create An Animated GIF In Adobe Photoshop

The Save For Web dialog box in Photoshop is shown.
Use the Save For Web dialog box to create the GIF and to set the looping options.

Now that you are happy with the video's physical dimensions and how the video loops, it is time to create the Animated GIF.

The first thing you need to do is select File > Save For Web. This will open the Save For Web dialog box. Next select GIF 128 Dithered from the Preset pop down. Dithering is the process of combining two differently colored pixels to give the illusion of a third color. That’s the good news. The bad news is it tends to increase file size and often introduces a grainy pattern into the image. We’ll deal with this later.

Other things to note are the file size, which is currently 1.8 mb.  Over on the other side of the dialog box are the  playback controls and you are shown the number of frames in the animation.  You can also set how the animation loops by selecting a value from the Looping Options pop down. In the case of this file, I chose Other and set the loop count to 3 times.

of 05
How To Optimize A GIF Animation In Adobe Photoshop

Animatted GIF with reduced GIF color palette is shown
The amount and type of colour found in the Animated GIF has an impact on final file size.

Obviously we need to really reduce the file size. The first approach is to reduce the number of colors in the Animation by selecting 64 from the Colors pop down. The file size drops from 1.8 mb to 1.5 mb. The question is: Is the Quality affected with the drop in file size. This is where choosing a color palette has an impact. You have four choices in the pop down:

  • Perceptual: Only colors the eye can see.
  • Selective:  This is the default. It is similar to Perceptual but the difference is the use of broad color areas and the preservation of Web colors.
  • Adaptive: The table is constructed from the colors in the image.
  • Restrictive: This uses the standard 216 Web Safe colors and no dithering is applied.

In the case of this animation there was banding in the sky which disappeared when I selected the Adaptive option. The down side is the file size went up to 1.7 mb.

As I pointed out earlier Dithering increases files size. In this instance I reduced the Dithering amount from 88% to 35% and the file size dropped to 1.4 mb.

Another way of reducing file size is to apply a Web Snap value. Web snapping moves colors to their Web Safe equivalent. The higher the value, the lower the file size until you reach the point where all color in the palette is shifted to web colors. Not a good option. In this instance I applied 36% to the Web Snap area. The result was four colours- the ones with dots in the palette – that were moved to web colors .

The final choice is to apply Lossy compression to the images in the GIF Animation. I chose a value of 25% and the file size dropped to under 1 mb which is about half of what I started with.

From here you click the Save button to create the Animated GIF.