Transforming photographs into a circular shape can create visual interest in the boxy world of the computer display. I happened to see this effect recently on one of those poorly made local TV commercials and thought this approach could work well in eLearning design. Visual inspiration is all around us.
For my project, I wanted to display several small circular photographs showing patients and doctors in varied activities in sync with the narration. Photo research can be quite time consuming when you’re looking for something very specific. Particularly because it’s hard to find stock photos of people at work that don’t appear overly staged. (The exception to this are the eLearning people cutouts you can get at eLearning Art and the eLearning Brothers.)
To work in a circular format, the two people would need to be in close proximity. For example, the doctor and patient in the photo below were about as far apart as a small circle could handle.
Find the Focal Point
A general rule of thumb for all visual design work is to find the focal point of a photograph before you crop it. The focal point should be based on the concept or idea you want to communicate. In this case, the concept was patient-centered care so the verbal exchange between doctor and patient was most important.
Crop it in a Circle
According to cognitive research, the human brain is good at making predictions. We see what we expect to see. Therefore, it’s good to remember that the mind will fill in missing details. Don’t hesitate to only show a portion of a person or an object as long as the viewer can clearly distinguish what it is. In fact, this can make a visual more compelling than one in which everything is in full view. As you can see below, I had to crop out a portion of each person’s head.
Use the PNG Format
Using a graphic editor. Your graphic editor should have the capability to cut out a circle. If you’re not familiar with graphic formats, note that you’ll need to save a circular graphic in the PNG format, which has the capability for displaying a transparent background. The background must be transparent because computer graphics are really displayed as rectangles. See below for what the graphic really looks like in Photoshop with a transparent background.
If you’re having trouble with this, the alternative is to make the background color outside the circle the same background color of the screen on which it will display.
Using PowerPoint. In PowerPoint you create a circular photo in an entirely different way. In this case, you first draw the circle shape. Then in the Shape Fill menu, select Picture. The picture will fill your shape. This approach can work well, but other times it can distort the photo, as shown below. You may have to try several different photos, or crop them first in a photo editor. Because the entire photo fills the shape, it’s possible to lose your focal point. Don’t let that happen.
Lay Out the Photos
There are many ways to arrange four or five circles and you may need to explore various layouts until settling on one. A non-symmetrical layout will often generate more visual interest. This creates visual tension and is generally more likely to attract the viewer’s eye. It really depends on what you’re going after, however. If you’re trying to communicate a message about stress-free living, then a balanced design might be the best approach.
Here’s what my final layout looked like. Each circular element overlapped the previous one as it displayed. For the fifth circle, rather than use one more stock photo, I placed text in the circle and it displayed exactly when the narrator said those words.
Other Ways to Use Circular Photos
There are so many other uses for circular photographs. They could be a way to introduce characters in a scenario or as a more interesting way to display possible responses to a question. In the latter case, each character would have a speech bubble. Small circular photographs of objects can work as icons in a menu or as mnemonic devices.
Cropping photos into a circle shape is a simple way to enhance the visual aspect of a content screen while illustrating a basic concept. To tie things together, I used circular elements for a similar concept illustration later in the course. Repetition of a visual design is a way to unify the overall look.
And to think that the inspiration came from a poorly made television commercial!