One of the most effective 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 stand out.
At the most basic level, a texture is any kind of graphic which depicts a multi-toned
image which is not strictly 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. 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 have added uses, including creating fast-loading backgrounds for web pages (see
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 gives the title 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 fonts work better for this. We
recommend 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. First we 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 16x16 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
One of the most effective 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 stand out.
At the most basic level, a texture is any kind of graphic which depicts a multi-toned
image which is not strictly 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. 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 have added uses, including creating fast-loading backgrounds for web pages (see
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 gives the title 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 fonts work better for this. We
recommend fonts like 
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. First we 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 16x16 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 
