The Art of Distortion. Non-texturizing effects | WebReference

The Art of Distortion. Non-texturizing effects

  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.]

By "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.


Figure 1

  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.  

Created: Mar. 23, 1998
Revised: Mar. 23, 1998