Create Interactive Stories with Photo Collages

Photo Collages in E-Learning #27: Challenge | Recap

Create Interactive Stories with Photo Collages

  • Build an interactive slide or course from a single image
  • Get rid of bullet points
  • You don't need to be a photographer to make this work
  • Use your own photos or prebuilt stock photo collages
  • Create multiple panel layouts similar t comic books

Create Interactive Stories with Photo Collages

Looking to move from a screen full of bullets to creating visual stories? Then you’ll love the ideas shared in Tom’s post on using photo collages to build interactive stories.

Working from simple panel layouts, the photo collage is a simple way to work with image-driven stories and interactions.

In Tom’s example, he used a symmetrical layout similar to many comic book designs. But that’s just one possibility. Another option is to work from a less structured layout:

A quick search in your favorite stock photo site returns a variety of photo collage styles and possibilities. Here are two more ideas:

I really like this visual approach to storytelling and and think it’ll make a great e-learning challenge.

Challenge of the week

This week, your challenge is to create an interactive story around a photo collage. You can use placeholder photos and graphics, or rework an existing project into a photo collage.

You can design your interactive story around any topic you like. Not sure where to begin?

Here are a few ideas to get you started:

  • Design your story around a common problem or challenge
  • Rework an existing scenario or interaction using a photo collage
  • Use the built-in characters (illustrated and photographic) which include multiple expressions and poses
  • Map collages are ideal for interactive org charts or customer profiles


You can use Articulate Storyline, Articulate Studio, or PowerPoint to build your interactive story.


Last week’s challenge

Before you begin creating your interactive story collages, take a moment to check out the amazing ideas shared in last week’s interactive screenshot challenge:

More about the e-learning challenges:

The weekly 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. We’ll feature your work and provide feedback if you request it.

Here’s wishing you an interactive week, E-Learning Heroes!

Even if you’re using a trial version of Studio ’13 or Storyline, you can absolutely publish your challenge files. Just sign up for a fully functional, free trial, and have at it. And remember to post your questions and comments in the forums; we're here to help. For more e-learning tips, examples, and downloads, follow us on Twitter.

Trina Rimmer
Ruth McElhone
Dianne  Hope
Sylvia Davis
Jackie Van Nice

Man. Good demos this week. Lance: Nice post-it/bulletin board idea. Lots of uses for that one. Patrick: Elaborate work! I agree with Paul - I think you got the idea of the challenge just fine. Ashley: Loved the colors and how the hover effects brought the infographic alive. Matt: I can't pull down your PPT where I am at the moment, but if you've gone with a beer theme, you're clearly spot-on. Melanie: Great style! Love the chunky cut-outs in contrast to the sleek tree and smooth animations. Really nice. Alison: I like your use of the bold comic-style layout and colors. Also a nice, concise presentation of options and feedback. Ruth: It's crisp, clean, attractive, and beery. What more could you want? Gina: Great idea to use the bulletin board to allow exploration of a linear stor... Expand


Busier than usual this week, so I thought I'd take the easy path by finding a stock photo, adding a few triggers, slide layers, and voilà, I'd have a challenge demo. This is the photo I started to use: It had everything I wanted. Things were humming along smoothly until I got some (unsolicited) feedback: "Why don't you use Storyline's characters? You could create your own gradient backgrounds and stage the same photo shots." And that's how 20 minutes became a couple of hours:-) It was worth it, and I am really pleased with how it turned out. Photo collage: Short blog post: Expand

Sara Walters

Thanks, David! If I were using the progress meter for one of my work projects, I would give the learners more of an explanation as to why their answers were right or wrong. But, if I waited to post this sample until I had everything just as I wanted it, then I would never post it. I appreciate the opportunity to see the work of other developers, and to work on my skills. If you, or others in the group, have some feedback for me, I would love to hear it. Here's a summary of how I set up the progress meter: I used PowerPoint to create the visuals for the progress meter - 6 images in all. I created a Points variable in Storyline and set it to zero. When learners click an icon that would keep Melanie productive, I add to the points. When they click an "unproductive" icon, I su... Expand