Have you ever visited a website or viewed an eLearning course and noticed the pictures were stretched in extreme and weird ways? People appeared like 12-foot tall Martians or look like they were being viewed through a carnival mirror. If you’ve ever tried to force a picture into a part of a screen or webpage that just doesn’t fit, how do you adjust it correctly? Luckily, in the days of my eLearning development youth, someone was kind enough to explain how it’s supposed to be done.
Stretching vs Cropping
People with no proper graphic design training tend to make the mistake pictured above where the pictures are forced to fit into a space, but end up looking distorted or stretched. Different graphic design programs work differently, some require you to hold down the Shift or Control keys (or both of them) when you resize the pictures. Some allow you to just type in the numbers of the height and width without maintaining their proper proportions (what is called the “aspect ratio”). To avoid this pitfall, you need use the cropping tool.
Normally, I first decide what I want the height or width to be and type that number in manually. That method works in Articulate Storyline because that program will maintain the aspect ratio by adjusting the corresponding height or width to what you typed. If your program does not do that automatically, you can just start by adjusting it using the mouse, but while holding down the Shift, Control, or whatever key (or combination of keys) the program requires you to use to maintain the aspect ratio. You should be able to find that information in the application’s Help documentation.
Once you get the height or width set where you want it, use the cropping tool to adjust the rest. In Storyline for example, you can do this by either opening the Size and Position window, remove the checkmark from the “maintain aspect ratio” box, then use the up and down arrows to adjust the cropping from the bottom/top or left/right sides. Or, you can just click the cropping tool and do it with your mouse by eyesight.
Do Not Be Afraid to Cut
When cropping, it’s ok to cut off part of the head or body of your subject. When people look at pictures they instinctively imagine those parts or there. I stop short of cutting the eyes out, and you have to use your own discretion.
Try a Different Layout
As you will see in the example below, to make the pictures fit better, I decided to go with a more horizontal ratio than what I started with above. Usually you can make things fit if you really need to, but if not, stay open to changing your layout up a bit. In this instance, I could have even gone with a combination of horizontal and vertical ratios and had them fly in from the sides and below.
I’ve also learned that in some programs like Storyline, if you have a group of pictures you want to all have the same dimensions, you can use the first picture you adjusted to crop the rest. Just set the height or width to where you want it, then line the picture up against the original to where you want it, and when you crop it, the cropping tool will snap to the same width or height as the original.
Click here to see the before and after in full scale with animations. Feel free to let me know in the comments if you have any questions or need clarification.