// // Textures make a website feel tangible.
They give content a relationship to the physical world, a sense of place and a reality that people can relate to.
Unfortunately, simulating physical textures isn’t as simple as shooting a photo or running a few Photoshop filters.
One has to blend random noise and recognizable patterns, striving for similarities rather than pure repetition.
Here, we’ll discuss what gives textures an organic quality, and we’ll look at techniques for creating and applying natural-looking textures and seamless tiles.
Sense of Touch via Sight
A “texture” is the surface of a physical substance or object. Like sight, our sense of touch helps us understand objects. Rough, smooth, slick and crumbly are textures and tell someone what an object is made of, where it has been and if it is related to something else.
On the web, a person’s sense of touch is limited to their input device. But not all websites need to “feel” the same. Based on their experience from handling everyday objects, people associate certain appearances with certain textures. In digital art, one could say that texture is how something “feels” to one’s eyes.
While modern image editors make texture creation easy, not every texture is a surefire winner. Creating a natural-looking texture is a tricky task that mixes pattern, chaos and usage to create character.
Natural Textures Have a Measure of Randomness
Many textures fall between two extremes: regular patterns and random noise. Pattern-based textures make no apologies for looking artificial. They can be made up of a known symbol or text, and they always have a predictable arrangement.
Above, samples of tiled patterns.
At the other extreme, noise-based textures embody random static. They’re easy to create—Photoshop has its own “Add Noise” filter—and easy to tile because they lack any features that look odd when cut off.
Above, samples of noisy textures.
Natural-looking textures sit somewhere between regular patterns and random noise.
Above, a range of textures mix patterns and noise to varying degrees.
While nothing is wrong with either extreme, many good textures have characteristics of both. In natural-looking textures, seams are absent or hard to spot, and we can’t identify any patterns in repeated tiles. Their look is as distinct and effective as any regular pattern, but less blatant.
“Organic” textures have the right combination of noise and pattern.
Rational Chaos, Orderly Noise
In the context of texture, “noise” refers to irregular variations in a group of pixels. Film grain, low-light artifacts and dithering are three common types of noise that, desirable or not, are often found in complex images.
Texture noise is what makes natural surfaces look natural. But it’s not simply static. Rather, texture noise balances chaos and order.
Above, a single geometric shape repeated many times creates a pattern. On the left, the shape varies only in placement: the rows aren’t quite even.
The other shots show changes in the shape’s angle, density and size. Textures made from these variations in shape would appear more chaotic—but all of the textures would retain the original’s unique character, because the variations are based on the same basic shape.
Of course, the result still looks artificial. Obvious repetitions in noise-based textures ruin the effect because people are very good at recognizing patterns. Textures in the real world have variation in shape, color and depth.
Above, real-world textures show both noise and repetition. Burlap, pink granite and wax paper have their own “regular irregular” patterns, but each is still distinct from the others.
- With its predictable horizontal and vertical lines, burlap is the most regular. But the lines aren’t perfect. Slight variations in tone and direction keep the pattern from looking artificial.
- The pockmarks in the granite aren’t evenly distributed. Seeing the unevenness up close is hard. The characteristic becomes more apparent when seen over a wide area.
- The wax paper has both the least contrast and the least personality. A few clumps of dark shades keep it from being random noise.
Every texture has certain features—whether pockmarks, streaks, spots or rills—that make it unique. Variations in these characteristics make it work.
Above, a metallic texture incorporates overlapping ragged-edged shapes in no particular order, but it retains its distinct character. (Texture courtesy The Design Mag.)
Depth and Contrast Range from Murmurs to Screams
A key variable of any natural texture is depth. The “bumpiness” of a texture provides a sense of tactility more than color or size. But depth also adds contrast, which attracts attention and might degrade legibility.
Leer más “Creating and Applying Natural Textures”