How to Give Your E-Learning Course a Comics-Inspired Style

I just love creating comics-style e-learning. Comics are so much fun—they’re a recognizable format that reminds people of diving into a really compelling story with interesting characters and lots of action. As an e-learning developer, I use a comic book format because it’s an excellent way to break concepts into easy-to-understand chunks of information. I also find that comics resonate with many learners, including young children, teens, and non-native language speakers.

I’ve shared some of my comics-inspired projects right here on E-Learning Heroes, including:

• A short course on Needle Sticks for hospital workers
• A short math course called Captain Challenge
• Operation Storyline, a sample incorporating toys
• My entry for the 2015 Guru Awards, a graphic-novel-style course about teens and drinking called Teen Wreck

I’ll go through some of the things I learned from making these courses and provide you with tips and tricks so you can create your own comic book e-learning course.

Choose the Right Font

The fonts you use are important. Many font websites, like Dafont.com or Font Squirrel, have a large selection of comics-style fonts for free download. If you’d rather not download a new font, you finally have the perfect reason to dust off your Comic Sans font.!

Give Photos a Cartoon Look

I used Photoshop filters to give my photographs a cartoon effect. There are several good tutorials and actions available online that will give you step-by-step instructions. If you don’t have Photoshop, Lunapic and Befunky are websites that will transform your photos for free. I also found inexpensive software at Cartoonize.net that gives great-looking results.

One important factor to consider when converting your photos into a cartoon drawing is the photo resolution. Below are two versions of a photo I used in my Guru entry. The image on the left is a high resolution photo and the image on the right is a low resolution photo.   Both photos have the exact same filters applied to them, but notice how different they look. You could use either image in your project; it just depends what you prefer. When you find an effect you like, make sure that all of your photos are the same resolution.

Line Everything Up with Drawing Guides  

To get a really authentic comic book look, it’s essential that your comic panels line up with one another. The best way to ensure that is to use drawing guides in Articulate Storyline.

To turn on your drawing guides, right-click the slide background, select grid and guides, and then check display drawing guides on screen. To make a new drawing guideline, click on a current guideline, press your Control key, and drag out a new guideline. To get rid of extra guidelines, drag a guideline on top of another. If you need a guideline to move in smaller increments, hold down the Alt key while moving the guideline.

Setting Up My Project

When I’m getting started with a comics-style project, I lay out my photos on a slide, adjust the image size, and then add outlines, word balloons, and arrows. I make sure the panels are evenly spaced and that each panel is the same height as the one beside it. Finally, I check alignment.  

Once I have everything the way I want it, I leave the first panel on the main slide and put each subsequent panel on its own layer. That way the learner only sees one panel at a time, which is a good way to build your story and engage the learner. I apply triggers to each arrow to jump to the layer where the next panel is located. The properties of each slide layer should have the “hide other slide layers” option unchecked so the learner will see new panels as well as the panels they’ve already read.

I then add an arrow icon with a trigger that advances learners to the next panel on another layer. Once the viewer clicks the arrow to move on to the next panel, I want the arrow to disappear so that the layout isn’t cluttered and so previous arrows can’t be clicked, which would send the learner back to panels they’ve already seen. To make that look great, I make a selected state for each arrow by turning off the outline and the fill of the arrow and make a trigger to change the state of the arrow to invisible when the user clicks it.

Next Steps

Once I’ve got my images, fonts, and layout set up, the next step is organizing content. Overall, I find that using a comic book look helps add visual interest and keeps learners’ attention throughout an e-learning course. I hope you’re excited to try this approach!

If you’d like to check out more comics-inspired courses, here are two of my favorites:

• Cathy Moore’s Connect with the Haji Kamal

• Elearner Engaged’s Broken Co-Worker.

Linda Lorenzetti is an Articulate Super Hero and an E-Learning Developer at Public Services Health & Safety Association, where she’s been creating engaging and innovative courses for the past seven years. She’s a regular contributor to the E-Learning Heroes Weekly Challenges and you can see nine of her Challenge entries in the E-Learning Heroes Examples hub. In 2011 she received Honorable Mention for her entry “Skid Skills” in the Articulate Guru Awards. Follow her on Twitter @LindaLor or check out her blog at e-adventurer.com.