Articulate E-learning Challenge 376: Vector Graphics
Tools & technologies used
- Articulate Storyline 360
- Adobe XD
- Adobe Illustrator
- Adobe Photoshop
Overview
Articulate Challenge #376 – Vector Graphics
In this challenge we were asked to deconstruct a vector image and reuse its elements in a visually-coherent Storyline package.
I decided to take a sea-related theme and use it to create a short learning experience exploring the art of effective habit-forming.
I started with some research on the topic of adoption of new habits and identified 5 relevant topics / tips. I proceeded to work on them and turn into a cohesive storyboard. Once it was complete, I moved on to the next stage – designing the layout in Adobe XD.
To bring each topic / tip to life, I found a relatable example, and to give the whole idea an extra twist, I decided to use a different sea creature to illustrate it. That’s where the idea of jellyfish with 6 trainers came in 🙂
Then, it was time to get my hands dirty and so some Illustrator work.
I downloaded the following vector images from Freepik, to serve as the baseline for the visual style of the project:
https://www.freepik.com/free-vector/set-scenes-nature_6126483.htm
https://www.freepik.com/free-vector/scene-background-with-sea-animals-ocean_4931471.htm
https://www.freepik.com/free-vector/sinking-ship-ocean_24062149.htm
I then played around in Illustrator to extract the elements which I liked. It turned out that some of them needed a bit of additional work in Photoshop. The next step was to switch to Storyline to reassemble the various elements into a cohesive layout and add the animated bubbles, as well as the background sound effect.
To complement the style of the sea images, I also searched for other vectors to use in the visual examples for each tip. Again, I used Illustrator to strip out the unnecessary parts and imported the selected images in Storyline. Once they were in place, I finished the project with a final round of QA, and uploaded it here.