Here are a few examples of implementing text with images for the E-Learning Heroes Challenge #152.
NOTE: If you would like to view the images larger, please click here.
How It Was Made
The images above were found from creative commons and were modified and changed to give each module or week an image for students (in an online program) to distinguish which section they were working in. I tend to use images from our campus to give students a "feel" for what the campus looks and feels like while they study online. I also like to give each week or module an image at the top (like a banner) to supplement the navigation feature in our LMS.
SnagIt Editor
Images 1 and 2 were created by using SnagIt Editor.
Image #1: Blurring the Background
Blurred backgrounds helps to create a stronger contrast for your font. In my example, I only blurred some of the background under the font. The text in this image was a simple font overlay with a blurred box placed behind it.
Image #2: Using Opacity
The text in the second image was created by changing the text color's opacity. By keeping a strong outline, the font is stands out without adding too much color.
Issues with Text & Images
While I like the overall look of the image and how they can be used, I've found it is pretty difficult to utilize a lot of these in an online format (online course, websites, etc.). Throwing a lot of information over an image can be a really daunting experience due to ADA Compliance. In some cases, a screen reader can read the ALT-Text with no issues. However, in certain cases (depending on the amount of text or image selection), it can really be overbearing (for both the designer and the student).