Tip: Photography for the web

What with the summer weather finally here and some good light, it's a good time to be taking photos.

While I do encourage people to take nice, artistic photographs, and include them on a website perhaps in a frame, this is ultimately limiting. If you would like to end up with photos you can use within the design of a website, you need to take a different approach to setting up your shots. The composition will be done using graphics software at a later date, so you need to avoid doing the composition when you're in the field.

The following guidelines are based on the main reasons I have to rule out a particular photograph as suitable for a piece of graphic design.

Don't crop the subject

It may look artistic if the subject extends out of the frame, because it places the subject better in frame and leads the eye in the opposite direction. But it's the number one reason for ruling out photographs from a layout. With no cropping of the subject, the designer can place a photo anywhere and composite the subject into the layout. With one edge running through the subject, the designer is constrained to place that edge along a natural edge in the layout, or failing that, hide it behind something else. With each additional edge that runs through the subject, the designer is more and more constrained with what can go where.

Don't take black and white shots

It's easy to convert colour photos to black and white on a computer; the opposite is not possible. Take colour photos just in case you need them.

Use a mixture of different shots

Most photographers will take multiple shots of a subject, but often this will just be a process of refinement - to try and capture one excellent photograph. You should aim for a much more varied mixture, of portrait and landscape, wide-angle and close-up, different angles and so on.

Try and take the same shot of different subjects

Designers will often be creating a suite of graphics to work together, so take similar shots of different but related subjects.

Include acres of background in your shots

In artistic photography you're told to put the subject off-centre in the picture, roughly a third into the frame.

In web design we often have very long or tall regions to fill, quite different dimensions that you might encounter in print design. The aspect ratio of the photos that we might be putting on a website is rarely 16:9 let alone the traditional 4:3. We're more likely to deal with aspect ratios of 10:1.

To successfully frame photos that can be cropped to a very wide or tall aspect ratio, your subject should be much smaller and nearer the edge.

Don't use depth of field effects

A short depth of field can really 3D effect to a photograph. But it is difficult to cut out something that's blurry, and sometimes that's what designers want to do. A blurry background isn't a problem, as part or all of the background may be removed, but when parts of the subject extend out of focus it's impossible to separate the subject from the background.

A designer can fake a depth of field effect if the subject is in focus.

Don't strive for contrast

As a rule of thumb, artistic photos look best with dark darks and bright highlights. Nearly all B2B and the majority of B2C websites are dark text on a pale background, and the dark darks contrast too much with the light and airy environment of the average website. That's something that you can't actually fix with colour curves as you can only produce murky greys. A subject that is mostly well lit but fades to black is as hard to work with on a pale website as one that is blurry or cropped: there's no good way to blend the dark bit into the site.

If your website is on black or dark grey, you're in luck. These are ideal for publishing artistic photography and really good contrast will look stunning.