TV version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer

Weblog Entry


July 14, 2004

Flat colour and gradients only go so far. It’s nice to have alternatives for filling larger stretches of space within a design; I’ve been turning to texture more frequently. Here are some notes on that.

I’m a sucker for digitally-generated effects. I can trace that tendency back to a time when I was working with a company that had a pitifully weak stock library, and no funds to buy more. In a bind, I learned a bunch of Photoshop trickery for faking various effects and extending low-resolution digital camera photos for use in production work. It still shows in my work today, though I’ve made the conscious effort to branch out in recent years.

All this to say that when I think of adding texture, I turn to digital effects before I think of photography in many cases. Most of it is pretty basic Photoshop 101, but combining the right filters and hand-painting methods can result in some interesting and varied detail.

Texture Examples 1 through 16

Above is a sampling of a few different methods, with details about their creation below. All textures sit on a layer over top of the basic brown square, and were converted to greyscale (by hitting CTRL+U (Cmd+U) and adjusting the Saturation slider to the far left) then blended using the ‘Overlay’ blending mode. Hence, the equal tone consistent across the set.

  1. The original brown patch, nothing applied.
  2. A bit of noise (Filter -> Noise -> Add Noise) was applied (a small value, Gaussian, and monochromatic — it’s easy to over-do noise, I generally play in the 1 - 10% range). Noise is a good way to get quick, random detail into an image. It’s one of what I’d consider the two fundamental building blocks for computer-generated texture.
  3. The same square as #2, with blur added (Filter -> Blur -> Gaussian Blur). The various blur tools are great for intermediate steps during the creation process. Gaussian Blur is the most commonly useful, to the point where I used to have an action set up so hitting F5 would save me the three clicks through the menu to load up the filter.
  4. The same square as #3, with the Emboss filter added (Filter -> Stylize -> Emboss). Emboss is dangerous; without adjustment you can spot it from a mile away, but using it subtlely can introduce a bumpy, stippled texture.
  5. The same square as #2, but what has happened here is I’ve used the Marquee tool to select a roughly 10 pixel high bit at the top, and then hit CTRL+T (Cmd+T) to free transform the selection. Stretching random noise along one dimension produces a grainy pattern, which could potentially form the basis for hair or wood grain if I were to take it further.
  6. Starting again, this is square #1 with Clouds applied (Filter -> Render -> Clouds). ‘Clouds’ is the other of the two fundamental building blocks. Each application of it renders an entirely different set of clouds. On its own the filter is pretty easy to spot, but it serves as a great, randomized starting point.
  7. The same as square #6, with Difference Clouds applied. You’ll find them in the same menu as Clouds. They apply over top of an existing patch of colour or texture, and use it to form a random difference pattern. Applying them a few times in a row is additive, which allows layers of clouds to be built up on top of the source; this example is the result of 20 or more applications. (Shortcut: once you’ve applied a filter once, hit CTRL+F [Cmd+F] to do it again.)
  8. The same as square #7, with the Craquelere filter applied. (Filters -> Texture -> Craquelere) Interestingly, with the exception of the Texturizer Filter, most of the options under the ‘Texture’ menu are pretty limited. I rarely go in there.
  9. Starting fresh again. This time, no filters were used — instead, I selected the paintbrush tool, a small brush size, and clicked it into Airbrush mode (prior versions of Photoshop had a separate tool; CS and [I believe] v7 combined them into one). I started with a white brush, switched into brown halfway and continued building up over top of the white, then switched back to white to finish. The end result can be anything you need it to be, but in this case it resulted in a layered, webby kind of texture.
  10. The same as square #9, with the Motion Blur and Unsharp Mask (Filter -> Sharpen -> Unsharp Mask) filters applied. The former is just a specialized blur that smudges in a certain direction, and the latter is almost the reverse of blur. Unsharp Mask is a global sharpening tool that is usually used as a final addition to a photo just before it’s sent for printing or processed for the web; it’s easy to misuse it, so it’s almost always a last step. In this case, the blur was a bit too blurry, so some sharpening cleaned it up nicely.
  11. The same as square #10, with multiple filters applied. I’m not going to list them all here, but the first few were to modify the base texture and the last, the one responsible for the effect you’re seeing, was Torn Edges (Filter -> Sketch -> Torn Edges). Though I’d hesitate to use this as texture in a final piece since it looks too filter-like, it could make for a killer mask.
  12. The same as #11, with more filters. In this case I built up a base layer with #11, then copied square #8 over top and applied further filters to it. Multiple layers of texture often result in a more realistic image, since very few textures in real life see a repeating pattern across an entire surface without variation. That last word is the key: variation. The more varied and detailed your texture, the more convincing it will look.
  13. And now we get to the photos for comparison. This is leather.
  14. This is rust.
  15. Sand.
  16. Wood.

Compared to the last row of photos, most of the other textures obviously have a ways to go for true photorealism. With enough time and effort it’s possible to produce truly convincing results; but it’s not always necessary. Sometimes a lack of detail is a good thing. Sometimes subtle detail that’s only faintly perceptible is a good thing. There are no hard and fast rules in this, it’s just a matter of figuring out what works.

Reader Comments

Jon says:
July 14, 01h

Somewhat similar line of thought… here’s a free tool I have used now and then when needing some repeating textures.

Scott says:
July 14, 01h

Those are pretty cool textures and tips, Dave! Thanks!

Brade says:
July 14, 02h

Nice. Takes me back to the mid-90’s when you tried to find that perfect background. :) Really, I’m like you in that I’m starting to get interested in textures again. I’ve always been fond of the ones that remind you of a putting green. Maybe not for a full background these days, but for the occasional div it works. I was surprised after looking at the css zen garden how many designers used textures for their backgrounds, including a few of the turf variety.

July 14, 10h

The Inspiration Gallery seems to satisfy all of my texturing needs, although some of their best textures are labeled as borders… go figure.

Mike says:
July 14, 10h

Can you switch that HTML to an ordered list… it would make it easier to look back and forth between picture and description.

Feel free to delete this comment after you see it :)

Tom says:
July 14, 10h

One of the more useful posts I’ve read anywhere in a while. Well, for me at least!

July 14, 10h

Very nice. I usually lean towards live reference/sources when going for realistic emulation, but, in a bind, you generated some convincing stuff.

Dave S. says:
July 14, 10h

“Can you switch that HTML to an ordered list… it would make it easier to look back and forth between picture and description.”

Whoops, forgot to mention — it is, but I had to make a change to the CSS file to get it to work. (ul li {} as opposed to li {})

Refresh and reload, and you’ll be good.

pid says:
July 14, 11h

Reminds me of how I got started with Photoshop, (back in the day etc etc) using ‘found’ images, photos and generated textures to make club flyers.

I still use a lot of the same techniques, but I confess I’d forgotten how I came by them.

Maybe your next tutorial ought to be the lighting effects functions…

July 14, 12h

Subtle effects are the key. When it comes to good pictures, it’s either perfect, everything in place and just fine or it’s subtle, some things aren’t emphasized while they should for your feeling. Creating headers is also such a task. Try and create something fun, original and lively. You’ll end up using your own textures, because photos just aren’t the right thing. Or you’re lucky, which rarely is the case.

Marty says:
July 15, 01h

Lovely work, and some great tips I’ll definitely be trying in my own work. Cheers!

Jim Amos says:
July 15, 02h

It’s refreshing to see you sharing some of your graphic design techniques. Sometimes I think there is too much proliferation of generalized code-speak. With all this movement towards web standards (which I support fully, of course) there is a tendancy to neglect basic methods of _design_. I’m glad you didn’t post an entry about ‘that classic worn look’ - I think we get it already ;)

July 15, 11h

Nice article, in these days I’ve been seeing many blogs making great use of textures, two examples are and , and of course the Blogger templates, created by some of the known guys.

Now I am looking for articles about creating seamless backgrounds when you use these tiles. That’s very important. I lost the url I had about that, anyone has some good link?


July 16, 02h

An excellent entry, Dave! I use textures on my blog, and think they’re very useful and make the page more interesting and pleasing to look at.

By the way, I have Photoshop 7, and it does combine the brush/airbrush tools together.

Andy says:
July 16, 07h

There was a series that I read a long time ago on this topic. I’d like to share it. It’s very old but still informative:

Kai Krause wrote this like 9 years ago and it’s still a good read.

Caleb says:
July 19, 11h

Nice post!!! Always good to see blogs with useful information. SO when can we expect to see some texture on your site ;) It seems patterns are becoming very popular too these days. I for one like them!