We examine texture use on the web, giving you practical examples of use. After this tutorial, you’ll be a texture jedi!

Browsing around the internet, you’ll often see websites that make use of textures. Sometimes this works so well the site looks photo-realistic or fantastically awesome. Other times, the textures look poor, like some sort of rendering from the Windows 95 ‘maze’ screensaver. The effect is lost, and the design, no matter how good it is, loses all appeal.

This strikes a question, if textures can make or break your design, how do you use them effectively? How do you know that a texture is adding atmosphere or just confusing the design?

In this article, we’ll consider why and when to use textures and look at a few concrete examples, hand selected to show the very best of textured design.

Textures – What are they?

First up then, we should define what exactly a texture is. Step in Wikipedia….

There are 2 definitions of textures that suit our needs. These are:

• [Texture] feel of the canvas based on the paint used and its method of application.
• [Texture] refers to the element of design and its application in art.

We’re talking about Visual texture here. Physical texture is something you can feel, like smooth sandpaper or rough stonework. Unfortunately, you can’t apply these effects to the web. Not yet anyway….

This paint has a physical texure. If you were to run your fingers over it, it feels rough and bubbly. Photo by Abby Lanes.

Visual texture is the process of creating the illusion of Physical texture. For example, you could create the effect of brushed aluminum by building up depth with lines and a variety of gray colors. No matter how realistic it looks, it’s not actually smooth, refined aluminum. It’s virtual, an illusion that tricks the brain into thinking it’s real.

Here we have some simple Photoshop visual texture work. It’s just a brush. But the effect looks more interesting and gives depth to flat objects.

Now we know what Texture is, at least in the design aspect of the term. But why do we use textures. Why are they important?

Textures – Why use them?

Take a look at the following image. Can you spot the difference between the 3 boxes? The box on the left is flat, with no relief, no texture applied what so ever. It looks somewhat boring but clean.

The box on the right however looks a lot more interesting. We’ve got basic and subtle effects applied to give some realism. This box holds more interest. But how could we improve it?

The box on the very right has a subtle texture applied. That’s the only difference between it and the box before. All we added was some noise. The box has been transformed from flat and lifeless, to having a nice relief, giving it a stone-like quality.

We’ve included the above illustration to give you an idea of why we use textures. Because, it adds dimension, depth and realism to a design. Your work transform from a great looking piece, to an outstanding piece. It adds the final, topping on the cake. Texture brings refinement and makes white space hold some visual appeal.

These are only subtle effects. I’m sure if you’ve ever heard of grunge and seen some grunge work, the effect can be breathtaking. It makes a design feel chaotic, apocalyptic and dangerous. Perfect for rock bands, shoot-me-up games and army related sites.

But, grunge done subtly, and lightly, can add a vintage, olden look to a site. See the below examples. You’ll note the same effect, of a chaotic, ripped style can create completely different ‘looks’. That’s the beauty of texture.

Texture can make users ‘feel’. Clean, minimal design is great, but typically it carries a clinical feel. Adding texture can break this up, allowing the viewer to associate with the site and it’s content. In the real-world, there are few things that don’t have texture. Real life isn’t flat. It lives, breathes and looks interesting. Encapsulating this into a design lets people relate.

So to re-cap, you should use textures:

• To add visual interest to a design
• Introduce depth & realism
• Support a theme (such as war, the past, location e.t.c)
• Refine a design and lead the eye around the page
• To decorate and embellish

Textures – When to use them

There are very few designs that wouldn’t benefit from even just a smidge of texture – but the few that are left have a reason.

These designs are aiming to super slick and clean. Take Apple.com for example. This is a site with very little use of texture on a whole. Even Apple computers are almost 100% devoid of any texture, the aluminum machined to avoid brushing or mill marks, the keys completely flat and matte in appearance and feel.

The super clean styling of Apple.com

This is most likely to emphasize super clean, super simple approach to working. There are no unneeded shapes, no unneeded elements. This creates a very modernistic feel.

The clean style of the website is accompanied by sparing use of color. Where color is introduced, it’s incredibly bold – typically a product picture – and reels your towards it.

Adding noise or patterns to the Apple site would spoil their identity.

Typically however, you’ll be able to add textures to most designs. Current trends seems to be creating hyper-realistic layouts. These look like scenes out of an office for example, and make heavy use of textures to create the illusion and design.

The Carbonica site is dedicated to eco friendly carbon offsetting. Note the earthy, grainy texture given to emphasize eco-friendliness.

One great example of appropriate texture use, is the Carbonica site. Carbonica is site dedicated to help individuals and companies cut down on carbon emissions. The consequent design plays on the whole concept of green thinking. To tie the environment into the site layout, the designer has introduced earthy, grainy textures, such as those from cardboard and paper. These help re-enforce the whole theme of eco-friendly-ness. They remind the user of recycling, the planet e.t.c and the site has a very unique and memorable look because of that.

Textures can be used in this case to appeal. And make users feel. Thus you can see why texture usage works well, that is, when done skillfully.

Examples of texture use

Now it’s time to get our hands mucky and jump in at the deep end. Here we’ll consider some good examples of texture use and what the choices made say about the intentions of the designer and goals of the site.

Tennessee Vacation

http://www.tnvacation.com/

Tennessee vacation has to be one of my favorite ever designs and makes for a great case study. The site has several sub-sites, that allow us to discuss and analyze texture usage in order to carry a theme across several related sites.

The use of textures creates a rich, full looking design. The design appeals to me because it makes use of several different textures and effects to create the illusion that site has been constructed as a giant collage. Elements are knitted together well, and the texture holds the design together. Study this site well, because it’s one of the best texture uses out there.

But wait, the Tennessee site doesn’t stop delivering atmospheric, gorgeous design work there. The site has several ‘seasonal’ mini-sites and these deliver further awesome textured examples.

Spring

http://spring.tnvacation.com/

Spring time, and colors and textures here need to shout fresh, new and reinvigorate!

Which is what they do. The background carries a sketchy, hand drawn flower illustration. This is a reference to spring as a time for the flowers to come back.

The hand drawn feel is introduced again as a sketchy, folded piece of paper carrying the site’s seasonal title and wobbly lettering. These have a hand drawn look to them again. Final toppings for the spring site are the delicate, and ornate crosshatch patterns applied sporadically.

These again underline the sites hand-made, quaint design.

Fall / Autumn

http://fall.tnvacation.com/

The fall site is very simple in it’s texture use, and very light too. There’s less of a distressed look than the homepage, and more subtle effects. The background of this site has a scratchy, atumny patchwork look. The colors transport you to autumn, with deep reds, vibrant oranges and golds that can only be seen in autumn.

The designer has introduced some dot-matrix type patterns, that fill white space, and give the design a cosy, warm feel. Then, to top everything off, there are some very, very faint postage stamp markings, to further add to the theme.

Winter

http://winter.tnvacation.com/

The Winter site immediately hits you with a color palette of deep, festive and warm reds. To me, the perfect color for Winter is red. Otherwise, it would be blue and white, but these are very cold colors…

Anyway back to textures, the winter site has a festive, christmassy guild in the background, which breaks up what would be a pretty dull plain background.

This is basically all the texture work on this site. The rest of the depth is created by adding drop shadows and gradients to create depth and realism.

We picked the Tn vacation site because it’s a good case study of flawless texture use. Now though, you’ll need a few sources to get properly licensed textures.

Finding great textures

There are thousands of websites on the internet offering textures. We’ve hand selected some of the best. But before checking those out, let’s talk about a very cost-effective method. DIY texture gathering.

We’re lucky we live in a texture full world. Consequently, anyone with a reasonable digital camera can capture textures. If your looking for something specific, you can simply go out, and take some snaps. Loading and manipulating your images into Photoshop opens up a world of possibilities.

However, it’s not always practical or possible to make your own textures. Not to fear, here are 2 of the best texture sites on the web:

GraphicRiver

http://www.graphicriver.net

GraphicRiver have a bustling textures category, with close to 700 textured items. These items typically sell for under $10, and the selection available is outstanding. There’s everything from a metal grid psd texture: http://graphicriver.net/item/metal-psd-texture/78198 to cork board http://graphicriver.net/item/cork board/78730 and rock http://graphicriver.net/item/rock-texture-01/78736. You can pay by PayPal now too – meaning you have your texture files in double quick time!

CgTextures

http://www.cgtextures.com/

Another personal favorite, Cgtextures has a large collection of free textures for your use. Again, you can download anything from a grungy looking machine to skulls and coins.

If your sourcing your textures from the internet, it is always worth checking licensing to ensure you do not infringe any terms of use.

Now we have looked at why, how and when to use Textures. We’ve considered the Tnvacation site and how it uses textures to great effect. Now it’s time for you to take what you’ve learned and go play with textures.

Remember, there are no limits to textures. Nothing is ever permanent when working with the web. You can change anything you don’t like, so feel free to experiment and get a feel for what works. More importantly have fun!