Photography in Web Design. How to integrate
| |
 lthough 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.
|
|
| |
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.
| |
|
|
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."
| |
Created: Aug. 23, 1997
Revised: Aug. 25, 1997
URL:
https://www.webreference.com/dlab/9708/how.html
Find a programming school near you