LearnArt and the Web: Texture

Treehouse
writes on October 11, 2011

We are excited to announce Carsonified’s second book called ‘Art and the Web: Value, Texture, & Color’ written by Nick Pettit. This book is part of a larger series that Nick is writing about the elements and principles of art, as they relate to the web. We are releasing each chapter as a blog post on Think Vitamin and at the end, you will be able to download the entire book for free. — Ryan Carson.

Introduction to Texture

It’s rare for an object to be perfectly smooth in the real world, and yet in the realm of computer graphics, nearly everything lacks texture unless it is explicitly and carefully added. This is a bit different than some of the other elements of art that are implicitly present, and as a result, there has been a dearth of texture on the web up until recently. As always, times are changing, and many designers have discovered the magic of textural page elements and backgrounds.

Vincent van Gogh, The Starry Night (1889)

Like every other element and principle, we must ask: What is texture, exactly? It can be difficult to define for a number of reasons, but let’s start simple with a formal definition:

Texture is the quality of a surface.

In the real world, we tend to experience texture with our sense of touch much more than with our vision. For the uninitiated, it can seem strange to frame texture in terms of visual aesthetics. In fact, when creating a 2D work of art (or a website), visual texture is purely an illusion. However, texture is a fantastic way to add emotional depth and visual variety to any design.

Realistic and Implied Texture

Visual texture on websites is an illusion, and there are two basic types; realistic texture and implied texture. It’s important to understand the difference between the two, because their communicative effects are dramatically dissimilar.

Realistic Texture

Just as the terminology implies, realistic textures attempt to recreate natural-looking textures in order to add realism to a page. An example of this might be a background that looks like rough stone, or perhaps some crumpled paper. Adding some realistic texture will often send a more literal message to the site visitor and can make the site feel more like a physical place. This effect isn’t necessarily positive or negative, but it’s definitely important to be aware of. Additionally, realistic textures can be difficult to execute, so they should be used carefully and sparingly.

Implied Texture

Implied texture isn’t intended to look like anything, but it can add lots of emotional depth to a page. This type of texture is abstract and isn’t meant to be touched, similar to most decorative wallpaper or fabric with printed designs. Implied texture can even lack definition to the point that it just looks like noise, intended to add some slight visual variation beyond flat colors. Flat areas of color don’t always need texture, however, it is a good habit to add a bit of noise to gradients. When noise is added to gradients, the transitions in value tend to look more natural with less color banding.

Georges Seurat, A Sunday on La Grande Jatte (1884)

Layering Texture

Gleaned wisdom from contemporary fashion designers and interior decorators might indicate that you shouldn’t have too many patterns or textures in a single composition; and they’re right: textures should be used sparingly. However, when textures are built up in delicate layers, rather than thrown together in a random hodgepodge of patterns, they can be carefully controlled and crafted into a purposeful design. In fact, on most websites, it’s impossible to include only one texture because blocks of text typically read as textural elements. This technique of layered texture plays a different role with implied textures and realistic textures, so we’ll focus on each one individually.

Layering Implied Textures

It’s difficult to layer textures directly on top of one another when creating implied textures, because while the results have the potential to be aesthetically pleasing, the page element with the layered implied textures can also be too distracting. Implied textures that are layered onto a single element only tend to work when they’re subtle and light in opacity, although like anything else in art, there are always exceptions to the rule. However, at a more macro level, implied textures can work very well together when they’re adjacent to one another in a composition. In practice, textures can be combined with colors and values to create distinct content areas in a single layout. In the example below, the left area features a grid texture that is combined with a blue color. This page element is placed adjacent to a muted green. These two content areas are tied together with an abstract pattern that looks similar to stucco or a watercolor painting. Finally, a layer of noise is placed over everything to further gel the two areas together. Please note that for the sake of clarity in this example, the textures may be slightly more opaque (and less subtle) than normal. Also note, that while the interaction between the geometric grid and organic stucco pattern is visually interesting, text placed on top would need to be very bold in order to stand out.

Layering Realistic Textures

In real life, hardly any surface features a purely homogeneous texture, so layering realistic textures is actually much more natural than creating a solitary realistic texture. This isn’t the case when using photographs directly in a design, but when creating realistic textures artificially in an image editing program, it’s especially important to think in layers.

As an example, let’s create a chalkboard texture. First, we can start with the basic grain and bumpiness of the surface (left). Then, assuming this isn’t a brand new chalkboard, it probably has lots of erase marks and chalk dust built up on the surface (center). Finally, it’s typical for there to be a few stray marks or slightly less-erased spots (right). All of these layers are subtle details, so when creating realistic textures, it’s important to observe the real world very carefully.

Juan Gris, The Bottle of Anís del Mono (1914) – Detail image on the right.

One Response to “Art and the Web: Texture”

  1. Tinashe Ajara on October 8, 2015 at 11:02 am said:

    Thanks for the information really helped a lot

Leave a Reply

You must be logged in to post a comment.

Learning to code can be fun!

Get started today with a free trial and discover why thousands of students are choosing Treehouse to learn about web development, design, and business.

Learn more