image

A Comprehensive Guide to Animated GIFs for Brands

Unless you’ve been living under a rock, you’ve probably heard and/or seen for yourself that animated GIFs are on the rise. From social media to blogs and websites, GIFs can be found everywhere on the web.

Why would your brand want to start using GIFs? According to The i.d.e.a. Brand, you can “Say more than a picture with less time than a video. If a picture is worth a thousand words, than a GIF is worth a million. Videos are a great tool, but can cause hurdles due to time constraints and users’ attention span. An animated GIF is a happy medium between a single photo or graphic and a longer (and costlier) marketing video.”

Whether you need to know what an animated GIF is, see examples of how you can incorporate GIFs into your marketing strategy, or learn how to make your own GIFs, this guide has it all! So read on to learn the ins and outs of animated GIFs and start using GIFs in your content strategy today!

What is a GIF?

First things first, what the heck is a GIF? Well, this:

k2-karate-kick

GIF stands for Graphics Interchange Format and GIFs are an image file format largely used for short video clips. GIFs consist of several frames, each frame consisting of a still image. Using time delays, the images are shown in consecutive order to create a short animation.

GIFs were first developed in 1987 by CompuServe, so they’re not a new format by any means. However, GIFs lost a lot of their appeal and popularity after the rise of Web 2.0.

Now, with new social networks and possibilities available GIFs are back in the forefront of the web.

When to Use GIFs

Some of the most popular social networks like Facebook and Twitter don’t have GIF functionality, but there are still plenty of ways that your brand can use GIFs in your marketing.

For starters, Tumblr, Google+, and Reddit all support animated GIFs. You can use GIFs on these social networks to interact with your community, engage with your readers, and to create posts that are highly shareable. GIFs are particularly popular on Tumblr and Reddit where users often save and share GIFs repeatedly as reaction images.

The possibilities for GIFs don’t end with social media. You can use GIFs in your email marketing, on your website, in your blog posts, and on landing pages. The possibilities are endless!

Examples of Brands Using GIFs

Hubspot’s Guide to Using GIFs includes some great examples of brands using animated GIFs, but they left out some of our favorites like…

Denny’s

If there’s any brand that knows their way around an animated GIF, it’s Denny’s. Denny’s uses crazy GIFs pretty regularly on their Tumblr, which I’ve also written about in my blog post about brands using Tumblr. Their GIFs range from bacon as nunchucks, and breakfast food floating in space, to sharks trying to get at breakfast food in a cage, as pictured below.

denny's-shark-gif

Something ridiculous and off the wall like that is a great fit in the Tumblr community. Denny’s doesn’t only create GIFs based on whatever weird ideas they have themselves. They also engage with their fans by asking them to submit ideas for wacky GIFs, and then Denny’s makes their fans’ dreams come true by creating their requested GIFs. They call it BYO GIF. In the following example their fan requested happy ducks sharing mozzarella sticks.

denny's-byo-gif

The Purge

Tumblr isn’t only a place for craziness, it’s also a place for art. Something creative and visually stunning like the following GIF for the movie The Purge will be a huge hit.

the-purge-gif-set

In fact, The Purge won a Shorty Award this year for their animated GIFs. By posting this extremely engaging GIF set and others like it on Tumblr combined with the hashtag #SurviveTheNight, The Purge was able to generate tons of buzz not only on Tumblr, but on Facebook, Twitter, and Instagram as well.

Dogfish Head Craft Brewery

In an article for The New York Times Blog Dogfish Head Craft Brewery provided an inside look at their brewing process using beautiful cinemagraphs made by Kevin Burg and Jamie Beck.

dogfish-head-cinemagraphs

Cinemagraphs are a form of GIF in which the majority of the image is still, but a subtle portion of the image moves repeatedly. These stunning images are an excellent, captivating way to engage with your audience.

How to Make GIFs

Now that you know all about GIFs and how to use them, you probably want to know how to make your own, right? If you’re not Photoshop-literate, the task can seem pretty daunting. But don’t worry! There are plenty of GIF generators online that are easy to use. Take a swing at Imgflip, Picasion, or GifBoom if Photoshop isn’t your thing.

If Photoshop is your thing, then keep reading! I’ll walk you through a few different ways to make your very own GIFs using Photoshop CS6.

How to Make GIFs by Importing Video Files

The first way to make GIFs using Photoshop is by importing video files. Do you have a cool commercial, a wacky product video, or even something funny caught on security camera footage? You can turn any of those videos that you already have into animated GIFs to get twice the social media mileage out of one video!

Let’s say I want to make a GIF of the scene where Joe and Patrick fist bump in our Pedometer product video, like so:

super-hero-fist-bump

1. In order to get started, first go to File>Import>Video Frames to Layers.

import

2. When prompted, select the video you want to GIF-i-fy, and click “Open.”

open-video

3. When the next menu pops up check the boxes for “Selected Range Only,” “Limit to Every 2 Frames,” and “Make Frame Animation.”

On that same screen, use the sliders under the preview of your video to both view and trim the part you want to turn into a GIF. The bottom sliders should be used like bookends around your selected range. When you’re pleased with your trimmed selection, hit “OK.”

import-options-2

NOTE: It’s okay if the range you select includes a couple of extra frames, as you can always delete them once your file is opened in Photoshop!

4. When your GIF first opens in Photoshop, it is going to be HUGE. Most websites and platforms have a file size limit for GIFs, so we’ll need to resize our image.

Since QLP mainly uses GIFs on our Tumblr page, I always resize based on Tumblr’s limits, which are a maximum of 500px wide and 1MB file size.

To resize your GIF go to Image>Image size, and then change the width to 500px. Make sure you have the checkbox for “Constrain Proportions” checked to ensure your image is resizes proportionally. Then click “OK.”

image-size-2

5. If any of the frames you selected back in step 3 are not supposed to be part of your GIF, now is the time to delete them. Using the Timeline window, which is the bar at the bottom of the screen displaying all of your frames, simply select the frames you want to delete, and then hit the trash can in the bottom right corner of the Timeline options.

delete-frames-2

To delete more than one frame at once, click on the first frame you want to delete, and then hold down shift while you click on the last frame you want to delete. This will select all of the frames in between so that you can delete multiple frames at once. Then click the trash can.

6. In order to make your GIF loop over and over, make sure you use the dropdown loop menu in Timeline to set the loop at “Forever.”

timeline-buttons

You can also use the triangle play button in the Timeline menu to preview your GIF. The play button turns into a stop button after you hit play.

7. When you preview your GIF, you may find that it moves too fast or slow. You can adjust the speed by changing the frame delay. You can choose to adjust the delay on every frame, or each frame individually depending on how many frames you select in the Timeline. Once you’ve selected the frames click on any one of the small arrows at the bottom of each frame.

frame-rate-2

The higher the number, the slower your animation will be. The fastest default option available is 0.1 seconds, but you can enter a faster speed by selecting “Other…” in that menu. When you select “Other…” this menu pops up:

set frame delay

For this GIF I used a delay of 0.05 seconds, but your animation may vary depending on how many frames you have. Once you type in your delay, click “OK.”

8. The next steps are to optimize your GIF before you save. To start, go to File>Save for Web.

save-for-web

Once you click “Save for Web,” the following menu will pop up.

save-for-web-default

First you have to select “GIF” from the dropdown menu of file types in the upper right-hand corner.

gif

Then the menu will change to look like this:

save-for-web-options-2

9. Since GIFs have a limited color palette, you can fill in some of the gaps using dithering. Set the dither by using the dropdown menus just below the file type. Change the first menu to “Selective” and the option just below that to “Diffusion.”

dither

The more dithering used in your GIF, the larger the file size will be, so it’s best to stay on the low side of the spectrum. You can adjust the dither by using the sliding bar pictured above. For more information on dithering and other ways to optimize your GIF check out this guide.

10. You can check your file size in the bottom left corner of the preview screen. You can also preview your animated GIF by clicking “Preview” in the bottom left corner of the Save for Web menu.

file-size

11. If your GIF still exceeds 1MB, or if you just want to decrease the file size more to improve load time and compatibility, there are a few other options that you can tinker with, the first of which is the number of colors. You can adjust the colors using the Colors dropdown menu.

256-colors

The more colors you use, the higher your image quality will be. However, with most GIFs you can decrease the file size dramatically and still have a high quality image by selecting 64 colors.

12.  Your last options for adjusting the file size are to increase the Lossy and Web Snap. Lossy is a form of compression which gets rid of some of the image’s information and reduces the file size. Web Snap connects (or snaps) some of the colors in your GIF to web-safe colors in order to prevent dithering in web browsers. The higher you go with each of these values the smaller your file size will be, but you can also lose some of the quality in your image by doing so.

lossy

13. Once you’ve previewed your GIF and are satisfied, go ahead and click “Save.”

How to Add Text to GIFs

If the video you want to use contains a funny or otherwise memorable quote, you might want to add text to your GIF. For example, let’s say I want to make a GIF of Kurt yelling “Woo! Yes!” from that same Pedometer product video, like so:

k2-woooo

1. Repeat steps 1-7 from the previous example.

2. Now let’s add some text! With the top or newest layer in the Layers panel selected, start by adding a new layer just above it by clicking the “Add New Layer” button at the bottom of the Layers panel.

new-layer

3. With your new layer selected, use the Type Tool (the button that looks like a capital T in the left toolbar) to add your desired text.

add-text

4. In order to make your text stand out, you may want to add a stroke, or outline, to the type. You can do so by right-clicking on your text layer, and then selecting “Blending Options.”

blending-options

Once the Layer Style panel pops up click the checkbox next to “Stroke” in the left column. On that menu you can change the size and color of the stroke. When you’re satisfied with how the stroke looks, hit “OK.”

stroke

5. Now you want to make sure your text shows up on every frame of your animation. Click on the small dropdown menu in the top right-hand corner of the Timeline panel and then select “New Layers Visible in All Frames.”

new-layers-visible-in-all-frames

6. You may have noticed that now even though your text shows up on every frame, the text on each frame doesn’t have the stroke you applied in step 4. You can fix this by selecting the button that says “fx” with a picture of a link on it just above the list of layers. With your text layer selected, click that button to unify the layer style across all of your frames.

unify-layer-style

7. Repeat steps 8-13 from the previous example to save your GIF.

How to Make GIFs Using Still Images

What if you want to make a GIF using a collage of still images like the Denny’s shark GIF above? Easy peasy! You’re just going to need some still images, and then you’ll use Photoshop’s layer visibility and tween tools to make your GIF. (Don’t worry, I’ll explain what all that means shortly!)

Let’s say I want to make a GIF of Bubba popping his head out of our Aztec Spooner Mug, like so:

bubba-in-a-mug

1. Start with placing all the pieces of your image in the Layers panel. In this case, I used File>Place to place each of the pieces I needed (the front of the bug, the back of the mug, and Bubba) into separate layers in my document.

layers

2. Now we need to convert the layers to animation. First, if the Timeline window is not visible, you’re going to need that. Go to Window>Timeline to add the Timeline window to your workspace.

timeline

Now, using the dropdown menu currently displayed on the Timeline panel, select “Create Frame Animation.”

create-frame-animation

Now you should have one frame in the timeline.

first frame

3. Create a new frame by clicking the “Duplicate Layer” button in the Timeline menu.

duplicate-layer

4. In your new frame, use the layers to create the next point in your animation. For my example, my next frame consisted of Bubba sticking all the way out of the mug. Since this is a new frame, I was able to move the “Bubba” layer without affecting the previous frame.

second-layer

5. In order to create the steps between point A and point B, we’ll use the Tween feature. Use the dropdown menu in the top right corner of the Timeline window to select “Tween.”

tween

Set the number of steps between the two frames by adding frames in the Tween menu. For this animation, 5 is a good number, but you want to add more or use less depending on what you’re making!

tween-options

After you hit “OK” 5 more frames will be added to the Timeline.

6. I used the Tween feature once more to get Bubba back inside the mug so that the animation would be nice and smooth. Just add another frame for the next point in the animation like you did in step 3 (this time with Bubba back in the mug), and then tween it with the previous frame.

7. In the last frame I made Bubba disappear altogether by turning off the visibility of the “Bubba” layer in the last frame by clicking on the little eyeball next to the layer.

layer-visibility

9. You can adjust the speed of your GIF using step 7 from the first example.

10. Repeat steps 8-13 from the first example to save your GIF.

Go Forth and GIF!

Well grasshoppers, you have been bestowed with all the knowledge you need to start using animated GIFs right now – well, as soon as you’re done reading this post, which will be soon, I promise! With your newfound skills, you’re ready to go full speed ahead and start GIF-i-fying your brand!

What do you think? Have you used animated GIFs in your marketing? Will you be using GIFs in the future? What are some other examples of brands using GIFs? Sound off in the comments below!

Expand Your Brand!



Jenna Markowski

Jenna has a much easier time writing about the media and pop culture than she does writing about herself. She enjoys the simple things in life, like puns and typography. She is an avid fan of pop-punk, Halo 3, Spider-Man and origami, with a slight Taco Bell obsession. Her spirit animal is either a bulldog or a panda bear. You can also connect with Jenna on Google+ and Twitter.

Comments

  1. Chase

    This is super helpful! Thanks Jenna! I have always wanted to learn this!!!

  2. Kurt Vor Broker

    Super awesome Jenna! This is a super helpful Blog. Well done! I hope our readers really appreciate what great guide this is for making sweet .gifs.

  3. Jay Hoffman

    I’ll have to read this later. However, I did learn that Kurt 2 has the athletic prowess of a young Bo Jackson.

  4. AG (A.K.A. Myrtle)

    I have to say the athletic ability shown by Kurt2 is nothing less than stunning. Through the magic of computers he’s able to flying-bird-kick his way into every viewer’s heart for years to come. Let’s hear it for the makers of Photoshop and for the media team members (Jenna Markowski, HOLLA! ) for sharing these juicy morsels of educational goodness :) LOVE!

  5. Greg

    WOW! Great blog! Very informative. The step by step instruction is great.You guys know your stuff!!

  6. Rondell Caraos

    Wow… that is awesome Step by Step information! Since I’m not that savvy on the computer, this will total help me out since I always wondered how people do it! I will probably have to read this blog a few times to finally get it but it looks pretty easy! I can’t wait to try it!

  7. Kat

    This is VERY interesting and informative. I’ve seen a lot of GIFs lately, mostly on articles shared on Facebook. But to see and learn HOW they are created is awesome!

  8. Kelly Bird

    You’ve just opened up a whole new world for me Jenna! As a graphic designer I’m very familiar with Photoshop from a graphics/photography standpoint but have never animated my photos/drawings. I can’t wait to use your tutorial and see what kind of magic I can create. I may never have a motionless creation again! :)

    • Jenna Markowski

      That’s great to hear, Kelly! I hope you find these tutorials helpful and create some awesome stuff!

  9. Doc

    Wow!! I had no idea what went into creating something like that. Pretty cool! These are also great for marketing. Especially when you see a funny GIF go viral.

  10. Serenity

    This was super helpful! I too always wondered how to do this. I do think that there needs to be many more QLP, Bubba, promo video GIFs. Kurt and Joe are hilarious! I also still wonder is it pronounced GIF as in GIFT or jif as in choosey moms choose jif? :)

    • Jenna Markowski

      Thanks, Sam! I’ve been trying to make more QLP GIFs, so stay tuned!

      Technically the creator of GIFs came out and said it’s pronounced “jif,” but I don’t like it that way so I still pronounce it like “gift.” I think either one works!

  11. Chase

    Jenna, This is awesome, thanks! If we are going to use still images is there a way that we just reverse the images to also make the gif more forward and then backward? For example: If I only had the images of me throwing a pen up in the air. Could I use the same images in reverse and then loop it to make it look like it goes up and then back down, and then loop forever?

    • Jenna Markowski

      Thanks, Chase!

      I think that would totally work. In fact, that’s a smart idea to make the animation look more smooth and natural. Go for it!

  12. Keith

    Awesome! I can get lost for hours looking at GIFs. They are hilarious and also clever for promotion if used that right way. Now, thanks to you, I know how to do one as well. Great post Jenna!

  13. Julie

    Apparently the “Gif or Jif” debate was “settled” by the creator:
    http://www.cnn.com/2013/05/22/tech/web/pronounce-gif/

    Unfortunately the internet still thinks he is wrong :)

    • Mandy Kilinskis

      That’s because he is wrong. gifs are not supposed to sound like a peanut butter brand. End of story.

  14. Erik

    I had no idea this much work went into creating a GIF, but now I can look like a pro at making GIFs thanks to your blog post, Jenna. This is pretty awesome. And who knew this stuff was around in 1987! I want to see some super cool TRON GIF’s. Maybe I’ll create some of my own now that I know how to. Sweet!!

  15. David

    I’ve always wondered what was involved in making a .gif. Though it doesn’t sound easy by any means, it’s not as complicated as I would have imagined. Even though I’m fairly computer-dense, I bet I could follow your guide to make my own. Thank you for the how-to Jenna!

    Now….if only we could imprint gifs on coffee mugs…..

  16. Mandy Kilinskis

    What an excellent resource, Jenna! It was great to learn how to make standard .gifs, but now I want to make the other ones you outlined in the post. Text gifs forever!

  17. Michael Wenger

    This seems TOTALLY easy to do. The last time I went through this many instructions was on a baby swing. That thing is STILL not right! Thank goodness we have some amazing peeps here at QLP that do all of the animations. Without them, we’d be so flat! … it also goes to show you, how much work goes into all the stuff we do round ‘her! Woooooooo YES!

Leave a Comment

Copyright 2003 - 2014 Quality Logo Products, Inc., Registration No. TX7-524-201. All Rights Reserved.