Skip to main content

Creating an Animated Slideshow GIF for Use in Email

Written by Jason Herzog on . Posted in , , .

We’ve been using animated GIFs in email marketing for over a decade. It’s still an easy way to stand out a little and provide some movement in the otherwise static medium of email. There are virtually no drawbacks to using GIFs, other than the short amount of time it takes to create them. They’re compatible with just about every email client out there, and for users of Outlook 2005, they fail gracefully and simply show the first frame of animation.

Here, we’ll show you how to create a simple slideshow of four header images using Photoshop.

Create a file with four photos in four layers:
Screen Shot 2018 03 08 at 4.16.01 PM

Bring up the Timeline palette by clicking on Window > Timeline, and then create 3 more animation frames by clicking on the little “Page” icon in the Timeline palette:
Screen Shot 2018 03 08 at 4.19.56 PM
Screen Shot 2018 03 08 at 4.21.48 PM

Select the first frame in the Timeline and then “hide” all of the layers in the Layers palette:
Screen Shot 2018 03 08 at 4.26.09 PM

Select the second frame in the Timeline and then “un-hide” Layer 2 in the Layers palette:
Screen Shot 2018 03 08 at 4.27.53 PM

Do the same thing with Layers 3 and 4, so that each frame in the Timeline corresponds with a Layer in the Layers palette. Then change the Frame Delay from “0 sec.” to “2.5 sec” by clicking on the tiny triangle and selecting Other and entering “2.5”:
Screen Shot 2018 03 08 at 4.31.38 PM

You should also change your Loop from “once” to “forever” (unless you want to end the animation on a specific frame):
Screen Shot 2018 03 08 at 4.34.01 PM

You can test the animation with the Play button (right-pointing triangle). To finally save the file, click on File > Save for Web:
Screen Shot 2018 03 08 at 4.37.09 PM

From the Save for Web dialog, select “GIF” as the image type, then click “save”:
Screen Shot 2018 03 08 at 4.39.06 PM

You can then upload the image to Tourism Engine and treat it the same as if it were a JPG or PNG file. We’re going to use this one in the header section of an email. Here’s the result:
seaside animation

Note: Animated GIFs are limited to 256 colors. If your animated GIF looks too “grainy”, then you can reduce the number of animation frames, or use images that have more similar colors, fewer colors, or less color variation.

Pro-Protip: Transparent colors don’t add to the filesize, so feel free to use layer transparency in your animations.

Here’s something fun that Bobby created for his personal website:
super mario footer background