Horizontal images? Here's how to tackle them

horizontal images.jpg

Many websites these days are designed with a wide or full-width rectangular image at the top of the home page, whether it’s a permanent header image or a rotating slider.  Lots of layouts also require a horizontal format header or featured image to display at the top of each page or blog post.  

The problem is that the majority of photographs are taken in portrait format and it can be hard to find a way of creating horizontal images to fit into these spaces.  Here are some ideas that may help you.

1.  Plain colours, with added writing.

If you don't have any obvious visuals to go on your home page, yet the layout demands that you make a strong and bold horizontal statement at the top of the page, the very simplest solution - yet an effective one - is to create a simple block of colour.  You can add lettering or a design to it but this is not strictly necessary.

Either choose a colour from the colour wheel of your image editing software (e.g. Pixlr), or use the Firefox ColorZilla plugin, which gives you an eyedropper tool that can pick, and give you the hex code for, any colour you choose within your browser window.

 Founder Mantras http://foundermantras.com

Founder Mantras http://foundermantras.com

 Portfolio website of Adam Hartwig. http://www.adamhartwig.co.uk

Portfolio website of Adam Hartwig. http://www.adamhartwig.co.uk

2.  A pattern.

A wall-to-wall pattern with writing on it is also a good way of creating a bold visual statement without committing to a single, definite image.  You can find patterns at http://www.colourlovers.com/patterns (download the largest size) or at http://subtlepatterns.com (these you’ll have to “tile” or repeat using your image software - Canva, Pixlr, etc. but this isn't hard to do).

You might have to create a rectangle of solid or partly transparent colour behind your text so that it is legible.

Here on the Little Sparrow tea site, you can see a nice, simple idea, which is very effective: simply the logo reproduced in a different colour onto a rectangular slider with a statement about tea on it, designed to fuel the visitor's imagination.  Rather than a picture being worth a thousand words, it is more a case here of a picture being made up of words.

http://littlesparrowtea.com - here a rectangular slider has been created using colour and a version of their logo.
http://littlesparrowtea.com - here a rectangular slider has been created using colour and a version of their logo.

3.  Extend the space with solid colour or fill the space with a texture.

Another extremely simple way of transforming a vertical photo into a horizontal image is simply by adding on a block of colour into the remaining space, or a texture, as you can see below in this series of brilliant examples from Abigail Ahern’s blog.

blog.abigailahern.com
blog.abigailahern.com
blog.abigailahern.com
blog.abigailahern.com
blog.abigailahern.com
blog.abigailahern.com
blog.abigailahern.com
blog.abigailahern.com

In the following example from The White Pepper we can see that the figure has been placed against a solid colour which is then extended to fill the space required, a trick you see repeated on the Wolf & Badger site (further below) where the cream colour of the wall is continued to form the background of the text.

http://www.thewhitepepper.com
http://www.thewhitepepper.com
Wolf & Badger
Wolf & Badger

4.  Collages.

A collage is an obvious answer to the horizontal image problem - just put several images together.  The following are some nice examples of collages.  Note the different ways of adding writing - sometimes the writing fills a gap, and sometimes it's added on top of the images with a background behind it so it's legible (and this can look more interesting, too).

 http://neshawoolery.com

http://neshawoolery.com

http://cartolina.com
http://cartolina.com
http://www.cookbookvillage.com - this looks like three separate images, but in fact it's just one that links to the store page.
http://www.cookbookvillage.com - this looks like three separate images, but in fact it's just one that links to the store page.
http://stylebyemilyhenderson.com
http://stylebyemilyhenderson.com
http://www.shoplatitude.com
http://www.shoplatitude.com
http://www.withlovefrombrooklyn.com
http://www.withlovefrombrooklyn.com

You can easily create collages with Canva or with PicMonkey - with the latter, you can remove the space between images if it suits your purposes better.

Tip for making horizontal collages with PicMonkey

Choose the “Cards” collage option to get horizontal layouts, and unlock the size option beneath the collage in order to create the image to the exact size or proportion you need.  Once you’ve added your images, click the paint palette to adjust or remove the spaces between the images; if you want to add text, make sure you’re happy with the way the pictures are, then click “Edit” above the collage to add your text.

You can also create more complicated collages, such as the one below from Les Nouvelles, or cut out items and place them on a white (or solid colour) background, as seen below on the Bona Drag Boutique site.

Les Nouvelles Home
Les Nouvelles Home
Bona Drag Boutique
Bona Drag Boutique

5.  Take a picture specifically designed to work as a horizontal rectangle.

Perhaps the most obvious answer is to take a photograph especially for your slider or blog post featured image that will work well in the "letterbox" shape - without you having to do anything extra save, perhaps, adding some lettering, as in these examples:

http://sarahjenks.com
http://sarahjenks.com
http://shop.eatboutique.com
http://shop.eatboutique.com
http://calmtheham.com
http://calmtheham.com

I hope these examples have given you some ideas on how to get around the horizontal image issue.  You’re bound to have run into this problem yourself when creating your website or posting to your blog.  What solutions have you found?  Do let us know, and feel free to share a link to your collages or other visuals in the comments, down at the bottom of this page.