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:
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…
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.
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.
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.
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.
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:
1. In order to get started, first go to File>Import>Video Frames to Layers.
2. When prompted, select the video you want to GIF-i-fy, and click “Open.”
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.”
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.”
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.
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.”
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.
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:
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.
Once you click “Save for Web,” the following menu will pop up.
First you have to select “GIF” from the dropdown menu of file types in the upper right-hand corner.
Then the menu will change to look like this:
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.”
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.
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.
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.
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:
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.
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.
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.”
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.”
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.”
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.
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:
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.
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.
Now, using the dropdown menu currently displayed on the Timeline panel, select “Create Frame Animation.”
Now you should have one frame in the timeline.
3. Create a new frame by clicking the “Duplicate Layer” button in the Timeline menu.
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.
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.”
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!
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.
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!