|
|
 |
| |
[Editor's note: as it was originally published in March of 1998, the
external examples discussed on this page are no longer available. We have
therefore removed the links.]
 y "non-texturizing" I mean those effects which, first, do not
move the pixels of the original image around and, second, do not change
a pixel's state based on information from other pixels. What these
effects are allowed to do is to change the color of a pixel as a
function of that same pixel's original color. This includes
adjusting image's hue, saturation, or brightness, as well as cropping,
cutting objects out of the background, and other basic image editing
operations. If we take two source images instead of one, then in
this class also belong various combinations of images, including
semi-transparent overlaying. As a rule, the texture of the image
is kept unchanged in these transformations (except for the case when
some part of the image is completely "turned off," i.e. reduced to flat
background color).
So why are these simple effects so important? As always, the
simplest transformations often lie behind more complex
ones, and even by themselves, the effects discussed below can powerfully
change the perception of an image. It's not unreasonable to say
that in the majority of cases (although not always) these
non-texturizing effects are quite sufficient for creating a
professional-looking design composition. This is especially true
for transparent overlaying of images, which could well be called one of
the main themes of modern design.
Remember that the two most common texture types, flat color and
photographic textures, are readily available in the source elements
of your composition, so there's rarely a need to additionally texturize
them with graphic effects. Instead, what is often needed is a
method to build an articulate hierarchical system, to adjust the
relative prominence of the elements---and for this task, simple
non-texturizing effects are indispensable.
Changing the overall brightness and saturation of an image is a very
efficient method for promoting or demoting it in the composition, for
assigning it the role of background or foreground at will. The
general rule is simple: The more brightly and contrastingly colored
an image, the more visible and prominent it is on the page. Most
often, the original colored image turns out to be too bright for its
intended role in the composition. In such cases you have to depress it
somehow, using one of the following methods (the first being the
strongest and the last, the weakest):
- Completely desaturate the image, turning it into grayscale
(black and white);
- Render the image in shades of one color (for example, in
greenscale or in shades of pink; I've already mentioned this technique
in the article on photography in
design);
- Leave the image multicolored, but by shifting its color range
and directly replacing certain colors better adapt it to the
existing color palette of the composition (this method is capable of
promoting the image as well as demoting it, depending on whether the
changed palette of the image supports that of the composition or
contrasts with it).
|
|
 |
|
Link 1: The stained glass of Capstone Studio |
|
These three methods can be combined with each other as well as with
the original image---say, you can leave some parts of the image
saturated and some not. For an example, visit the splash page of
Capstone
Studio, where the first two desaturation methods, applied to different
parts of a photo, produce an abstruse symbolic picture quite appropriate
for the main graphic theme of a design studio site. The unusual
treatment of the title image, in fact, doesn't break the tradition of
the composition center dominating over the periphery.
|
|
| |
Another, less successful example of using color properties for
coordinating elements can be seen on the front page of
Vivid Studios
site. The left side of the page, with the 3D company logo and
title at the top (in which the bold font face of "vivid" is beautifully
balanced by a light and narrow---but spaced out---face of "studios"), is
nearly perfect. However, the hand-and-eye composition on the right
is more objectionable. For some mysterious reason, the designer
chose to use green, and then magenta, for the monochromatic renderings
of the hand image's halves. Both choices are problematic: Green is
directly opposed to magenta on the color
wheel, and therefore produces a contrast which is way too sharp
(much sharper, in fact, than the contrast of black and white that the
designer obviously intended to support by inverting one half of the hand
image). What's even worse, the hand's magenta is distinctly
different from the magenta of the logo strip on the left.
|
 |
| Link 2:
A desperate battle of too vivid colors |
|
| |
As you'll recall, reducing a color image to the shades of one color is a
way of demoting it towards the background (although less powerful, of
course, than rendering it in grayscale). However, here the pair of
bright, directly opposite colors created a very prominent bunch of
material, nearly dominating on the page. Most probably, it was the
designer's original intention to use the hand as a background for the
foreground eye image on top of it; however, with so bright a background
it was insufficient to leave the foreground simply full-colored.
The solution that was found is, in my opinion, rather ugly, although it
cannot be denied certain logic: The designer has drastically
increased the saturation of the eye image, giving it the untidy,
"overdeveloped" look. (In fact, this inversion of the desaturation
technique transcends the non-texturizing class of effects---it
does change the perceived texture of an image.)
Besides desaturation, another method used for demoting a full-color
image is blending it with the background (for example, increasing its
brightness on white background or decreasing it on black background).
This technique is even more common than desaturation (although it
implies a certain level of desaturation as well), especially when there
are more than one image to combine in a collage. Naturally, decreasing
opacity of an image means making it less prominent, demotes it towards
the background. For example, in the ad banner shown below, the
two identical car images, one small and dark and the other large and
faded, form the contrasting pair that holds together the entire
composition.
| |
| | Fig. 1:
The contrast in this banner is pretty straightforward, but it glues
the composition quite well | |
| |
To summarize, non-texturizing effects are essential for creating stable
connections and coordinating elements in a composition. You
cannot just place an image on your page without adjusting its colors and
brightness level, just as you cannot leave it without aligning its size
and position.
|
|
  
|
