Creating E-Learning Templates from Vector Graphics #376

E-Learning Templates from Illustrations #367: Challenge | Recap

One of the biggest challenges for course creators is finding design elements (and inspiration) to help them build their courses. While there’s no shortage of free stock photos and videos, the more significant challenge is finding creative ways to leverage those free assets in their e-learning courses.

Solution? Extract individual objects from stock graphics to create the visual elements. Let’s look at an example to see how it works.

Leveraging Stock Graphics to Create Templates

This example from Andrzej is one of my favorites. Andrzej created a fantastic, six-slide course template using a single stock vector illustration. The key is to work with vector illustrations so you can select and extract the individual elements.

Take a look at the following example to see how his final project turned out.

Leadership Template

View project | Download | Andrzej Jabłoński

E Pluribus Unum or Ab Uno, Multi?

Looking at the illustration, you might see one composition, not the hundreds of smaller parts used to create the graphic. To view and edit the individual parts, you’ll need a graphics program like PowerPoint or Illustrator.

E Pluribus Unum or Ab Uno, Multi?

In your graphics program, open the vector file (.ai, .eps, .svg) and ungroup the illustration. Once ungrouped, you can begin selecting the individual shapes for each object.

Selected Elements from Stock Vector Illustration

Heads up: Depending on the complexity of the illustration, you could see hundreds of layers. I like to begin with the more minor elements because they're easier to select. Another tip is to hide the layers of the objects after you group them. Hiding the layers makes it easier to select the remaining elements.

Adobe Illustrator Layers Scrolling

These elements can be selected, grouped, and exported to use in your course.

Grouped Elements Ready for Use in E-Learning

And now, you have everything you need to create the visual design elements for your e-learning template:

Final E-Learning Template from Illustration

Challenge of the Week

This week, your challenge is to build a simple interaction or course starter template using a single illustration.

Please include a screenshot or a link to the stock graphic you used to help others learn from your example.

Resources

Share Your E-Learning Work

  • Comments: Use the comments section below to share a link to your published example and blog post.
  • Forums: Start  your own thread and share a link to your published example..
  • Personal blog:  If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.
  • Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness.

Last Week’s Challenge:

Before you break apart this week’s challenge, check out the xAPI examples your fellow challengers shared over the past week:

What Should Course Designers Know About xAPI? #375

xAPI Examples from E-Learning Designers #375: 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.

Learn more about the challenges in this Q&A post and why and how to participate in this helpful article.

117 Comments
Jodi M. Sansone

Very Peri Cat Vector Button Set Demo: https://jodisdemos.s3.amazonaws.com/376+Cat+Vector+Button+Set/story.html Download: https://jodisdemos.s3.amazonaws.com/376+Very+Peri++Cat+Vector+Button+Set.story This demo was sitting in my "holding area". A couple weeks ago I started playing with this demo inspired by the Diana Myers example featured in the intro to Challenge #372 on button sets. (David thank you for that video demo because I wouldn't have thought of using a free form quiz slide for it.) I created a simple "Pick Many" question using this cat vector art. My question groupings and buttons were created with the art from the cats' eyes so the whole thing would have a cohesive look and feel. I also experimented with another Very Peri color palette--"Star of the Show". I can never ... Expand

Jodi M. Sansone
Jodi M. Sansone
Yvonne Urra-Bazain
Zeinab Khalifa
Chris Hodgson
Daniel Canaveral
Daniel Canaveral

Most welcome, Kacper! It was a multi-step process to get the islands to float. First, the graphic must be in the SVG format. Next, visit lottiefiles.com and, using the Design tab along the top, look for the "Convert SVG to Lottie" feature listed along the right-side of the drop-down. Use the button provided to upload your SVG. You'll then be presented with a number of preset animations -- that "floating" animation is among them. After you preview the animation and like what you see, go ahead and convert it. Once completed, access the Design tab once again, but this time select the "Convert Lottie to GIF" feature. Use the button provided to upload the Lottie/JSON file you just created. From here, you can select the size of your GIF output (200x200, 300x300, etc) and even apply a ... Expand

Kacper Lyszkiewicz
Yvonne Urra-Bazain
Maren West
Valerie Thompson