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.

Comments

Add New Search RSS

Daddy_Design  - Another way to make a texture 11-20-2009 2:57pm I picked this technique up from an article about making textures for 3-D. Take an image (from a picture you took or one you found online) and open it in photoshop. Select filters and go down to other and select offset. You want to set this so the edges are in the center of the image. It will look odd. Next you want to grab the stamp tool and samlpe the area near the hard lines. Then start stamping to hide the edges. Once you are satified with the look, save it as a pattern. Now you can use it just like the pattern overlays that photoshop has as default. Happy texturizing. Jarid Bloemker www.wheresdaddy.hostoi.com ReplyQuote

glucosamine 12-21-2009 9:42pm I love your Blog.Hope i will have some time soon to upgrade mine as well.It is so informative!Thank you so much for sharing beautiful blog with us.You have done a great job.I can't wait to see the next work of you!This is such a great idea.I'll be keeping a close eye on your blog and looking forward to each new post. ReplyQuote

Write comment
Name:
Email:	do not notifynotify  (email is kept private)
Website:
Title:
	-color-aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpleredsilvertealwhiteyellow -size-tinysmallmediumlargehuge
	Please input the anti-spam code that you can read in the image.

Powered by !JoomlaComment 4.0 beta2