Photography in Web Design. How to integrate | WebReference

Photography in Web Design. How to integrate

  How to integrate

Although computers can handle photos very well, they, as of yet, cannot produce them.  Photos with their unfalsifiably life-like texture remain external, alien artifacts in the world of computer graphics.  This is why any photo image on a web page design needs integration---you cannot just put it there and forget it.  The key idea here is to avoid the Ugly Rectangle Syndrome as described in my previous article.


Link 4:  Designed for Broadcasting
For example, the photos in the heading graphics on a Broadcast Designers' Association page don't serve but purely design purposes; they aren't there to show any real people or a global map, but just to convey the notion of "many people," to assist in establishing an "international" mood.  See how artfully coordinated these images are with the logo and lettering and how reservedly they're dimmed and darkened away from the center.  The photos are not what you notice on the page in the first instance, yet they (along with the logo) are truly the foundation of the whole design.

In general, using blurring at the edges of a photo (making "soft edges") is a fairly common practice, justified by the texture characteristics of photos similar to those of blurs and soft gradients.  This makes an image much more receptive and neighborly towards the rest of design elements, and its rectangular nature becomes less of an obstacle.  This technique can be applied even to standalone images surrounded by body text.


  Technically, this trick (and even its more sophisticated variety) is explained in a Tip published by Image Club.  You can use other filters instead of Sprayed Strokes for different effects, or skip the filter in Step 6 altogether to get plain blurred edges.
Link 5:  Soft Edges from Image Club

  Another, more elaborate way to make a photo feel as if it naturally belongs to your design is to imitate conditions in which photos are viewed in real life---that is, various frames and borders along the edges, sometimes even with shadows and 3D effects.  This is a direct opposite of the previous method of blurring edges, but it somehow manages to achieve the same effect: Emphasized edges serve as ties that bound the image to its surroundings.  Of course you must very accurately coordinate the borders with other lines in your design, or you'll be prone to the Ugly Rectangle Syndrome in its most severe form.  

Link 6:  The Four Sony Wells
One of Sony's sites uses this technique for its navigation bar linking together four major sections of the site.  Thick 3D borders (with shadows cast both on the white background and on the images themselves) unite these non-rectangular abstract shots into a solid composition.

For small icon-like photos, such as those used in Image Club's navigation bar, it is better to cut the shapes out of background entirely, thereby making the objects look more symbolic and more integral to the whole design.  Another reason to de-background photos is to make them more recognizable in small sizes.  Sometimes this is accompanied by adding artificial drop shadows to all images in a row/panel.

Not only the shape of a photo needs integration.  If this is a color shot, it may happen to be out of hue with the rest of the page.  If you build your design around a photo, then you'll probably try to select colors of other elements to match the spectrum of the photo image.


  However, when you need to include a purely informational photo (most often a portrait), its natural colors may become a distraction.  The most common solution is to convert the photo to monochrome---grayscale or, more often, shades of some other color.  This approach is utilized by The Mining Company for the photos of its numerous Guides; here's one example showing the coordination of green title with the portrait rendered in "greenscale."
Link 7:  A Guide in Greenscale


Created: Aug. 23, 1997
Revised: Aug. 25, 1997