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. 

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.

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.

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.

• GIF Creator
• Gifmaker.me
• EZGIF.com

Resources

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

Examples

• "Lemonade"- A Rotoscoped Short Film
• 7 Rotoscoped Music Videos Other Than A-ha's 'Take On Me'

Tutorials for tracing images in PowerPoint

• How to Create Your Own Illustrated Characters in PowerPoint
• Create Your Own Custom Characters for Online Training

Related challenges

• Hand-Drawn E-Learning Courses #41

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:

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.