Using Blurred Backgrounds in E-Learning

Blurred Backgrounds Effects in E-Learning #366: Challenge | Recap

Design Visually Rich Backgrounds Using This Simple Effect

Background images are one of the best ways to add visual interest to your e-learning slides. The right background image can help establish the context for a slide, create a sense of location, or subtly add depth to your slides.

But background images can be tricky. As the largest slide design element, background images often compete with instructional elements like text, graphics, and buttons.

Here’s an example of a full-slide background image that competes with the on-slide text and character.

Design Visually Rich Backgrounds Using This Simple Effect

An easy way to correct this slide is to blur the background. The blur effect creates better contrast between the background image and foreground elements.

Here’s an updated example with some moderate blur applied to the background image.

Blurred Backgrounds Examples - After

Notice how the character is better emphasized and the text is more readable? The image retains enough detail to set the scene while our primary design elements are pulled forward.

Moving from Blurred to Abstract

Dial in a heavier blur setting for an even more abstract background effect. The image’s colors are retained, but the detail is lost.

Moving from Blurred to Abstract

Backgrounds don't need to dominate your slide to be effective. Sometimes a subtle, supporting role is all your slide needs. Finding the right balance is what this week's e-learning challenge is all about!

Challenge of the Week

This week, your challenge is to share an e-learning slide, demo, or design comp that features blurred backgrounds. Try to include before-and-after examples to show how your background graphics transformed your original slides.

Bonus: Share your backgrounds as a separate asset or download. We'll post a blurred backgrounds round-up to share your bundles of blurred goodness in a few weeks.

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 or #ElearningChallenge so your tweeps can track your e-learning coolness.

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.

Last Week’s Challenge:

Before you dive into this week's challenge, take some time to check out the interactive video examples your fellow challengers shared over the past week: 

Using Video in Quizzes and Scenarios #365

Interactive Video in E-Learning #365: Challenge | Recap

176 Comments
Jodi M. Sansone
Peter Mercier
Hilla Schlegel
Peter Mercier

Great idea, Hilla, and thank you for the suggestion! I think the only issue I'll run into is that the music won't line up if you go back and forth, as I'll have to pause or stop the loud track while the soft one plays continuously, so if you flip back and forth the loud track won't be in sync with the soft one. But, for the purposes of this demo, we'll roll with it. Also, I tried to check out your link but the link brings up a 404 error. Thank you again for the suggestion! @DavidAnderson, any chance Articulate might be able to add a "mute media" button that mutes the volume until it's triggered back on again without pausing or stopping it? As a musician this interests me, but might be too niche for a formal request. Not sure how many other folks would be interested in said feature... Expand

Hilla Schlegel
Peter Mercier
Peter Mercier
Peter Mercier
Thierry EMMANUEL

I almost found the Holy Grail, Peter. (about dynamic sound control, of course). And, Glory to him!, is a cleaver JS trigger solution from Math Notermans. No issues with track alignment as there is only one track and the JS triggers handle the entire volume level. His file.story is here: https://community.articulate.com/discussions/articulate-storyline/how-to-create-a-sound-volume-button Thanks to him. I recreated your demo with a very-very simplified copy of Math's solution. https://360.articulate.com/review/content/10efc235-0853-49e2-9ccf-3b76b9e9281e/review) I only kept two buttons: high volume and clear volume. These are the same buttons for blurring and unblurring the background so you have both effects at the same time. Of course, JS triggers don't work in Review, so you need to... Expand

Daniel Canaveral
Ron Katz
Math Notermans

My entry for this challenge is a dynamic partial blur filter i use in projects. https://360.articulate.com/review/content/5e75d3dd-d56d-4647-a1e2-f0364158dd85/review Here you can see it work. It is in fact a CSS filter applied to images and with some magic its displayed partially only there were other specified elements ( the draggable element and the textbox ) are overlapping the image. You can change the blur value in the options. As this approach only works for images, i will update this in the near future with an SVG based filter that will work on shapes and other Storyline elements too. The Storyline for this Challenge you find here: https://community.articulate.com/discussions/articulate-storyline/partial-blur Drag the panel on the left around to see that only parts... Expand

Nathanial Hilliard
Math Notermans
Nathanial Hilliard
Math Notermans

Nice Nathanial... in some previous project i added numbered images to the layers in Storyline by script...so a user can see what number he needs to use to act on a specific Storyline timeline layer. Here is a sample of that i just uploaded to Review. https://360.articulate.com/review/content/4b791629-02fd-424c-8e6c-6c818c738c3c/review Basically creating a new div with specific styles showing what Storyline layer it is... Sharing the file in a post in a sec... PS. the images added to the stage.. are NOT on the Storyline timeline. They are only in the external files folder and are put dynamically ( as Movieclips in Flash years ago ) on the Storyline stage... Here you can find the sample. https://community.articulate.com/discussions/articulate-storyline/creating-storyline-elements-... Expand

Ron Katz
Karin Lorbeck

Here's my contribution for this week. I love sunsets and am fortunate to see many of them here in Southern California. And now I see that blurring them makes them even more zen :) I used the free Blurry app from the Apple app store to blur the picture. Demo: https://lorbeck-elearningchallenges.s3.us-east-2.amazonaws.com/366/story.html Download: https://lorbeck-elearningchallenges.s3.us-east-2.amazonaws.com/366/Blurred+background.story Including pictures if David ends up making a blurred backgrounds roundup: Original picture: https://lorbeck-elearningchallenges.s3.us-east-2.amazonaws.com/366/sunset.jpeg Partial blur picture: https://lorbeck-elearningchallenges.s3.us-east-2.amazonaws.com/366/blurry-sunset+10.jpeg Full blur picture: https://lorbeck-elearningchallenges.s3.us-east-2.a... Expand

Math Notermans
Thierry EMMANUEL
Andrea Martens
Ron Katz
Peter Mercier
Laura Gutiérrez
Jenna Silva
Daniel Canaveral
Jenna Silva
Ron Katz
Michelle  Hulan
Ron Katz
Daniel Canaveral
Kacper Lyszkiewicz
Daniel Canaveral
David Truzman
Ron Katz
David Truzman
Max Textor
Yvonne Urra-Bazain
Ron Katz

Dominik, I liked your interaction but noticed it didn't actually blur and that some of the colors didn't make sense. For fun, I recreated it with a few minor updates. I copied the background picture and cropped the copy to be the same size as the text. I saved a copy of that picture and pasted over the background picture. Then I took a copy of that and blurred it then added a washout effect. Finally, I added an animation to the blur state by clicking ctrl c, ctrl x, ctrl v to copy the picture, delete it and paste it while in edit state mode. then adding a slow wipe effect from the right. For the buttons, I used the eyedropper to select colors from the background photo (I like the green from the statue and the blues from the sky/water). For the bullet points I did something ... Expand

Deborah Leal