This is a new style that has become popular on the web. We have seen it in televisions for a while. If you have watched a DVD in the last five-ten years, you have seen this look.
Now, most of us are using devices and laptops to view media, web site, and some learning content. These screens are not your standard 3:4 ratio. Instead, they are 16:9.
You can immediately see the differences when you look at various monitors. 3:4 is the old school, large monitors and televisions. 16:9 is the newer, more modern televisions, monitors, and mobile devices.
Movies are traditionally 16:9 when you see them in a theatre. When you watch them at home in a non-letterbox format, you lose important pieces of information.
For example, look at these shots from Star Wars. The image on the left is what is termed “pan and scan” and the one on the right is letterbox.
In the letterbox format, you gain unseen information. For example, in the middle image, you see there is another officer in the shot. In the lower image, you see that Han Solo and Ben Kenobi are watching Luke as he is practices with his lightsaber. In the pan-and-scan version of the image, you totally lose these pieces of information.
WHY DOES LETTERBOX MATTER?
Cropping to a letterbox format allows you to tell your story in a slightly different manner. You can show more in the image because it is wider. You crop off parts of the top and bottom, so the image is more intimate.
WHERE DO YOU FIND LETTERBOX STYLE?
It is all over the web. Many web sites are now based on WordPress themes. This means there are a lot of common styles. One of them is the large photo at the top – essentially “above the fold”.
EXAMPLES
Here are some examples of letterbox style images:
LETTERBOX STYLE IS NOT ALWAYS RIGHT
I found myself looking for certain types of images when creating this post. As I tried various images, not all of them looked good to me in letterbox format.
Here is an example that did not look good to me, but could work:
Here is the original:
See how they present a different feel? The letterbox version is acceptable, but it is a little more intimate than I would prefer. It’s right up in her face – to the point where it cuts off a lot of the top of her head and at her chin. In the original version, you focus on her eyes. In the Letterbox version, the visual focus is shifted to her mouth, because of the white teeth.
MAKING AN IMAGE WORK
I like the images of the customer service people with the phone on their ear. I wanted to make it work.
Here’s the original:
This image would have the same problem as we saw previously. It would be too tight on her face. But, there is an opportunity here we can leverage. If we shrink the photo, we can get more of the woman in the final image. However, it isn’t wide enough to have the impact we want.
But, if you look at the background, it is essentially a solid gradient. We can create a box in PowerPoint that has that gradient color and fill that area to have a complete image.
See the difference? It adds to the image and gives you something with which to work.
HOW DID I CREATE THE LETTERBOX LOOK?
Here is a video that walks you through the process of creating a letterbox look with your images.
In PowerPoint, I made two black boxes that were 2 inches high and were the length of the slide.
I used these as guides to crop my images.
Certainly, I could have used the PowerPoint guides in this manner also.
Then, I dropped my image in and cropped it accordingly.
Here’s the original…
Here it is in letterbox format.
HOW CAN YOU USE THIS IN ELEARNING?
RAPID FIRE
Think of two or three times you can take advantage of this image style in your eLearning. Share them with the community, so we can all learn from them.
Would you use this as a title screen? What about a content screen? Is there another way to use this that we did not mention? Let us know.
Join the Discussion!