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.
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.
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.
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.
These elements can be selected, grouped, and exported to use in your course.
And now, you have everything you need to create the visual design elements for your e-learning template:
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.
- How to Edit SVG Graphics in PowerPoint
- How to Edit Free Vector Images in PowerPoint
- 36 Mixing Photo and Illustration Examples in E-Learning Design #312
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:
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.
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
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