Skip to main content

Blog Post

Animated Gifs for Real Work

by Bob Kepford
February 18, 2015

Amaze your friends and co-workers with your cool animated gif screencasts!

A picture is worth a thousand words. It’s a tired cliché but it’s generally true. Sometimes it’s easier to show someone a thing than it is to explain that thing using the written word. Working with a distributed team has it’s share of challenges and one is explaining how to reproduce a bug or how a new feature should work. What if you could quickly record a video and paste it into a your ticketing system? And by quickly I mean seconds, not minutes.

Sheriff Woody

We are all familiar with animated gifs. They’re a lot of fun. They can also be useful when doing dev and design work. This tutorial will show you how to create an animated gif screencast. Let’s begin by breaking this down into 3 steps.

  1. Create the gif
  2. Upload the gif to the web
  3. Share your gif!

Create the Gif

Most tools for creating animated gifs are designed to convert a movie snippet into a gif. We want to capture our screen as an animated gif. The best tool I’ve found for doing is an app called LICEcap. Horrible name but it’s a great free and open source (Mac / Windows) app that is easy to use.

gif example

Upload the gif to the web

Once we have our gif we want to be able to quickly share it. The goal is to quickly upload the file and copy a publicly shareable URL. What I’ve done is set up a directory on my own server to store my gifs but you could use any number of file sharing services. I recommend Cloud App or Dropbox.

If you are a Mac user there is a great little app called Hazel (paid app) that does many cool things. At it’s core it’s a daemon that waits for triggers to launch it into action. It’s like a little digital worker on your computer. My favorite thing that is does is watch a directory for changes. When a new file hits a watched directory it jumps into action and does whatever you set it to do. In this case I want Hazel to execute a script that uploads the Gif file to my personal server. This script then copies the gif URL to my clipboard and then moves this file to a folder named uploaded. So, all that I have to do is move the file to a folder named Gifs and within seconds I have a shareable URL on the clipboard.

upload gif to web

This simple shell script copies the URL to the clipboard.

x="$1" y=${x%}
echo http://mydomain.com/${y##*/} | pbcopy

Share your gif!

Now that I have a URL for the gif on my clipboard I’m ready to share it. Where I am sharing the gif will determine how I proceed. If the system supports the image tag I use a TextExpander snippet to quickly drop an image tag into my comment body. So the next time you have to explain a complex bit of functionality, why not spend that time making an animated gif that demonstrates what you are trying to explain.

Chuck Norris thumps up

Additional apps to consider

  • Add mouse and keyboard effects to your Gifs and screencasts with Mousepose.

  • Drag and drop your Gifs to easily upload them many places with Dropzone.

Headshot

Meet team member, Bob Kepford

Bob is a Director of Development at Mediacurrent who has been slinging Drupal code since 2008. An active member of the Drupal community, Bob manages the Fresno, California Drupal User's Group, co-organizes the Decoupled Drupal Days Conference, belongs to the Drupal Association, and is the editor of TheWeeklyDrop, a popular Drupal newsletter.

Bob holds a Bachelor of Science degree in Information Technology from the University of Phoenix and is an Acquia Certified Developer. He began his web career building websites for small organizations and quickly moved into the education sector where he built conference registration systems. Prior to Mediacurrent, Bob gained a depth of web project experience in the higher education sector, leading the launch of mobile first and responsive Drupal sites. During his tenure at the State Center Community College District, he developed an online application system to replace an antiquated paper workflow. Prior to Mediacurrent, Bob was a Web Architect at Fresno Pacific University in Fresno, California. 

When he's not in front of a computer, Bob enjoys a good cup of coffee, playing bass, watching Dodgers baseball, and hanging out with his wife and two sons in sunny California. 

Learn more about Bob >

Related Insights