Using Textures

Think of a Website as a piece of sculpture.

You start off with an uninteresting lump of clay, but eventually you can mold it into something wonderful. Great sites make the viewer stick around longer. They enjoy being there. It's great fun and smart marketing.

Website textures add life and depth, and make web sites come alive. Use texture everywhere that makes sense -- in the background, in typography, and on images. Surround two edges of a sidebar with shadows. Add scratches and dents to white space. Rip the edge of a text box. It would be easy to overdo it, so be careful to achieve balance and make your textures appropriate to your site's subject matter. However, even the most subtle textures can do much to improve a site; a simple shadow, for instance, gives substance to an otherwise flat and uninteresting surface.

Many textures are barely there -- a slight grainy background or lightly distressed letters. Others are over the top, screaming-at-you textures such as the old paper web design on this page by WebHub Design. Textures are best used to emphsize a mood or a feeling that you want to get across. For example, you'd want to use a website with smooth, silky textures when you're selling a chocolate bar. But for selling motorcycles, you might give it a grungy feel with dust and scratches.

Creating Website Textures

So, how do you do it? Photoshop is the texture designer's friend. We use it create and manipulate our designs. There are several ways to create textures:

• Photographs -- You can take photos or use stock photographs. We usually carry our cameras with us, and when we happen to see an incredible texture in nature such as beach shells, tree bark, or great cement, we snap it and add it to our own texture collection that we can use some day down the road. Or, if you need something specific, we'd recommend istockphoto.com where you can purchase great, inexpensive textures. Or, go to Lost and Taken.com, SeamlessTextures.net, or GRsites, where you can find freely-usable textures. Or, just do a Google search for "free website texture."
  
  
  
  
• Draw Your Own -- Use photoshop and take advantage of its filters to draw your own textures, or just do some freehand doodling using an old-fashioned pen and paper, and then scan it in. The image below is one we developed from a few lines and scrapes, and then heavily used Photoshop's filters to give interest and texture.
  
  
  
  
• Scan in Real Stuff -- Scan in pages from an old book, a few rusty nails, some paper clips, a paper bag ... you name it. Just about any textures you can fit on your scanner will work. Then, make adjustments in Photoshop. The image below was easy -- we threw a few things from our desk directly on our scanner top, scanned them in, and manipulated them with Photoshop.