How To Make An Animated GIF For Your Subsequent Electronic mail Advertising Marketing campaign Utilizing Photoshop

News Author


We’re having a tremendous time working with key consumer Closet52, an on-line costume retailer that we branded and constructed from the bottom up for a longtime and well-known style firm in New York. Their management is all the time working with us on collaborative concepts for the subsequent marketing campaign or technique that we’re executing. As a part of their implementation, we deployed Klaviyo for Shopify Plus. Klaviyo is a well known advertising and marketing automation platform with very tight integration to Shopify in addition to many Shopify Apps.

A favourite characteristic of mine is their A/B testing in Klaviyo. You’ll be able to develop totally different variations of an e-mail, and Klaviyo will ship a sampling out, wait on a response, after which ship the remaining subscribers the successful model – all robotically.

Our consumer subscribes to style emails within the trade and continued to comment how a lot they preferred some emails with a slideshow of product photographs. They requested if we might try this and I agreed and constructed a marketing campaign with an A/B take a look at the place we despatched one model with an animation of 4 merchandise, and one other with a single, stunning, static picture. The marketing campaign is for a blowout sale of their fall clothes as they’re bringing on new product strains.

Model A: Animated GIF

dress animation 3

Model B: Static Picture

RB66117 1990 LS7

The picture credit score goes to the gifted people at Zeelum.

The marketing campaign sampling remains to be working proper now, but it surely’s fairly clear that the e-mail with the animated graphic is way outperforming the static picture… by about a 7% open price… however an astounding 3 occasions the click-through price (CTR)! I believe the truth that the animated GIF put a number of totally different kinds in entrance of the subscriber led to much more guests.

How To Make An Animated GIF Utilizing Photoshop

I’m not any variety of a professional with Photoshop. In actual fact, the one occasions I sometimes use Adobe Artistic Cloud’s Photoshop are to take away backgrounds and to layer photos, like putting a screenshot on high of a laptop computer or cellular machine. Nevertheless, I did some digging on-line and discovered make an animation. The consumer interface for this isn’t the simplest, however inside 20 minutes and after studying some tutorials, I used to be in a position to knock it out.

Making ready our supply photos:

  • Dimensions – Animated GIFs might be fairly giant, so I made certain to set my photoshop file dimensions as much as precisely match our 600px extensive e-mail template width.
  • Compression – Our unique photos had been excessive decision and really excessive file dimension, so I resized them and compressed them with Kraken to JPGs with a a lot smaller file dimension.
  • Transitions – Whilst you could be tempted so as to add animation tweens (eg. fading transition) between frames, that provides lots of dimension to your file so I’d keep away from doing that.

To construct the animation in Photoshop:

  1. Create a brand new file with the size that match the precise dimensions you’re putting in your e-mail template.
  2. Choose Window > Timeline to allow the timeline view on the base of Photoshop.
Photoshop > Window > Timeline
  1. Add every picture as a brand new layer inside Photoshop.
Photoshop > Add Images As Layers
  1. Click on Create Body Animation within the Timeline Area.
  2. On the best hand-side of the Timeline area, choose the hamburger menu and choose Make Frames from Layers.
Photoshop > Timeline > Make Frames from Layers
  1. Throughout the Timeline area, you’ll be able to drag the frames into the order that you just’d like the pictures to seem in.
  2. Click on on every body the place it says 0 sec, and choose the time that you just’d like that body to show. I selected 2.0 seconds per body.
  3. Within the dropdown beneath the frames, choose Ceaselessly to make sure the animation loops continously.
  4. Click on the Play Button to preview your animation.
  5. Click on File > Export > Save for Net (Legacy).
Photoshop > File > Export > Save for Web (Legacy)
  1. Choose GIF from the choices on the highest left of the Export display.
  2. In case your photos aren’t clear, uncheck the Transparency choice.
  3. Click on Save and export your file.
photoshop export animated gif

That’s it! You now have the animated GIF to add to your e-mail platform.

Disclosure: Closet52 is a consumer of my agency, Highbridge. I’m utilizing affiliate hyperlinks all through this text for Adobe, Klaviyo, Kraken, and Shopify.