Create a Rotoscoping Animation for Your E-Learning Courses #167

Rotoscoping Animation in E-Learning #167: Challenge | Recap

In a recent discussion, Nick Russell shared a creative example of a rotoscoping animation and how such an effect could be used in e-learning. While the hand-drawn effect has been popular in e-learning for years, it’s not often we see animated hand-drawn graphics. 

Nick Russell Rotoscoping Animation

View the rotoscoping example | Learn more and download | Video tutorial

The effect is called rotoscoping and it’s a fantastic way to create custom videos and animations for e-learning. And that’s what this week’s challenge is all about.

A-ha - Take On Me

One of the most iconic examples of rotoscoping is A-ha’s music video “Take On Me.” Keep in mind that the video took months to create. You have a week. Plan accordingly.

A-ha - Take On Me

Click to view the music video

How to Create a Rotoscope Animation

You can choose from a variety of tools to create the effect. Nick shared a comprehensive video tutorial demonstrating how he created his rotoscoping animation using After Effects and Photoshop.

At a high level, here’s what the process looks like:

  1. Convert a video to an image sequence. You can use free tools like VLC Player to export a video to a series of images.
  2. Import the image sequence into a graphics program. You can use any program you like, such as Photoshop or even PowerPoint. Programs with layers will make it easier to trace the images. For PowerPoint, you can place each image on a slide or use the Selection Pane to manage object visibility.
  3. Trace each image. This is where you’ll spend most of your time. The amount of detail you add is up to you.
  4. Save images as an animated GIF. You’ll import the animated GIF into Storyline to use in your example.

Creating Illustrated Characters from Photos in PowerPoint

Tom has a helpful post with video tutorials on how to create custom illustrations using images in PowerPoint.

In Tom’s examples, he spends a fair amount of time creating each character. The amount of detail and realism you add is up to you. The thing to keep in mind is that you’ll have to multiply the time it takes to trace an image by the number of images in your final animated GIF.

Creating Illustrated Characters from Photos in PowerPoint

Click to view the article and video tutorials

Challenge of the Week

This week, your challenge is to show how rotoscoping can be used in e-learning courses.

Rotoscoping can take a lot of time to create. For your first attempt, try not to lose your time adding too much detail to your image tracking.

After you have a better feel for the time commitment, you can go back and refine your project or create a second one. There’s no limit to how many entries you can share!

Tools for Creating Animated GIFs

There are dozens of free applications you can use to create animated GIFs. Below are two resources I’ve used in the past. If you have a favorite site or resource, please share it in the comments.

Resources

Below you’ll find some examples and tutorials for creating the rotoscoping effect.

Examples

Tutorials for tracing images in PowerPoint

Related challenges

Last Week’s Challenge:

Before you begin sketching your ideas for this week’s challenge, take a look at the creative ways course designers are using homegrown stock videos in their courses:

10 Ways Course Designers Use DIY Videos in E-Learning

DIY Stock Videos in E-Learning RECAP #166: Challenge | Recap

 

New to the E-Learning Challenges?

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

Related Content
249 Comments
Noura Sa'd
Tracy Carroll
Tracy Carroll
Tom Kuhlmann
Nick Russell
Kevin Thorn
Kevin Thorn

Love this technique! This only took a couple hours, but finding spare time this week has been challenging. I just set up the camera and filmed several hand gestures videos - thumbs up, thumbs down, fist bump, count down, and a few others. Like Linda, these were done completely with Photoshop CS by importing the video, reducing the frame rate to 12fps, and then exporting video frames to layers. Once all the frames are in layers, start tracing, painting, adding color, or anything you want. Once done with styling, render the video and simply export layers to animated GIF. I started building a True/False type interaction with a 'thumbs up' and 'thumbs down' animated feedback. Finished the two feedback GIFs, but have two more videos to complete the design. Decided to record the proces... Expand

Nick Russell
Kevin Thorn