The Art of Distortion. Introduction

oday, probably the hottest graphic software titles on the market are various add-ons and plug-ins, effects and filters, applets and gadgets, offering all imaginable sorts of graphic stunts and distortion feats.  Sure, if the booming graphics market had not required this "cool stuff" over anything else, programmers would not spend so much time developing image distortion utilities.  Legions of graphic neophytes are enthusiastically sharing tons of graphic recipes, and a program is considered obsolete if it cannot do one-click drop shadows and bevelled buttons.

I'm not going to discuss graphics software here (although I want to point out that you cannot really design anything without a good drawing package as your first tool).  In my previous articles, in contempt of this popular trend, I've been talking mainly about general design principles, such as the use of color or size-related issues.  This month, I decided to catch up on the hot graphic frippery (which, more than a year ago, I termed "finishes").

The title of the article implies that all effects involve some sort of distortion, deterioration of the source image.  This is indeed the case, although the "distortion" meant here doesn't imply making your image "worse" in an aesthetic sense, but only some degree of loss, or corruption, of the original image's information (Web designers know that, if the source is a photo or another complex graphic, applying an effect in many cases reduces the file size of the image).  This "degradation," if tastefully done, can be more pleasing to human perception than strictly regular forms or perfectly authentic photos.  And you may have noticed that the motives of degradation and abandon are pretty modish in modern design.

Of all abstract design aspects we've studied so far, textures (especially the complex photographic and naturalistic textures) are the most relevant for the discussion of effects, because the result of most transformations boils down to changing the texture of the original image.  One consequence of this is that the images with different inherent textures, the two most common being photographic texture (e.g. in page visuals) and flat color (e.g. in text headings), are quite different in what effects work best with them.

In this article, we'll look at how various finishes affect the perception of an image, how they can complement (or clash with) the main pillars of the composition.  The first section covers simple (but very important!) effects that do not actually affect forms and textures, only changing the color and transparency properties of images.  The next section surveys the more complex and more numerous effects that blur, smear, or diffuse the image or its parts.  Finally, we'll investigate how graphic transformations affect outlines, and how complex, amorphous shapes can be successfully used in a predominantly geometric Web page.