Blog Post

E-Learning Challenges
3 MIN READ

Let the Knuffle Bunny Help You Combine Photos and Illustrations in E-Learning #312

DavidAnderson's avatar
5 years ago

Mixing Photos and Illustrations in E-Learning #312: Challenge | Recap

 “Aggle flaggle klabble!”

If you're familiar with the Knuffle Bunny series, you'll know the anxiety Trixie felt when she realized she'd lost her favorite stuffed animal.  For course designers, coming up with a new design style for an important client can be equally frustrating.

The good news for Trixie is she gets her favorite toy back. But the even better news for e-learning designers is they can pull a page from this creative children's series to design a custom look and feel for their course. 

The Knuffle Bunny Visual Design Style

The book's visual style answers age-old questions in e-learning, such as: "Can I mix different types of images in my course?" and "Should my character styles match my background graphics?"

Short answer: When designed with intentionality, this mixed medium approach works well. 

Consider how the book's visual theme uses real-life scenery with hand-drawn illustrated characters. This is a fantastic example of how bitmap and vector graphics can be combined to tell a story.

The author uses photos he took around New York City. Great idea for shooting your custom e-learning graphics.

The images are then digitally modified to reduce their color and contrast to create dull, monochromatic images with varying shades of brown. The characters are drawn in bright colors and make an interesting focal point when layered above the photos.

We may be too old for the Knuffle Bunny, but the unique mix of black-and-white photos and custom illustrations create a timeless design style. And that's what this week's challenge is all about!

Challenge of the Week

This week, your challenge is to share an example that mixes photographs and illustrations. You don’t have to follow the Knuffle Bunny design style strictly. Just be intentional about your design choices and show how your theme carries across multiple content slides.

Knuffle Bunny Book Series

You don’t need to buy a book for this week’s challenge. If you search for phrases like “knuffle bunny images” you’ll find enough inspiration to kickstart your design ideas. For those of you who are interested in the series, you can find the books below.

Related Challenges

We’ve hosted a few challenges that tie in nicely with this week’s topic. Feel free to cross-post your entry if you incorporate one or more of the following challenge elements into this week’s demos.

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 dive into this week's challenge, check out the creative ways interactive sliders can be used to let learners choose their e-learning characters:

Using Sliders with E-Learning Characters #311: 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.

Published 5 years ago
Version 1.0

166 Comments

  • NickRussell's avatar
    NickRussell
    Community Member
    About a year ago I was asked to make a product demo and was somewhat reluctantly persuaded to go for a mixture of animation and photo-realism. I think it just about qualifies for the criteria of this challenge although it's just an animation, not a Storyline piece.
    https://www.youtube.com/watch?v=gahfBmzcAB0
    • Ron_Katz's avatar
      Ron_Katz
      Community Member
      Nick, I like all the little animations and the combination of photos (photo-realism) with them. The SFX and narration track were clear and easy to understand.
    • JeffreyRiley-9e's avatar
      JeffreyRiley-9e
      Community Member
      Nick, this is good and it does qualify for this challenge. Which animation tool did you use?
  • TracyCarroll's avatar
    TracyCarroll
    Community Member
    Are city bees healthier than their country cousins? Keeping the Urban Bee demo: https://tracycarroll.net/urban_bee_elh_312/urban%20bee%20elh%20312_player.html

    Blog post: https://tracycarroll.net/keeping-the-urban-bee/

    The background photographs and some of the illustrations were edited in PowerPoint, using the application’s Artistic Effects tool. Techniques used:

    I used Powtoon to create slide transitions, add the animated bee, and to add background music.
    • Ron_Katz's avatar
      Ron_Katz
      Community Member
      Bee-utiful as always Tracy. I never fail to learn something new from you in a fun way.
    • EricChamberl186's avatar
      EricChamberl186
      Community Member
      Looking forward to hearing how you created this. Beautiful presentation!
    • JeffreyRiley-9e's avatar
      JeffreyRiley-9e
      Community Member
      Great application of the idea Ang. This could have a lot of uses and help people to learn the concepts.
      • Ange's avatar
        Ange
        Community Member
        Thank you Jeffrey. Was thinking of some modules I have done where photos are a must-have for the audience, but some add no value to the learning; being too detailed and undifferentiated to the untrained eye they distract from and muddy the objective.
    • JeffreyRiley-9e's avatar
      JeffreyRiley-9e
      Community Member
      Good use of the concept and I like how all the slides scrolled up. Good use of the images and office characters.
  • JodiSansone's avatar
    JodiSansone
    Community Member
    Bird Calls of North America
    Demo: https://bit.ly/3cpR5Vr

    I usually don't mix photos and animations because I never feel like I achieve a cohesive look. I reworked a project from deep in my files here and adapted it to Pantone Color of the Year 2021. I think I'm going to give up on yellow for real now. Have a good week everyone!
    • ShakisDrummo614's avatar
      ShakisDrummo614
      Community Member
      Great job! How do you animate the dotted lines to each text box?
      • JodiSansone's avatar
        JodiSansone
        Community Member
        Hi Shakis, I used the Wipe entry animation in the up direction and then just faded in the box after the animation completed. It's a simple entry animation with a little lag on the timeline before the box fades in. Hope that helps!
    • TracyCarroll's avatar
      TracyCarroll
      Community Member
      Beautiful as always, Jodi. Loved the bird sounds, too!
    • JeffreyRiley-9e's avatar
      JeffreyRiley-9e
      Community Member
      Not only did you use the photos and animations well but you included the cutout effect and of course great use of sound.
    • JeffreyRiley-9e's avatar
      JeffreyRiley-9e
      Community Member
      Always amazing entries in these challenges. I did not know my trivia on moon walk as I thought I did. I love seeing the work you, Jodi and so many others do week after week.
    • Ange's avatar
      Ange
      Community Member
      Nice work. Love the humour.
    • JeffreyRiley-9e's avatar
      JeffreyRiley-9e
      Community Member
      I liked this approach. It works as well as the illustration on the photograph.
    • Jonathan_Hill's avatar
      Jonathan_Hill
      Super Hero
      The 'Knuffle Inversion' ™ (real people against cartoon backgrounds) works really well for this topic Sam. Some great compositions and layouts.
      • Samuel's avatar
        Samuel
        Community Member
        Knuffle Inversion it is. LOL. Thanks for the review.
    • KOsunero's avatar
      KOsunero
      Community Member
      I liked how you took the opposite approach from Knuffle Bunny by using a photographed character and an illustrated background! It works well here.
      • Samuel's avatar
        Samuel
        Community Member
        Thanks Kimberly! It was done without intention. I often read David’s instructions the wrong way.
  • First in line!(almost, was first when I originally typed this) Actually lots of firsts with this post.

    - I was invited to create a learning experience for a potential position with an eLearning Company, which would be my first in that industry.

    - The prompt:
    The learner is someone who has never encountered tea or coffee before - someone who has been living off grid :). Use the format - storyboard/moodboard/Word doc/PPT slides... - that work best for you and put together a summary of what you would do in order to present a short learning experience on this topic

    -In addition to a story board, I set out to make my first scenario/story based learning experience. The original was all created in vector files(http://bit.ly/two4tea) but I thought it would transfer well into this Challenge.

    - Here it is - https://360.articulate.com/review/content/c6cd5100-5116-488a-8092-0e0da3e70de3/review

    BTW - I was offered the position :)

    Have a great weekend everyone
    • JeffreyRiley-9e's avatar
      JeffreyRiley-9e
      Community Member
      Congratulations on the job and thanks for an "Out of the World" example. Interesting concept of the alien learning to drink tez.
    • Ange's avatar
      Ange
      Community Member
      Congratulations on the job. An inventive module, nice work. I like your Zorg-speak.
    • AmyPalian's avatar
      AmyPalian
      Community Member
      As always, you did a great job, Ron. I loved taking a tour of San Francisco, especially the stop at the Masonic Auditorium ;). Where did you get the audio? Did you use voiceover? Overall, great job!
      • Ron_Katz's avatar
        Ron_Katz
        Community Member
        Thanks Amy. Audio is actually text-to-speech from Articulate Storyline. I tend to lean toward Australian voices (not sure why). Music track is listed on last page under resources.
    • SaraWildman-999's avatar
      SaraWildman-999
      Community Member
      Nice contrast of photo to illustration! (And good choices for the landmarks- all excellent places to visit!)
    • JeffreyRiley-9e's avatar
      JeffreyRiley-9e
      Community Member
      Kind of reminds me of a project I did for my granddaughter years ago for Girl Scouts. We made a paper doll and took pictures of the doll all over Savannah, GA. We had fun and she had her badge.