Matt Hanes

Creating animated gifs from short videos

Blog Post created by Matt Hanes Champion on Jul 8, 2015

Animated Gifs

We've all seen animated gifs on the internet. They are nice because it's a short animation without the need of hosting a video file somewhere like YouTube. I've been using them in some of my Technology Training courses when a felt like a screenshot just isn't enough to show a step in a process. They can also be used for humorous purposes.

cat.gifSource(www.reddit.com)

 

Video to Animated Gif

  1. First, you will need a video file of what you are demonstrating. Preferably something short, around 6 seconds or so. I use Camtasia Studio to do screencasts if it's something I'm showing on a computer. As long as the recording is in MP4 or AVI, you can use it.
  2. Once you have your video file (under 50MB), you can use a site like www.ezgif.com to convert your video file into an animated gif. Browse to your file and click the upload button.
    1. upload.jpg
  3. After the upload completes, you can set a start and stop time for the gif if you want to cut some of the beginning or end of the video.
    1. startstop.jpg
  4. After the conversion, you will be given many options to edit the gif.
    1. save.jpg
    2. Crop - Cut out parts of the gif on the sides or top/bottom.
    3. Resize - Make the gif smaller and take up less of the screen.
    4. Optimize - These settings will allow you to decrease the file size of the gif by removing frames or reducing the number of colors.
    5. Effects - This will allow you to do things like:
      1. Set a color in the gif as transparent so a background image can show through.
      2. Transform or rotate the gif.
      3. Play the gif in reverse.
      4. Add filters.
    6. Speed - Add a delay between each frame so the gif is slower.
    7. Split - Split the gif into frames so you can edit each frame separately in an image editor.
    8. Write - Add a text overlay on top of the gif file.
  5. Finally, you can click the save button to save the file after all changes are made.
  6. The gif file can be added to a Canvas Page just like any other image file. You can see an example of one I used towards the bottom of a page in my Image Editing course.

Outcomes