The Rapid Elearning Blog

free interactive image template and tutorials

As noted in an earlier post, an easy way to build interactive elearning modules is by choosing a single image and adding interactive elements to it. This is a great solution for those who don’t have graphic design skills or access to a graphic designer. The key is finding a single image that has a few potential content buckets.

Finding images is relatively easy today. I look for images like the ones below. They need to have some visual interest, a consistent context, and potential content areas that can be clicked on or zoomed into.

interactive image examples

Interactive Image Example

In a previous post, I shared this interactive image demo and had lots of questions about the zoom effect I used and how it was built. To help you out, I recorded a few tutorials that go through the basics. I used a different image for the tutorials and included a new free template for you to download.

Here’s the new template in action:

interactive image example

Click here to view the demo.

Interactive Image Tutorials

Here are some tutorials that walk through how I created the zoom in and out effect in this elearning template.

Free Interactive Image Templates

I’ve included the source file for the original demo and a new template based on the image I used in the video tutorials. As a bonus, I used the same image to create a free PowerPoint template.

free interactive image template and characters

  • The templates also include a slide of individual characters. Create additional slides in the template and add the characters.

So now it’s up to you—find some images, watch the tutorials above, and create your own interactive image templates.

Events

Free E-Learning Resources

Want to learn more? Check out these articles and free resources in the community.

Here’s a great job board for e-learning, instructional design, and training jobs

Participate in the weekly e-learning challenges to sharpen your skills

Get your free PowerPoint templates and free graphics & stock images.

Lots of cool e-learning examples to check out and find inspiration.

Getting Started? This e-learning 101 series and the free e-books will help.



6 responses to “How to Create an Interactive Image Template”

August 25th, 2015

I love this interactive template. You explained each step very well and chucked the information accordingly. Great job.

Great and useful explanation! Thank you,Tom.

September 1st, 2015

I love the graphics. Can you tell me where you got the people from in the zoom interactive template?

September 1st, 2015

@Gillian: the vector image came from a stock image site that’s no longer in business. However, the artist was “marisa__” so you may be able to find her on other stock sites since many have the same images available.

I tried using the zoom feature on an image that my team created. In preview everything looked fine, however when published in HTML5 the image was blurred and so were the hotspot captions. Any advice?

September 17th, 2015

@John: good question. I think the key is to not start with an image at 100%. When you zoom in, it’s going be pixelated. Here’s a quick example of a zoomed image. http://i.imgur.com/aPju4GQ.png

While they’re the same size on the slide, one image 600×372 and the other is 2048×1272. Thus, it starts with having a high quality image.