Three Ways You Can Prevent Frustrating Design Problems When Working With Portrait And Landscape Images

One item we run into over and over again with Venture Platform users is trying to fit portrait dimension photos into a landscape dimension container, such as the homepage slider or something like a standardized event image template. It is the digital image equivalent of pounding a square peg into a round hole but here are three solutions you can use to help solve, and even prevent, the problem.

THE PROBLEM

At the heart of the trouble is the need to fit an image that is taller than it is wide (portrait) into a space that is wider than it is tall (landscape).

5x7-portrait-image
The horizontal lines are standard cropping point guides.
landscape-container
A typical 16:9 ratio landscape container.

In order to fit the portrait image into the landscape frame so that all of it is visible, you end up with a large amount of dead space (Example 1). But if you increase the width of the portrait image to match the width of the landscape container, you end up cutting off more than two thirds of the source image (Example 2).

portrait-in-landscape-frame
Example 1
lost-content
Example 2

SOLUTION #1: THROW MONEY AT IT

If you left room in your budget for custom graphic design work (smart move), the easiest solution is to have your in-house or outsourced designer work some Photoshop magic on the image so as to embed it into a custom graphic design solution.

In this example, Venture user EngemanTheater.com actually had a landscape image but they didn’t want to lose any of the original image so they had their graphic designer embed it into a custom slide image that also incorporated some of the show’s corresponding typography.

EngemanTheater.com

SOLUTION #2: FORESIGHT

If you have yet to create the source photos, this flexible option is to make sure the photographer takes landscape versions of what would otherwise be your portrait dimension shots. When your photographer is lining up a portrait dimension shot, ask about obtaining an additional shot with the same setup but with enough space in the backdrop on either side to fill up a typical landscape width. This will maintain the continuity of the portrait image while giving you the ability to use it in far more settings than something like a typical print headshot (not to mention prevent you from inadvertently stifling the photographer’s creativity).

Here, you can see the alternative version of the original portrait image with the additional space needed to create a landscape version (Example 3).

landscape version of portrat image
Example 3

The end result is an image that provides the full impact of the original portrait version but leaves room for text or other graphic elements (Example 4).

end result
Example 4

Here’s a practical example of this approach Venture’s graphic artist put together for user HollyMulcahy.com.

HollyMulcahy.com

SOLUTION #3: EMBRACE THE CROP

If your images have already been created then consider the benefit of cropping the portrait dimension image to fit inside the landscape dimension container. Granted, this is easier said than done as most tend to become emotionally vested in the integrity of a portrait dimension image. Will the final version have the same emotional impact as the original? No, but that’s not a bad thing. The trick is to take yourself out of the frame of mind related to the original portrait image and look at it as an entirely new image. In short, get over your bad self and look at it with fresh eyes (Example 5).

tight face crop
Example 5: The cropping lines from the original 5×7 sample above came into play here in order to help identify an aesthetically viable cropping point.

When implemented properly, the end result can be spectacular; like these examples from Venture user FreemanStage.org which leveraged some serious in-house graphic design skills to come up with the final results.

FreemanStage.org

FreemanStage.org

FreemanStage.org

So there you have it, three solutions for fixing the square peg in a round hole conundrum when working with portrait images in landscape applications. Ideally, one or more will help you refine your organization’s website.

About Drew McManus

"I hear that every time you show up to work with an orchestra, people get fired." Those were the first words out of an executive's mouth after her board chair introduced us. That executive is now a dear colleague and friend but the day that consulting contract began with her orchestra, she was convinced I was a hatchet-man brought in by the board to clean house.

I understand where the trepidation comes from as a great deal of my consulting and technology provider work for arts organizations involves due diligence, separating fact from fiction, interpreting spin, as well as performance review and oversight. So yes, sometimes that work results in one or two individuals "aggressively embracing career change" but far more often than not, it reinforces and clarifies exactly what works and why.

In short, it doesn't matter if you know where all the bodies are buried if you can't keep your own clients out of the ground, and I'm fortunate enough to say that for more than 15 years, I've done exactly that for groups of all budget size from Qatar to Kathmandu.

For fun, I write a daily blog about the orchestra business, provide a platform for arts insiders to speak their mind, keep track of what people in this business get paid, help write a satirical cartoon about orchestra life, hack the arts, and love a good coffee drink.

Related Posts

1 thought on “Three Ways You Can Prevent Frustrating Design Problems When Working With Portrait And Landscape Images”

Leave a Reply to Jonathan Eifert Cancel reply