Making a GIF: tools for animated graphics and short clips
If a picture is worth a 1.000 words, then what can be said for video clips? , perhaps for the very reason that they can quickly and precisely express what words struggle to. On social media platforms such as Facebook and Twitter, GIFs (graphics interchange format) are shared and liked , and on channels such as WhatsApp, Facebook Messenger, and Snapchat, memes are exchanged all the time. GIFs spruce up blog articles or attract attention as banner adverts, and are often included in newsletters for a bit of lighthearted humor.
The file format GIF is in fact older than the world wide web. In 1987, ISP CompuServe invented the practical graphic format. It can be used to save several images as one file. The format also compresses the file size of the saved images and supports a wide range of colors, and on top of that, a GIF takes up comparatively little space. For this reason, even less powerful computer software at the time was able to display the individual images as moving image sequences, since GIFs are pure image files and require little data storage compared to video formats.
With the commercial rise of the internet in the 1990s, GIFs enabled early web browsers to display animated images without freezing, and this paved the road to their success. Soon there was hardly any website that did not integrate a blinking font or similar animations. As internet connections got faster and social media platforms emerged, GIFs became a mass phenomenon, and the fact that mobile devices can store and load GIFs easily most likely contributed to their popularity.
The principle of a GIF can be found before digital images even existed – the flip book has provided entertainment for centuries, giving the illusion of fluid movement, even though each individual image is motionless. This is also the case when single images played back at high speeds. In this respect, a touch of nostalgia may even contribute to the popularity of today's GIFs. This also fits in with the pop-culture phenomenon of the digital remix and mashup culture, which combines existing, often older and very well-known content in a new way and creates something new from it.
The recipe for success for GIFs: catchy, short, and expressive
Why are GIFs so popular? There are different reasons for this. First and foremost, they convey a short and concise message. This makes the format particularly suitable for messages communicating a particular emotion on social media. Like an emoji, a GIF can express a feeling without having to use wordy descriptions, which may miss the mark.
In addition, many GIFs can make online communication very entertaining. Pleasing news, sweet holiday moments, ironic comments, or quick-witted jokes can be delivered or commented on using GIFs. This is much faster and easier than a longer text message, and a short animation is also often more expressive than a static image. With little effort, you can find a suitable animation in a GIF archive, or alternatively you can create your own GIF.
A film lasting minutes in the usual video format is usually too long for a casual chat and does not satisfy the requirements for the quick-fire communication on social media. In addition, video formats often require too much data volume for mobile internet use due to their file size. A GIF animation is comparatively short and requires only a small amount of data.
The above-mentioned features make GIFs a popular advertising tool for marketers: a short clip can be produced more cost-effectively and quickly as a GIF than as a video. GIFs embedded in blogs can relax the tone of an article or keep readers interested. Short videos or animated logos can also be used to convey brand messages in a visually appealing way, and similarly, GIFs can be used to promote a new product or service.
Those who maintain several social media channels can quickly fill them with interesting and easy to share content using GIFs. And if they are well done, the animations sometimes go viral and increase readership very quickly.
How to make a GIF
A funny moment in a popular series; an animated statistic; an animated company mascot: GIFs can be used in many ways. Cinemographs are a particularly artistic variation of GIFs: only individual details are animated, the rest of the picture is designed as still life. Almost all forms of GIFs generate attention and are therefore very well suited for product presentations in an online shop or banner advertising.
How much effort is required to create a GIF depends largely on whether you already have suitable images or whether you have to record a video or several images yourself. Special effects are great, but it takes more time to integrate them.
Most image editing programs offer at least the following features that are important for creating a GIF:
- Loop: Many tools allow you to set a repeat mode for image sequences. You can also specify the maximum number of repetitions.
- Insert text: Text provides additional information and ensures that the desired message reaches the reader. You can also set how long a single image with text is displayed for. For example, to highlight an image showing the moment of truth, the image sequence can be slowed down at this point. On the other hand, a quick picture change creates the feeling of speed.
- Frame rate adjustment: To keep the file size small, it is usually recommended to reduce the number of frames. Make sure, however, that your GIF does not appear to lag due to too few individual images.
- Slow motion: Most tools also offer this feature. They make movement sequences appear as if they were taking place in slow motion.
Whether online or locally on the computer, a few preparations will make your further work easier. Free image processing programs provide good service to make these preparations: Firstly, bring all the graphics files you want to use to a uniform size. Then compensate for color and contrast differences in images of different origins if necessary. Finally, save all images in GIF format. If you name the files and save them in the correct order, it's easier to keep track of them
Finding suitable footage
The first step in creating a GIF is to find suitable images. The easiest way is to recycle existing videos or photographs. The content of your GIF should fit its intended use and target group: For example, humorous clips on the company homepage of a tax consultant may seem misplaced. Within Facebook postings of a gaming magazine, however, they would be ideal.
Often it is not even necessary to create your own GIFs completely from scratch. You can also find finished GIFs from many online sources. You can download GIFs there or embed them on other platforms via links. However, this is often difficult for reasons of copyright restrictions. In principle, GIFs are treated in the same way as any other image that can be accessed on the internet. Those who do not have the corresponding image rights may not use or edit the image without permission. This is also true for GIFs of the popular archive Giphy, although it should be noted that the GIFs uploaded by Giphy users may not necessarily have fulfilled copyright requirements, and the personal rights of any individuals shown.
Not every GIF shared via social media or available in a GIF archive is in the public domain. If the image source is unknown, the copyright and usage rights are unclear. Illegal use and distribution can result in a warning and fines. Those who make a GIF themselves and use their own images for this purpose, however, avoid legal complications
Create GIFs online
There are a number of online tools you can use to create GIFs. Some of these programs are also available as mobile apps. This makes it possible to convert a video recorded with a smartphone directly into a GIF and send it via messenger service. Below are three tools that you can use to create GIFs online.
Giphy not only has a large GIF archive, but also offers a free program for creating GIFs. The browser-based application GIF MAKER can be called up via the menu item create. A registration is not necessary. To create an animated GIF, there are three options for the source:
- Several single images to create a slideshow
- A clip from your own video material
- A clip from video material from YouTube, Vimeo, or the Giphy archive
In just a few steps you can make a GIF from your images:
- GIF from photography, video, or video URL: Select one of the three options. You will then be prompted to upload a file or enter the link to the selected online video in a search slot.
- You can now use a slider to set the display duration of individual images or video sequences and, if necessary, add more images. The sequence can also be changed.
- Optionally, add a subtitle or special effects. You create these in the right-hand work area.
You can add text, stickers, as well as your own drawings and use a filter. To place the individual elements, simply drag them into the image area with the mouse.
- In a further step, you can add URLs and tags. You also determine whether you want to make your GIF available to the public or only for private use.
- The upload button is used to create the GIF. Afterwards it is possible to save the result on your own computer. If you have a Giphy account and have linked it to your social media accounts, you can share the GIF immediately. Alternatively, you can embed the GIF into a Facebook post or a Tweet by clicking on the link.
Giphy can also be used on the go and you can quickly convert pictures and videos taken on your smartphone into a GIF. The app GiphyCam is available for iPhone and Android. The mobile app works just as easily as the browser version. In addition, the app's recording function makes it easy to create a GIF from your own photos and videos. For example, burst mode automatically shoots five images and links them together. To create the illusion of movement, the sequence of images is transformed into a hyperlapse video.
The GIF generator Imgflip is available both as a free and a paid version (Imgflip Pro). The extended version has the advantage that there are no restrictions in terms of GIF size and duration. It also allows you to hide the watermark, which is automatically stamped on each Imgflip GIF.
Similar to Giphy, Imgflip offers three options: If you decide on a short clip or a sequence of images, simply click on the corresponding tabs. Use the upload button to upload the images from your device. To use footage from a URL, simply copy it into the video to GIF tab in the search slot and preview it – just note that video cannot exceed 25 MB. If you want to edit a larger file, you need the paid version Imgflip Pro.
Imgflip offers numerous features for editing and making GIFs:
- Delay (Images to GIF) or slider (video to GIF): This function allows you to set the display duration of individual images or video sequences. Simply adjust the slider to change the speed of the picture sequence. For videos, you also need to define a start and end point, which works via a timeline with sliders. If you use the free version, the GIF can only be 20 seconds long.
- Width and height: The width and height can be adjusted by specifying a pixel value. You can also use the crop GIF function to select a specific section of the image that will be used for the GIF.
- Quality (images to GIF): The image quality can be adjusted on a scale from 1 to 10. However, the best image quality (value 1) is associated with a high data size, so a medium value is usually the better choice.
- More options: Here you can make further refinements: This applies, for example, to the background color or the specification of a maximum number of frames per second.
- Add text to GIF: Whether subtitles or advertising slogans, this function allows you to add text.
- Auto arrangement: To change the image order, simply drag the image to the desired position with the mouse.
Pleased with the result? Then click on the button generate GIF. If you still want to make changes, you can return to image editing by clicking the change settings button. To save the finished GIF, download it by clicking the download image button.
The simplest of the three GIF making tools, gifmaker.org, has not got as many options as the other two – but this means that it is also the most straightforward. Ideal for those who wish to make GIFs with their own images, gifmaker.org allows you to upload up to 2.000 frames to create your GIF. It has resizing options, as well as speed and frame ordering options, but other than that it’s pretty much just uploading your images and allowing the program to compress the files into a moving sequence.
- Click on upload images. This opens a standard dialog box allowing you to select your images from your device. Note: the images must be saved on your device, and cannot be sourced from a URL.
- Once the program has uploaded your files, it will automatically create a moving GIF which can be seen in the preview box. You can then use the sliders to determine how large the images are, and to determine how quickly the sequence moves from one image to the next.
- You can also manually adjust each value for animation speed and image size in the boxes below the sliders. Furthermore, if you want to keep one image, or a sequence of a few images longer than the others, you can manually adjust their frame speeds in the boxes above the individual image.
- Select how many times you want the sequence to repeat (0 means you have an infinite loop of moving images)
- Click on the create and download your GIF animation. You’re done!
Creating GIFs offline
How to make a GIF offline? With the appropriate desktop applications, it’s easy, so you don't have to rely on online tools to create GIFs. A graphics program often gives you even more design freedom than online applications. You can customize changes and effects and, thanks to numerous functions, make various image adjustments.
Photoshop is extremely versatile and offers an impressive range of features. However, the program is only available for a fee. There is a trial version which can be used for a few days. The following tutorial explains how to create a GIF with Photoshop. Depending on the version, however, the names for individual functions and commands may vary.
Creating frames und image sequences
First, you create frames for the GIF animation – individual images which are displayed later in a certain sequence and for a predefined duration. If you want to convert a video into a GIF, you have to divide the video into frames in advance. To do this, select the function video frames to layers when importing the video file. The video is now already split into frames and each frame is assigned to a separate layer.
If, on the other hand, you want to create a GIF from several static images, select the function window and then timeline via the upper menu bar. In the timeline window, create a new layer for each frame. All levels are then displayed in a bar at the bottom of the screen. The advantage of the layers is that you can show and hide individual images at any time.
Because of this feature, you can check which images can be removed. A careful selection is recommended, especially for videos. The video layer default is 24 frames per second. Although the GIF format compresses the file size, 24 images per second take up a lot of storage space, so it’s good to make a selection. If you use only every second or third image, the video quality should still be good enough. It is possible to define a smaller number of frames during image import. You should also delete images that are not relevant to the GIF animation.
Once the image sequence has been created, you can set the display time of the individual images. If you slow down the animation speed and display a frame for 0.10 seconds, for example, you will get by with fewer frames. This works fluidly up to a value of 0.2 seconds per frame. This reduces the number of frames to five frames per second, and therefore reduces file size. To set the display duration, you will find a time entry under each frame and a selection option to define the desired time value.
How often the GIF plays can also be adjusted. Go to the toolbar at the bottom of the editing window. There you will find a pop-up menu that allows you to specify how often the animation should be played, from once up to an infinite loop. Here you will also find a play button, and clicking on this gives you a preview.
Once the image sequence is set, you can focus on special effects and make further adjustments. For example, you can use an additional text layer to subtitle the GIF video.
Before you save the result, it is often helpful to reduce the file size, depending on its intended use. This can be achieved, for example, by adjusting the image size or reducing the color. Sometimes 60 colors are enough for a GIF.
The image processing program GIMP can’t compete with Photoshop in terms of the variety of editing functions, but it is free and also allows you to animate photos and graphics. GIMP offers two options for this, either using a preset template, or creating a GIF from your own graphics, and designing it individually. If you choose the latter option, then you have to create your own template and a separate layer for each frame. It's easier to use an existing GIMP template for different animation styles:
- Create a new image. To do this, use the image material you want to animate and import it into the program.
- Then select an animation style. To do this, go to the top menu bar and click on filter. Under the menu item animation you can choose between five different styles.
- You now have the opportunity to make individual settings in the script-fu window that opens automatically. After confirming with ‘OK’, GIMP will automatically create a multi-level GIF animation from your images.
- If you want to preview, click on play animation in the same menu area. If you want to make further changes, you can do so again using the script-fu window.
- Use the file function to export the animation as a GIF file. When exporting GIF, it is important to check the as animation option in the dialog box that opens. You can also specify here whether the GIF is to be played as a loop.
Although the presets from GIMP are easier to use, creating your own templates gives you more design freedom:
- Start a new project first.
- Create a layer for each individual image or video frame. The easiest way to do this is to create a template. For the first image, make settings that apply to most of the images in your animation. Use the scale images function to set the image size and quality to keep the file size as small as possible. Then create a layer for the image and use the transparency fill type for the background of the layer. To do this, open the layer properties window.
- Name the layers according to the following pattern: file name (x ms) (replace), for example: ‘Banner advertisement (200 ms) (replace)’. The information in parentheses after the file name refers to the display time of the frame in milliseconds. The command ‘replace’ is necessary so that the previous image is hidden when the next layer is faded in, resulting in a clear picture sequence.
- Duplicate the finished template by selecting the function duplicate layer in the upper menu bar above the layer button. The duplicated layers are now displayed one after the other in the image editing window. Keep in mind that the lowest level will be the first image. If you want the layers to look the same, you can leave it at that. Otherwise, you can also change each layer later and, for example, delay the frame sequence by extending the display time.
- To check the result, you can view a preview. To do this, go to the top menu bar. Use the filter option to select the animation button and then play animation.
- To save the animation and specify the number of repetitions, proceed as described for creating a GIF from a template (point 5).
- You have created your animation!