A Guide to Using Animated GIFs in an Email

penguingifimgThe day after Thanksgiving, a close friend of mine forwarded me an email blast from Amazon that boasted their “Black Friday Deals Week.” Knowing I am a huge geek, she forwarded me the email not because she wanted me to be in on the special, but because of the way the email was designed. Instead of a standard HTML email, it contained an animated gif. For those of you who may not know, a GIF is a file which allows various images (frames) in the file to be painted with time delays. Think of the flipbooks you made when you were a kid. What? You didn’t make any flipbooks as a child? That’s so sad! Go grab a pack of post-its and a pencil, and let your imagination run wild! Need some inspiration? Here is what the GIF from Amazon looked like:

A Guide to Using Animated GIFs in an Email
Above image courtesy of Amazon.

Within the next few days, another friend, Sonja Stein, forwarded me an email from Anthropologie. Again, a GIF.


Above image courtesy of Anthropologie.

That same week, our CEO, Arthur Cooper, asked me to design our holiday e-mail. In years past, our holiday greetings were simply images. Well, with all the GIFs I had seen in the past week, I knew I had to do something a bit different. In this article, I’ll discuss why you should include an animated GIF in an email, explain the process for creating an animated GIF, how to embed it into an email, and give some more examples of animated holiday fun.

Why You Should Include an Animated GIF

Here is a little challenge for you. Don’t touch your email for 24 hours. You can do it! This upcoming weekend is the perfect opportunity for it. When the 24 hours is up, return to your inbox and check to see how many emails you received during your vacation from technology. Question: how many of those were from large retail companies, like Amazon, Express, Victoria’s Secret, etc.? Probably quite a few. And while each email probably had some sort of great deal you may have been interested, you most likely skipped right through them on to your more important emails. Another question: how many of these emails contained animated GIFs? Probably none. But what if one of them did? Chances are you may not have skipped right past it. It may have caught your eye, and you may have even clicked through to the site that sent the email to learn more.

My friends, getting your users to open and interact with your HTML emails is not just half the battle, I would say it’s about 98% of the battle. We are bombarded everyday with emails commanding our attention. An animated GIF might help to set you apart from your competitors that are crowding your user’s inbox.

Now that I have convinced you to include a GIF, you are probably wondering how you can possibly use a GIF in a corporate email. Well, I have a couple ideas.

Idea 1: Showcase Your Products

An animated GIF doesn’t have to be a cartoon. You can use photos of your projects set to rotate at a slow speed to give your GIF a slideshow-like look. Perhaps you have a new product that comes in 27 new colors, instead of listing them, have them rotate in front of your user.

Idea 2: Demonstrate Steps

Do you have an awesome new product that does something to make your users life easier? Instead of listing bullet points of what your product does, use a GIF! Take a photo of each step and combine the photos into an animated GIF. A photo can speak a thousand words; a GIF can probably speak a million!

How to Create an Animated GIF

Before we get into specifics, I’d like to show you our final product, so you will be able to understand what we are trying to achieve.

Optimum7-GIF

Step 1: Decide On a Concept

As many of you may already know, Penguin was the code name for the algorithm update first announced on April 24, 2012. Playing on the idea that most spammy SEO companies fear penguins, I wanted to display that Optimum7 is not intimidated by Google’s updates. On the contrary, we respect and even befriend them. I discussed this idea with one of our fabulous copywriters, Lisa Sherman, and she came up with the message: “Unlike Google’s pet, our penguin is friendly and just wants to wish you Season’s Greetings from all of us here at Optimum7!” Just like that, our concept was born.

Step 2: Create the Still Images

How you create the image is entirely up to you. I used a combination of Adobe Illustrator and Photoshop for this project, but I have also created hand-drawn images and scanned the images into Photoshop. It really just depends on what your artistic strengths are and what kind of feel you’d like your animation to have.

For this project, I created a simple background as well as my happy little penguin in Adobe Illustrator.

Background

Penguin

I then imported both vectors into Photoshop, and named the file AnimatedGif.psd. The dimensions of my file are 612 pixels x 325pixels.

Photoshop-StillImages

Step 3: Create the Snow

The next step is to create the snow. I used a collection of PSD brushes that are available for download at Deviant Art.

Open a new Photoshop document that is much larger than “AnimatedGif.psd”. Name it “SnowBackground.psd”. Make the background blue or any other color you’d like, so you will be able to see your white snowflakes. Please note: you will eventually make this background layer invisible, so just the snowflakes will show.

Snow-Background

Create a new layer in SnowBackground.psd and name it “Snow”. Using your snowflake brushes, fill up the layer to your desired snowfall amount. Once you have sufficiently filled your layer up with snowflakes and other soft round brushes, right-click your “Snow” layer. Click “Duplicate Layer…” and make sure the destination is “AnimatedGif.psd”.

Move back to your original Photoshop document (AnimatedGif.psd). Align the new “Snow” layer diagonally as pictured below.

Diagonal-Snow

Open the Animation pane by clicking “Window” and then “Animation”. Your screen should look like this.

Window-Animation

On the animation (frames) panel, change the amount of time for the frame to 0.2 seconds.

Click the “New” button in the animation panel to duplicate the selected frame.

Move back to the layers panel and select the Snow layer. Holding the shift key, move the Snow layer diagonally to the left about 10 pixels or so. You can now see that the snow has moved in the second animation frame but not the first.

Diagonal-Snow-Move

Repeat this process of creating new frames and moving the snow layer as many times as you please. My animation has a total of 13 frames, but you can make your GIF as complex as you like.

When you have completed this step, you can press the play button to see your GIF in action. How fun is that?!

Step 4: Saving the GIF

The next step is to save the GIF. Go to File > Save For Web & Devices and make sure your settings look like this:

SaveTheGif

Once your settings are correct, press Save.

Step 5: Adding the GIF to an Email

You can send this file as an attachment and it will show up inside the email just fine. However, if your recipient would like to forward the email, it will not work properly. I suggest inserting into an HTML email. I recommend using an email service like MailChimp or CampaignMonitor if you are going to send the email to a large group. For a full, in-depth look at how to create HTML emails, please see one of my recent articles, A Beginner’s Guide to Designing HTML Email.

A Gift of Gifs!

Well now that you are an absolute pro when it comes to creating animated GIFs,
be sure to leave your GIF in the comments section, we’d love to see what you are working on!

March 27, 2013

Written by Bridget Farrell

Bridget Farrell is the designer, illustrator and artist in charge of creating and implementing clean, elegant web solutions for Optimum7 and their clients. Upon her graduation from Nova Southeastern University in Fort Lauderdale, FL, Bridget began to design professionally. Although she loves logo and print design, she feels that web design is where her true passion lies today. “I enjoy designing for the web because it’s truly the direction marketing is heading in. Most CEOs aren’t looking to order stationary for their companies; they want polished, well-developed websites- and this is where I come in.” Bridget has a constant thirst for knowledge and thrives on keeping current with all of the latest technology. She works with Photoshop, Illustrator, HTML, CSS, PHP, Javascript, MySQL, WordPress, Joomla and Volusion. A true nerd at heart, Bridget can often be found spending her nights and weekends reading, researching and occasionally practicing yoga.

This entry was posted in Web Design and tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

2 Comments

  1. mskinsey
    Posted July 4, 2013 at 4:37 pm | Permalink

    Well, I wrote my comment and then I hit “Post Comment” to send it without having filled in the other fields. That just goes to show you the extent of my tech acumen these days. LOL! In essence, I said the following:

    You are a doll! You make designing GIFs seem so easy that even an old geezer like me is tempted to try it! LOL! Thank you so much for the easy-to-understand tutorial on how to create GIFs. Now I know how all my scrapbooking compadres create theirs. It honestly looks easy-peasy!

    I’d love to see your designs pop up when I’m cruising for new stuff!

  2. Posted July 5, 2013 at 8:50 am | Permalink

    Thank you so much! I’m so glad you enjoyed the article, and even happier that you found it easy to follow. :)

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>