Blog

Horizontal images? Here’s how to tackle them

Many websites these days are designed with a large, rectangular image at the top of the home page, whether it’s a permanent header image or a rotating slider.  Lots of websites 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 large-size 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 and put some striking lettering on it.  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.

In this example, the Paris Design Week site, they have used a pink colour with a gradient so that it fades to a slightly paler shade at the bottom.

PARIS DESIGN WEEK

http://www.parisdesignweek.fr

Here, Adam Hartwig has overlaid a slight texture onto his solid colours.  Both the gradient and the texture effect look great, but you don’t need to go for either – solid colour, just as it is, works very well without those extra touches, and is completely on-trend with the fashion for flat colours.

Portfolio website of award winning designer and developer based in Cambridge, UK; Specialising in rich interactive experiences for tablet, desktop and mobile.

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.

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

http://blog.abigailahern.com – here the square photo has been transformed to fit the horizontal space just by adding a block of colour with some text on it.

 

blog.abigailahern.com

http://blog.abigailahern.com – here a square photo and a vertical photo have been linked together by a strong coloured background.

blog.abigailahern.com

http://blog.abigailahern.com – here we have another vertical image; this time the background has brushstrokes of colour on it.

blog.abigailahern.com

http://blog.abigailahern.com – and here we can see a metal texture used to fill the space.

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 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

https://www.wolfandbadger.com/uk

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://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

http://www.shoplesnouvelles.com

Bona Drag Boutique

https://www.bonadrag.com

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.

Note: the brilliant image at the top is from https://caavadesign.com/.

You Might Also Like

No Comments

What do you think? Anything to add, or any questions?