Firstly, Happy Birthday to the Gif! A millennial that needs to be celebrated.

A toast from Leo himself, fancy.

The term Gif came into play on June 15, 1987, and has since become one of the most beloved and well-known image file extension on the internet. Although it may now be in its 30s’, it is now also in the prime of its life, with Twitter and Apple both adding Gif search buttons to their apps. Mainstream approval at its finest. Today, the Gif is used widely across the culture of the internet. Reaction art and Tumblr Gif sets being part of its new known formats. Long gone are the days of the ‘90s where the internet was alive with glittering, bright, images composed with the Comic Sans font and small animated icons that added that ‘cute’ style to your Myspace account (anybody who didn’t do this is ultimately lying). For many of us however, this was our introduction to the Gif.

The evolution of the Gif

If you were lucky enough to grow up to see the internet evolve, you would also have seen the Gif evolve with it. Between the ‘90s and now, its middle age saw it grow through everything from Flash to YouTube. YouTube spurred the use of Gifs on as the era of v-logging and celebrity culture grew. The Gif was there to capture the most explosive moments from the internet. Britney and her 2007 MTV Music Awards performance? Gif for that, “Leave Britney Alone”.  Not only were various Gifs created but this also sky-rocketed the YouTube star, Chris Crocker, and his career as the reaction went viral. This brings us straight to the modern era of Gifs. Reaction Gifs are now an art form in themselves. Sites like Reddit, Twitter and Tumblr play major roles in this evolution of Gifs in social media. Easily embedded into text, used for elaborate reactions and even story telling the internet saw the average user suddenly intent on sharing that perfect reaction, or the perfect moment, in a Gif. One of my most used reaction Gifs (as I have perfected the unimpressed expression extremely well over the years myself) is this one…

Never has a Gif related to me so much…

Or anything to do with Hugh Laurie in “House”…

This is how all Instructional Designers work.

Gifs and elearning

Coincidence or not, I spent my Friday afternoon last week creating Rotoscopes after coming across the challenge on the Elearning Heroes site. It was only when I looked on social media when I returned home from work that I noticed the Gif had just turned 30 years old. Brilliant, a perfect chance to go into Rotoscopes more in a blog post this week!

So, what is a Rotoscope?

The use of hand-drawn graphics has been a popular effect in elearning for years. The use of animated hand-drawn graphics is referred to as a rotoscope. A fantastic way of incorporating a custom Gif into your course!

How to create a Rotoscope

There’s various ways of creating this sort of animation. From learning of the Rotoscope on the Elearning Heroes site. I was able to trial the animation myself from another artists’ tutorial. After that, it was a case of playing around with my design in Photoshop and Illustrator. I ended up changing them to ‘smart objects’ and saving as Gifs as it gave me a lot more design freedom but, it’s up to you how you alter it once you’ve designed your base for the animation.

The process

This is what the process looked like: (you can follow the tutorial I did here)

  1. Convert a video to an image sequence. I used Adobe After Effects to do this after finding a video online. I also created stills from a YouTube video and skipped this step altogether. This step depends on how much detail you want in your animation.
  2. Import the image sequence to your graphics program. I initially use Photoshop for this part as you can keep track of layers, making it easier to trace.
  3. Trace each image. Here is where you can create your graphics, make it as detailed or un-detailed as you like! You can also do this part on Illustrator if you want to create more of a vector style animation.
  4. Save your traces as PNG files and then open as a video layer in Photoshop. You should be able to see your Gif come to life on the screen as this stage!
  5. Save the images as an animated Gif. From this you can use your Gif as you please, internet posts, Storyline course, the possibilities are endless!

Besides making the Gifs yourself, there are also tones of tools for creating animated Gifs online. Why not have a look and see what you can create? Give the Gif a new life in elearning for its 30th birthday! Interested in the Rotoscope design I created, here it is below. I decided to create a Rotoscope from one of my favourite music videos (points if you know the band).

‘Hard Times’ for dancing. Created by Faith Edwards.

Drop us a line and show us your creations! If you want any more advice on creating a Rotoscope for your elearning courses then email us at You can also follow us on Twitter.

Share This