How To Make An Animated GIF For Your Next Email Marketing Campaign Using Photoshop

Photoshop Animated GIF for Email Marketing

We’re having an amazing time working with key client Closet52, an online dress store that we branded and built from the ground up for an established and well-known fashion company in New York. Their leadership is always working with us on collaborative ideas for the next campaign or strategy that we’re executing. As part of their implementation, we deployed Klaviyo for Shopify Plus. Klaviyo is a well-known marketing automation platform with very tight integration to Shopify as well as many Shopify Apps.

A favorite feature of mine is their A/B testing in Klaviyo. You can develop different versions of an email, and Klaviyo will send a sampling out, wait on a response, and then send the remaining subscribers the winning version – all automatically.

Our client subscribes to fashion emails in the industry and continued to remark how much they liked some emails with a slideshow of product photos. They asked if we could do that and I agreed and built a campaign with an A/B test where we sent one version with an animation of 4 products, and another with a single, beautiful, static image. The campaign is for a blowout sale of their fall dresses as they’re bringing on new product lines.

Version A: Animated GIF

dress animation 3

Version B: Static Image

RB66117 1990 LS7

The photo credit goes to the talented folks at Zeelum.

The campaign sampling is still running right now, but it’s pretty clear that the email with the animated graphic is far outperforming the static image… by about a 7% open rate… but an astounding 3 times the click-through rate (CTR)! I think the fact that the animated GIF put several different styles in front of the subscriber led to far more visitors.

How To Make An Animated GIF Using Photoshop

I’m not any kind of a pro with Photoshop. In fact, the only times I typically use Adobe Creative Cloud’s Photoshop are to remove backgrounds and to layer images, like placing a screenshot on top of a laptop or mobile device. However, I did some digging online and figured out how to make an animation. The user interface for this isn’t the easiest, but within 20 minutes and after reading some tutorials, I was able to knock it out.

Preparing our source images:

  • Dimensions – Animated GIFs can be quite large, so I made sure to set my photoshop file dimensions up to exactly match our 600px wide email template width.
  • Compression – Our original images were high resolution and very high file size, so I resized them and compressed them with Kraken to JPGs with a much smaller file size.
  • Transitions – While you might be tempted to add animation tweens (eg. fading transition) between frames, that adds a lot of size to your file so I’d avoid doing that.

To build the animation in Photoshop:

  1. Create a new file with the dimensions that match the exact dimensions you are placing in your email template.
  2. Select Window > Timeline to enable the timeline view at the base of Photoshop.

Photoshop > Window > Timeline

  1. Add each image as a new layer within Photoshop.

Photoshop > Add Images As Layers

  1. Click Create Frame Animation in the Timeline Region.
  2. On the right hand-side of the Timeline region, select the hamburger menu and select Make Frames from Layers.

Photoshop > Timeline > Make Frames from Layers

  1. Within the Timeline region, you can drag the frames into the order that you’d like the images to appear in.
  2. Click on each frame where it says 0 sec, and select the time that you’d like that frame to display. I chose 2.0 seconds per frame.
  3. In the dropdown below the frames, select Forever to ensure the animation loops continously.
  4. Click the Play Button to preview your animation.
  5. Click File > Export > Save for Web (Legacy).

Photoshop > File > Export > Save for Web (Legacy)

  1. Select GIF from the options on the top left of the Export screen.
  2. If your images aren’t transparent, uncheck the Transparency option.
  3. Click Save and export your file.

photoshop export animated gif

That’s it! You now have the animated GIF to upload to your email platform.

Disclosure: Closet52 is a client of my firm, Highbridge. I am using affiliate links throughout this article for Adobe, Klaviyo, Kraken, and Shopify.