Sooner or later, those who surf the Internet will inevitably come across animated GIF images. These are several individual images that are displayed quickly one after the other to give the impression that the image content is moving. The GIF format is therefore a mixture of image and video.
Marketers like to use GIF images because they can communicate content in a way that is easy to understand, arouse readers’ interest, and elicit a strong emotional response. These emotions then prompt readers, for example, to share a contribution. It is therefore worth taking a closer look at GIFs, especially as they are relatively easy to create. In Photoshop, for example, you only need a few minutes.
More than 195 free design templates for visual marketing – download here and use for social media, infographics and email.
The following tutorial refers to the Photoshop version Creative Cloud 2015. In other versions, the steps shown may differ slightly, but should be similar in general.
To create animated GIFs in Photoshop
For example, an animated GIF image could look like this:
Step 1: Load your images into Photoshop
If you have already created an image series, proceed as follows:
Save the photos for your GIF image in a separate folder. Then upload the images to Photoshop: Click “File” > “Scripts” > “Batch files…”. Click Browse…, then select the files you want to use for the GIF. Click OK.
Photoshop will then create a layer for each image. Continue with step 2.
If you haven’t created a series yet, create a separate Photoshop layer for each frame of the animated GIF file. To do this, click on “Layer” > “New” > “Layer”.
Make sure to name the layers. Otherwise, you may find the assignment difficult when creating the GIF. To name a layer, open the Layers panel (bottom right). Double-click on the default name and change it to the desired name. Confirm the change by pressing “Enter”.
When you have created and named all layers according to this scheme, proceed to step 2.
Bonus Tip: You can also combine several layers into one, which will later be a frame of the GIF animation. To do this, you must first show the individual layers: One eye is displayed to the left of the layer names. Click on the eye next to each layer you want to include in the frame so that it appears as open. Then press Shift + Command + E (Mac) or Shift + Ctrl + E (Windows). Photoshop then merges all selected layers into one new layer. (Don’t forget to name the new layer.)
Step 2: Open the Timeline Window
To do this, click on “Window” > “Timeline” in the menu bar at the top. The timeline allows you to temporarily show and hide the different layers so that individual images become a GIF animation.
Step 3: In the Timeline window, select Create Frame Animation.
If the option is not already enabled automatically, click the down arrow to open the drop-down menu and select the option. Then click the button itself.
Step 4: Create a new layer for each new frame
To do this, select “Selection” > “All levels” from the menu bar at the top.
Click on the menu icon at the top right of the Timeline window and select “Create a new layer for each new frame” from the drop-down menu that now appears.
Step 5: Open the same drop-down menu again and select the option “Create frames from layers”.
This converts each layer into one frame for the GIF animation.
Step 6: Specify how long each frame should be displayed
Open the selection menu at the bottom of the frame and select the desired fade-in time. In this example, the frames are displayed for 0.08 seconds each.
Step 7: Select how often the animation should be repeated
The toolbar at the bottom of the window offers you various options, from “Once” to “Unlimited”. By default, one-time playback is enabled. If you click on “Other…”, you can enter any number of repetitions.
Step 8: Click “Play” to preview the GIF animation.
Step 9: Save and Export the GIF File
If you are satisfied with the result, save the file as follows for use on the Web: From the menu bar at the top, choose File > Export > Save for Web (Legacy)….
Then select the desired GIF file type from the “Default” drop-down menu. If the visual contains gradients, select one of the GIF options with Dithering to avoid color changes. If the image consists of many clearly defined color areas, one of the options without dithering is recommended.
The number next to the GIF file indicates its color size and accuracy compared to the original JPEG or PNG files. According to Adobe, the higher the dithering percentage, the greater the color accuracy and detail, but the larger the file.
Click Save to save the file to your computer for future use in your marketing.
The GIF file can easily be put online instead of a single image – wherever images are supported, playing GIFs is no problem. And that’s how your GIF file might look:
How to use GIFs in your marketing
As already mentioned, digital marketing offers many possibilities for the use of GIF animations. However, there is one thing you should always keep in mind: Don’t overdo it. Animated GIFs are excellent eye-catchers, but they can also be overwhelming for your visitors and recipients if you bombard them with too many GIFs.
In social media contributions
The first social network to support GIF files was Pinterest. Next was Twitter and in mid-2015, Facebook caught up. Later, Instagram introduced the Boomerang app, which allowed users to create their own GIF images and then share them with others. On each of these social platforms, GIFs are a great way to stand out from the crowd.
For example, you could follow the example of Product Hunt, which promoted a forum on its website with this GIF animation:
In e-mails
A GIF can be inserted and displayed in an e-mail in the same way as a single image. So you can easily replace your images with GIF animations and make your emails more dynamic in no time at all.
New features like these don’t just help you get recipients interested. They can also have a positive impact on your bottom line. In fact, some companies have managed to increase sales of GIFs in their email by as much as 109%.
For example, you can use GIF animations to showcase your products, announce events, or draw your readers’ attention to other content. The women’s fashion brand Anne Taylor LOFT, for example, once advertised with the following GIF. The shaky gift was designed to make the viewer curious and click on the “Pack Me Out” button.