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.

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.

The original brown patch, nothing applied.

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.

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.

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.

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.

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.

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.)

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.

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.

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.

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.

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.

And now we get to the photos for comparison. This is leather.

This is rust.

Sand.

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.

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.

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.

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 ;)

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!

Search this site:

About This Entry:

You are reading “Texture”, an entry posted on 14 July, 2004, to the Polish collection. See other posts in this collection.