Texture

One of the things I’ve been really interested in lately is the idea of texture. That sense that something that has been created feels lived in and worn. I find myself taking pictures of random objects that show interesting textures or patterns, and then wonder how I can add things to the scene that don’t feel out of place.

The background for the lead image on this post is from the concrete deck of a local pool. I liked how the water slowly darkened the entire surface, but it wasn’t balanced or predictable how it would soak in. Even the sections where the concrete was completely wet had sections that were lighter in tone, as the imperfections in the surface were brought to light by the water.

The following is an imperfect method to add some texture to a graphic overlay to this photo. There are most likely missing instructions or unclear steps. A little messing around and you should be able to muddle through (like I did).

I first brought it into Photoshop and cropped a section I liked.

Duplicating the layer and adding a black & white adjustment layer allowed to begin to use the pattern on the concrete as a mask for any type that I would add to the picture. You can fiddle with settings to your heart’s desire, but I didn’t want to spend an incredible amount of time perfecting this section.

Then, it’s simply about adding some type, and placing it in the scene.

That is obviously difficult to read, and I wanted it to feel more a part of the picture, so I went with a darker color.

Better! Now the masking comes back in to play. I went back to the black and white copy of the picture, and then went to Select>Color Range. This allows me to adjust the level of what I want to mask out of the text. I went all the way to 200 as I liked the hard edge around the section of the photo where the concrete is dry.

This gives you a selection in the image that you can now use as a mask. Selecting your type layer and then the “add layer mask” button will now mask out the anything that is black in the image. In this case, I am masking out the “dry” areas on the ground, removing that section of the text.

This is a non-destructive method of editing, so the text can still be changed, and will be affected by the mask the exact same way. Here’s a literal example:

Coming back to our demo, I duplicated the “texture” type layer, and then inverted the mask. This now shows us the section of dry concrete that was missing before.

Making both sections visible and changing the “dry” area’s text color a little bit gives us the feeling that the water on the ground has darkened the text along with the water.

This is looking a lot better, but it still feels like the text is floating above the surface. So the last thing that I did was go back to the Color Range and reselect a color. Turning the fuzziness selection bar waaaaay down means that you select far less of the image than before.

As you can see, I left the text in there as part of the mask, which may have been a mistake, but I like the end result. Overlay this layer on top of everything else and change the layer type (in the layers toolbar above where you see your active layers) to “Lighten”. This gently sets this layer on top of everything else without overdoing it. Other layer type selections will give you far different results. As you can see the text now feels more a part of the picture.

And there you have it! A relatively short set of steps to start working on incorporating texture into a design. It’s good practice to try different backgrounds/typefaces/settings, as no two designs will really be alike. I’m pretty happy with how this turned out, especially with about half an hour to really play with it.