Using texture in your design

If you've checked out some of my design, you can probably see I'm fairly fond of using textures. Textures or texture patterns can be an interesting way of adding some spice to graphics or areas of solid color in both web and print design. They can add depth and a lot of interest if done carefully. There is endless room for creativity when choosing them. A texture can be something organic like wood grain, paper, stone, cloth, metal, water, paint brush strokes, etc. It can also be something you create yourself digitally (using Photoshop filters, the paint brush, or blends of different layers for example).

There are many ways to find textures. The Internet is a great resource and there are many stock photography sites that have excellent textures. Some of these sites are free or low cost. Google Images is a vast resource, although you may need to get permission to use what you find there and you won't find much in the way of high-resolution for print. You can also do normal search for "textures" or "stock photography" to find many sites offering royalty free images, or try the Resources page for some handpicked places.

Besides the Internet, scanners and digital cameras are great tools for coming up with your own. Try scanning some old yellowing paper with stains on it for a grungy effect, or just crinkle up a piece of paper, re-flatten and scan. Take pictures of tree bark, lichens, patio stones, water or rusty slabs of metal. The list goes on...

Once you have the texture in Photoshop, you'll want to drag it into the document that has the area you'd like to texturize. Turn the opacity down a bit (maybe to 50% for now) and position it over the area. Is the grain of the texture looking right? If it's too small you might have to rescan at a higher resolution. If it's too big, you'll want to resize the texture (cmd-T on Mac or ctrl-T on PC) until the grain is how you like it. Once the grain looks correct, you're going to want to hide or erase the areas that overlap past the area you want to texturize. The lowered opacity will help let you see the edges. I prefer to use a layer mask in order to erase non-destructively, but you can also use the eraser tool or make selections and delete.

Once you're happy with the area the texture is covering, experiment with blending modes and opacity. If you want the texture to only take on the color below it (and strip out the colors from the texture), use luminosity mode. If you want to darken things up a bit, use multiply mode. To lighten things, use screen mode. Overlay mode is also a common choice. As for opacity, that's going to depend on how subtle you want the effect to be. Many times, a low opacity of between 5-15% is all I use. And if you're texturizing line art, or art with detail you need to preserve (rather than a solid fill), a lower opacity will help what's underneath blend with the texture.

Using a Layer Effect, you can add a texture that is a repeating pattern. Repeating patterns are patterns/textures that seamlessly tile. Sometimes they are useful in print (like in textiles), but I find them especially useful in web design. That's because you can lower the download time of your site drastically, by exporting only a small image and then making the tiling occur on the webpage using CSS. Including many large images is not recommended for websites, but that's another subject.

To make a repeating pattern, you need a layer that has a solid fill, or any object you want to texturize that has its own layer. Go to your layers palette and click on the layer you'd like to add texture to. You will notice an icon on the lower left that says "Fx". Click that and choose Pattern Overlay. From the drop down menu next to the word "pattern", find a pattern you'd like to use. If there aren't any interesting ones (there probably won't be...), there is a very small arrow on the upper right side of the pattern picker dialog box. Click that submenu, and you will be given options to load a pattern, or at the bottom there is list with some built in pattern libraries to choose from. You can choose one of those or download and install a new pattern library from the Internet. Once you have your pattern, in much the same way as before, you can adjust opacity and blending mode albeit right in the dialog box.

The sky is the limit for how you can use textures. You can take only their luminosity values (lights and darks), color, saturation values, etc. You can run a levels adjustment on them to exaggerate or smooth them out. Try making interesting edges by using a grungy eraser brush along the edges. Use your imagination and have some fun.