The Art of Distortion. Non-texturizing effects

[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).

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.