Create an Animated GIF

Animated GIFs are a simple form of animation. If you have a series of images or a short video, you can make them in a minute or two using online tools. If you want to be able to edit the images and control the animation speed more closely, download GIMP for free and use its built-in ability to create GIF animations.

Steps

Making a Simple Animated GIF Using Online Tools

  1. Choose a series of images or a video. Make a folder on your computer, containing the images you want to animate. Each image will be a separate frame of the animation. Alternatively, you can convert a short video into an animated GIF.
  2. Visit an online GIF generator. There are many free online GIF generators, including imgflip, makeagif, and gifmaker. These do not have as many features as GIMP or other image-editing software, but can be used quickly and easily without any downloads or registration.
  3. Cut out a video segment (optional). If you are making a GIF from a video file, you probably want to select a small portion of the video, instead of uploading the whole thing. You can easily do this for free by downloading VLC, then following these instructions:
    • Open VLC, then use File → Open File... to open the video file.
    • Find the beginning of the segment you want to turn into a GIF.
    • Select Playback → Record in the top menu.
    • Play the video until the segment you want to "GIF-ify" is over. Press Record again to stop the recording. The new, smaller file is now saved in the same folder as the original video.
  4. Upload the images or video. Look for an Upload Images link. If you are converting a video, look for an Upload Video link instead.
    • Video upload may take a long time if your internet connection is slow or the video file is large. Uploading no more than a few seconds of video is recommended.
  5. Edit the GIF. These online tools usually let you change the order of the images in the GIF, in case you uploaded them in the wrong order. You may also be able to add text, change the size of the images, and set the animation speed.
  6. Create your GIF. Look for a Generate GIF, create your gif, pr Create Now link. Your images or video will be turned into a GIF animation. Usually, a list of available options will show up, including links to post the GIF in forums, download it, or embed it in an HTML web page.

Creating an Animated GIF in GIMP

  1. Download GIMP. GIMP stands for GNU Image Manipulation Program, an open-source image editing program. Download it for free at gimp.org/downloads. Using GIMP, you can edit each frame of your GIF, customize the speed of your GIF, and save it in an optimized format that will be quicker to load.
  2. Open the image you'd like to animate. Go to File → Open in the top menu and select an image saved on your computer. If you'd like to draw your own GIF from scratch, use File → New instead.
    • If you are using an existing GIMP file with multiple layers, use the Image → Flatten Image command to merge them all into one layer.[1] This layer will be one frame of the animation.
  3. Add additional images. If you already have several images to turn into a GIF (such as a series of screenshots), open them using File → Open as Layers. If you only have one image and wish to edit the animation yourself, use the Duplicate Layers function in the "Layers" window on the right of the screen. You can do this by right-clicking the image icon and selecting Duplicate Layer, or by selecting the icon and clicking the icon that looks like two stacked photographs.
    • Each layer will be one frame of the GIF. The image on the bottom of the list will appear first, then the images above it. Drag them around to change the order.
    • Every image must be the same size, or the larger ones will be cropped when the GIF is saved.
  4. Hide layers so you can edit layers below (optional). If you plan to edit the images or add text to them, you'll need to hide all layers higher up on the list than the one you're editing, or you won't be able to see your work. There are two ways to accomplish this, both found in the "Layers" window:
    • Click the "eye" icon next to a layer to hide it. Click the same spot again when you're ready to show it again.
    • Or select a layer and adjust the Opacity bar near the top of the Layers window. Low Opacity makes the layer more transparent. This is helpful if you're adding text or other additions to multiple frames, so you can line them up with each other.
  5. Edit the images (optional). You can Use-GIMP if you like, or just use these basic techniques. Select the image you wish to edit from the icon in the "Layers" window to the right, then use the following tools to adjust your GIF frames:
    • In the "Toolbar" window to the left, select the "Scale Tool" (one small square with an arrow pointing to a large square) to resize the image. Make all your layers the same size.
    • In the Toolbar window, select the "A" icon and click the image to add text. Type in the text and use the popup tools to adjust the size, font, and color. When finished, use the Layer → Merge Down command to combine the text with the layer beneath it.
  6. View the animation. Once you've completed your edits, select the Filters → Animation → Playback... command from the top menu. Click the play icon in the window that appears to view your animation.
  7. Adjust the timing. Go to the "Layers" window, and right click (or control-click on some Macs) a layer. Select Edit Layer Attributes. After the name, type (XXXXms), replacing the Xs with the number of milliseconds you want that layer displayed.[1] Do this with each layer. Open the Playback again to view the animation with your new changes, and continue to adjust until you are satisfied.
    • Most GIFs made from videos are close to 10 frames per second (100ms per frame).
    • You can skip this step and select a default speed later, when you export the file.
  8. Optimize the animation to load faster. Use the top menu to select Filter → Animation → Optimize (for GIF). This will create a copy with a much smaller file size. Continue working in the copy for the remaining steps.
    • Before optimization, each frame is loaded completely ("replaced"). After optimization, only the areas of the image that change are loaded ("combined").[1]
    • You can skip this step and optimize during export in the step below.
  9. Export your file as a GIF. Select File → Export As.... Click Select File Type at the bottom of the window that appears to view more options, then scroll down to and select "GIF". Click Export and a new window will appear, described below.
  10. Set your options and finish the export. In the new window, titled "Export Image as GIF," check the box next to "As animation." Finish by clicking Export, or change your options first:
    • Uncheck "Loop forever" if you only want the animation to play once.
    • If you skipped the timing adjustment step, set the delay here. By default, this is set to 100 ms, or 10 frames per second. Reduce this number for a faster GIF, and raise it for a slower one.
    • If you skipped the optimize step above, look for a "Frame disposal" option while exporting and select "Cumulative layers (combine)."

Tips

  • Older versions of Adobe Photoshop came with another program called Create Animations Using Adobe ImageReady CS. If you happen to have it, create each frame in Photoshop as a separate layer, and then use ImageReady to create the animation, similar to the method above.
  • GIMP has a few animation effects under Filters → Animation. These will add a fading effect between layers, such as a ripple or blend.
  • For more advanced animation features, install the Gimp Animation Plugin (GAP) and read the tutorial. GAP does not work for 64-bit versions of GIMP 2.8, so you may need to download GIMP 2.6 instead.

Warnings

  • Animated GIFs can end up being very large files, which are slow to load online. Use fewer colors and avoid dithered images to keep the file size down.[2]

Related Articles

Sources and Citations

  1. ↑ 1.0 1.1 1.2 http://www.gimp.org/tutorials/Simple_Animations/
  2. ↑ http://www.quackit.com/web_graphics/gimp/tutorial/create_an_animated_gif_layers.cfm
Retrieved from "https://kipkis.com/index.php?title=Create_an_Animated_GIF&oldid=326094"