Hi,

I am a Web and Graphic designer living in Colorado and have been asked by the folks at reencoded to write some articles for their blog.  I’ll be doing some pieces on Photoshop and web design. In my tuts I will be original and always include two or more downloadable full-sized images or practical code demos that you can hopefully use for something right “out-of-the-box.”

Today I’m going to begin a Photoshop tutorial on textures and blend modes. This technique is one I use often when designing web graphics. I’m going to focus a lot on what’s happening rather than just re-tracing the steps and mouse clicks I used to create a single image. Hopefully, this will allow you to understand the process to the extent you can create your own images and not just an identical copy of mine.

All images used are either photographs taken by me or creations I generated from within Photoshop, so they are yours to use as you wish.

First, let me give you a hopefully painless definition of the two main ingredients that are used to create these images:

Digital texture:

When you work with digital images, texture refers to the illusion of raised and lowered surfaces caused by combinations of dark and light areas. Think of it as the computer’s way of imitating light skimming off the top of high points, such as mountain tops and leaving shadows in the valleys. It’s digitally induced uneven surfaces or bumpiness.

Blend Modes:

In a graphics program such as Photoshop, a blend mode determines how two layers interact and blend into each other. When using layers and Blend modes, imagine holding a sheet of clear plastic imprinted with an image in each hand. If you place one sheet on top of the other and hold the combined sheets in front  of a light a new “blended” image results. It’s more complicated than this, of course, and each Blend mode has its own set of mathematical tweaks, but combining images in slightly different ways is essentially the effect Photoshop achieves digitally with layers and blend modes.

Here we go…

1. Open a new document with the object you want to add the texture to as the background. Mine is an uninteresting rock I photographed on my kitchen table for demo purposes. Object and Size of image is your choice.

2. Search for interesting images you already have that may be candidates for your texture: pieces of tree bark, rocks, peeling paint,, etc., or just take your digital camera out in the back yard and snap a few close-ups of your driveway and lawn. The neighbors may look inquisitively, but remember, this is for Art! Keep in mind that a good texture has a wide range of light and dark tones. My first texture is from a tree down the street.

Copy the texture image as a new layer above the background.  Size the texture to at least cover the object that will be “texture-ized.”  Rename the layer something memorable. When you are finished, hide the  texture layer using the visibility eyeball on the layer’s pallet.

3. Repeat step 2 until you have enough textures of different types to experiment with. As you copy each texture onto a new layer, rename each texture layer and turn off the layer’s visibility.

4. Now turn on the visibility for (only) one of your texture layers and cycle through the blend modes.  If your mouse has a wheel (at least this works with mine), here’s a trick I use to speed up the process:

Click on the blend modes drop down arrow. When the list appears, click on the normal blend option, Without clicking on anything else, use your mouse wheel to cycle through the blend modes. When you see one that rocks, click on a non-acting space (window title bar, empty area of layers pallet, etc.) and the blend mode will be selected for that layer.

5. Hide the layer you were just working on and continue with the next layer as in step 4 until you have a blend mode chosen for each texture layer. Pick the one that best fits your project, play with the opacity, add a drop shadow, etc., convert into a jpeg and you are on your way.

Here are some before and after comparison, using various textures and bending modes:

Click on the textured thumbnail (the bottom pic)  for a full-sized version you can download or just check out. All pics are 1280px X 960px and suitable for wallpaper.

There are other Photoshop tricks that make the texture effect even more realistic, such as displacement mapping, and I’ll cover some of these in future articles.

Until then.

Related posts:

1. Photoshop Displacement Mapping
2. Essential Photoshop Keyboard Shortcuts
3. Free Collection of Wood Textures Packages
4. Create your own great Web Background / Texture Image in minutes – Photoshop
5. How to create an elegant web layout in Photoshop