The World of Texture. Complex textures | WebReference

The World of Texture. Complex textures

  Complex textures

Despite what I said about the advantages of flat textureless colors, many web design compositions require something more complex and natural-looking.  The first technology to come to a designer's rescue is, of course, photography with its immense creative opportunities and inexhaustible diversity.

Not surprisingly, in the world of complex textures one can also draw a distinction between "high" and "low" design styles.  Professional designers prefer to look for texture novelty in unusual places.  Playing the irrelevance game, they like to take images for their backgrounds which aren't easy to identify---especially given that in the background role, they're often artificially faded and/or blurred.

Theoretically, whatever photography has to offer in the texture realm is directly related to the specific way it combines colors.  From this point of view, photos are unusually color-rich (and grayscale photos are, so to say, rich of grays) compared to other types of graphics.  Most importantly, color transitions in photos have complex nonlinear shapes and widely varying sharpness---but they are never too crisp.

That's why photos, in contrast, make great backgrounds and fills for sharp-edged text and geometric primitives, and that's why soft gradients and blurring seem so connatural to digitized photography.  (And that's why photos look so nice with feathered edges or transparency gradients, such as the one I used on the Quiotix site.)  After all, Gaussian blur by itself is but a mathematical model of the optical (that is, photographic) effect of looking through an out-of-focus lens.

Thus, we could say that photos, along with artificial "soft" effects such as blurring, shadows, gradients, etc., represent another class of textures directly opposed to the flat color and sharp-edged geometric forms and patterns.  And since these two texture classes have more than one contrasting aspect, designers have successfully used them together to produce great-looking, sensibly integrated compositions.



I feel that by now, some of my readers may be wondering, "what the heck has this all to do with textures?" Indeed, popular notion applies the word "texture" mostly to images representing some real-world surfaces such as marble, bricks, or wood.  These "textures" or "backgrounds" are a very popular theme on amateur web pages, and the innumerable "web art collections" out there offer tons of such building materials at no cost.

I don't mean to say that any imitation of a material texture is unconditionally objectionable.  But please, if you're tempted to spread an oh-so-beautiful marble texture under your page's stuff, think twice: Would you feel really cosy in a house built of marble slabs? Are you sure you're using this decoration because your page can't be without, or simply because you want to outshine a page of your neighbor's? Material textures may be beautiful by themselves, but when used without proper consideration, they often look pretentious (not to mention that sometimes they make it difficult to read the text).

You may, of course, use a bitmap texture provided that all of its aspects---overall color tone, sharpness, size and direction of its strokes---are a good match (either contrasting or supporting) for other page elements.  Not unlikely, when you begin analyzing a texture candidate with all of the important points in mind, you'll find that it damages rather than improves your page, and that plain non-textured color (if sensibly chosen) would work much better.


  All this said, it can't be denied that many designers, not satisfied with the "flat" and "soft" options, have used either rough, harsh, or soft naturalistic textures with great effect.  Having said that, the front page of the Fitch Seattle site, with its modest use of type and graphics, the look-and-feel is that of a soft blurred background of a photographic image which was probably manipulated in a an image editing application like Photoshop. Another thing that's interesting about this site is that the background changes each time you visit the site.  


There are, of course, more conventional examples.  The site of Hornall Anderson Design Works uses a simple gradient in a vertical bar and semi-transparent text that rotates horizontally onscreen, reminiscent of a marquee sign. As you highlight the text, it moves to the center of the bar and the white intensifies.


  To summarize, if you really need a complex photographic or material texture for your graphics, what you should look for is not an exact reproduction of some real-world surface.  To see how nicely a computer screen can imitate wood or brick might have been amusing several years ago, but now most viewers are left unimpressed by the see-it's-almost-real sort of tricks.  Also, you rarely can "add a texture" to an almost ready page, because the texture solution of your design, much like its dominant colors and overall composition, should be determined before even a preliminary draft can be put forward.  

Created: Dec. 19, 1997
Revised: May 03, 2005