Textures and Patterns in Web Design

One of the best ways to give a website color and character is through the effective use of textures and patterns. Rather than just relying on flat color, by mixing color with the variety of textures and patterns you can catch the eyes of viewers and make your graphics really riveting.

What is a texture and what is a pattern? At the most basic level, a texture is any kind of graphic which depicts a multi-toned image which is not necessarily representational of anything more than the variations in surface color of some sort of object. In design terms a pattern is a texture or a graphic which can be repeated endlessly as tiles whose sides match up to make a continuous pattern. You can align multiple pattern tiles and create a larger continuous pattern. Textures are most useful for giving images depth and variation. Patterns have the added functionality of being able to be smaller and more compact and still lend their character to a graphic of any size. Both can be used in effectively in designing graphics, but patterns also have other uses, including creating fast-loading backgrounds for web pages (see the forthcoming article on this topic).

There are lots of ways you can use textures and patterns in graphic design, but let’s focus on how they can help in web graphics. The most common uses of graphics on the web are titles and link buttons of some kind. While these can be made interesting with color and with tricks like offsets and beveling, large expanses of unbroken color, reliance on simple colors, and repetition of standard graphic techniques tends to produce graphics which don’t grab the eye, and creates an overall impression of crudity. The use of textures can add essential variety to your graphics which give your web page a more sophisticated characteristic look and feel.

In designing web titles, you generally want to make the titles bold so that they stand out from their background. In addition to using contrasting colors or an offset, this can be done by replacing basic color with the greater depth and visual appeal of a texture or pattern. The graphic to the left is a good example of the combination of these techniques. While it uses beveling and offsets, the main characteristic of the title is the wood-floor pattern which is the basis of its unique appearance.

The technique for adding a texture to a title is fairly simple. You start by picking a font and typing out the title. Generally bolder and wider fonts work better for this. We recommend ultra thick fonts like DROMON, CULDROSE, FABLIAUX, or STONECROSS. Using your preferred graphics program (we recommend Photoshop), you start out by typing your title in a dark color on a neutral background. Make sure you use a background which will drop out nicely to the background color of your page. Next, select just the text of the title, using either the magic wand or color selection feature.

Go and find the texture of your choice. Either copy this texture, or define it as a pattern. Then return to your original title graphic and either paste it into the selected space, or use the fill feature to fill that space (fills are usually used with patterns, rather than textures). The result will be the title with the pattern you chose instead of its original color. At this point you have your basic textured title.

Once you have your basic title, you may want to play around with it a bit to make the texture stand out more. One simple way to do this is to just increase the contrast of the image, heightening the variations in the texture, as seen to the left.

Another useful technique is to increase depth, using a tool like KPT Convolver which extrudes light or dark elements of the texture to increase variation. This is similar to increasing contrast, but can produce a more striking result, as shown in the example to the right. Any of these variations is more interesting than a basic title, and you can enhance them further with the application of other techniques. Unless you want to have a colored background which contrasts with your page background, your next step is to convert the image to a transparent GIF by reducing the number of colors and saving it as a GIF, selecting the background color as transparent, producing something like the example to the left.

Buttons are another essential of web design which can benefit from the use of textures. Because buttons usually end up in a very small size, we recommend working in a larger size and then reducing your button to the size you need. Let’s say we want to create a little, round ‘radio’ style button. Start out with a circle of black on a neutral background. The constrast makes it easy to select the button area or the area around the button.

Next, select a texture to fill the button with, like the one to the right. Fill the circle with the texture as explained above for titles.

Because they are so small, buttons need to have some added depth. If it isn’t dramatic it won’t show up when the button is reduced to the kind of small size buttons are usually wanted in. This can be done using a beveling tool (Extensis PhotoBevel works great with Photoshop), as in the example to the left, or using a simple manual beveling technique, as in the example to the right.

To do a simple bevel like this, just select a portion of the interior of the circle, and either lighten or darken it to contrast with the outer part of the button.

Alternatively, you can fill it with a second texture, as with the lower example to the left. You can also combine these techniques for a more complex effect, or do things like adding contrast or depth as discussed above for titles. If you’re going to end up shrinking your button to a very small size extensive texturing may be wasted effort, as much of the detail is likely to get lost after the image is reduced.

Finally, shrink the button to the size you want, and you get something like the image to the right. Dimensions around 16×16 pixels usually work pretty well for buttons. Sometimes the impact of textures on a very small button is fairly subtle, but the larger the graphic the more essential depth and variety become.

You knew the pitch had to come. The key thing to doing all of this is having a nice selection of patterns and textures. We’re ready to provide them. You can get the complete Scriptorium textures and patterns collection for only $79, with hundreds of graphics, including a wide variety of mineral, wood, metallic and artistic textures and patterns. To order go to our ONLINE STORE. If you want to try some out first, download our free texture sampler to get started.

We’re doing a special focus on textures and patterns this month, first with this revision of one of our classic articles and with a brand new article on tiling backgrounds in a few days-DN

in: Articles · tagged: , , ,

Leave a Reply