Texture

So I haven’t done a tutorial in awhile. In fact, I haven’t even written about design much. So how about a little about textures.

Grunge is all the rage right now, but forget trends, it’s just nice to have a little texture to something otherwise flat.

Where to get textures

There are a lot of places online that offer free textures (For Web Designers has a good list of graphic sources, and you can buy some great packages. For instance, with this design, I used a denim texture from Mister Retro.

Take a picture of a texture in and around you

You have texture in your world. You have concrete on the sidewalk out front, wood on the barn, or the front steps. Everywhere you look there’s texture. Take a picture of it. You never know what might turn into a great texture with a little love from your favorite graphics program.

For example, the background I used in my previous design and on Twitter Patterns is just from a photograph of the ugly wood paneling in my basement. Our home’s previous owners thought paneling was diggin’ and though it’s ugly to look at, it works great as a texture.

I don’t have time to get into how I created this particular texture, but it took about 20 minutes of changing lighting and colors, healing brush, and offset filter, which I’ll walk you through in a minute. Here’s where that original photograph ended up.

Now if this shabby chic white paneling were on the walls… graphic design is so much easier. The best part of making your own textures though, is that it’s totally original and there’s no need to give second thought to licenses and whether or not you have permission to use something. There’s such freedom in that!

The most important thing about a texture for me is not what kind of texture you use, but to what degree it shows. If a texture is too overpowering, it’s obvious and annoying, but with the right blend, you can get a cool, classy look.

Technique

Here I’m going to give you my technique because though it may not be best, it’s the best I have to give. And I’ll also be working with Photoshop because its what I know. First, get to know layer masks and patterns. I use these two features more than anything else (except cmd/ctrl+z).

Pick an underlying solid color

For this tutorial I’ll just use a plain color with a texture over it. I do this by choosing a new fill layer (Solid Color) from the menu at the bottom of the layer pallet. It’s the one that looks like a half moon (sorry, there will be no technical terms here).

Choose a neutral shade of the color you want, just to start, then you can tweak it later by double-clicking the layer.

Create a pattern from a texture

This isn’t a step you have to do; I do this because it makes my workflow easier in the future if I want to use a texture again. First, you might want to see my process for creating a pattern first, but I’ll do it again for you here.

Open your textured image. I’m going to do this with Mister Retro’s denim which I used on this site. If you’re primarily going to use it on the web, go ahead and shrink your textured image to 72dpi if it didn’t come that way. Otherwise, just keep in mind the area you want to cover with texture to decide how large your pattern needs to be. Remember, it will repeat infinitely, so it doesn’t need to be huge.

I’ve taken mine down to 72dpi and I’ve cropped it to about 200px square so I have a nice small space to work with. If your texture has larger detail, use a larger piece.

 

Now you’ll need to check the seams. Go to Filter » Offset… and set the horizontal and vertical fields to about half the size of your canvas. You should see this separation right in the middle of your image.

Usually, you can just use the healing brush to go over the seams and blend them. If you have a particularly intricate pattern you may need to crop it more selectively from the start to get the right section of texture.

Once you’ve “closed” the seams, run your offset again a couple of times just to be sure no new seams pop up. Now you can create your pattern.

Go to Edit » Define Pattern… (you’ll see I made a keyboard shortcut because I use it so much – you might consider this yourself). Name it if you wish and save it.¹

I also recommend saving this image at this point because you might need it in another form. If you save it as a JPG now you can use that JPG as a web background later or anywhere else apart from Photoshop. If you don’t do this part now you’ll have to do it all over again later if you need this pattern outside of photoshop.

Now back to creating our texture

Now that you have a “pattern” texture to work with, let’s go back to the original file with our solid color fill.

Using the same menu, this time add a new Pattern fill and choose your new textured pattern.

Next, start experimenting with the Blend Mode. I usually start with Overlay and then move on to Soft Light and Hard Light to see which works best.

In this case, I used Overlay and ended up with this.

You can see that the color I chose is too light for this texture, so I changed the color slightly to get this.

Work with the different blend modes and see what you come up with. You might need to play around with layers. Duplicate your texture layer cmd/ctrl+j and use another blend mode on top of the first, adjusting the opacity of each to get a good result.

A simple masking effect.

When I designed a winter header for Up North Mommy this year, I ran into a wall late into the night. It was technically finished. I didn’t feel like there was anything more I could do, but somehow it just didn’t “do it” for me. So in a too-tired-to-think moment I put a layer mask on the trees and put one of my plaid patterns over them. It turned out looking like they’re wrapped and I must say, just a little reminiscent of an Old Navy ad.

Here’s the basic technique: Start with a brush or shape (I’ll get into brushes some other day). Here I put a background layer of trees.

Now I put another layer in front for “packaging”.

Next, select this front layer’s contents — cmd/ctrl+click on the layer. You’ll see your trees highlighted like so:

Now create a new pattern fill like before (remember the “half moon” menu), using a pattern of your choice.

 

There’s my peppermint pattern set there, and you can see my overlays in there too because I was just using those. Now notice the scaling at 50%. I use this a lot too, to resize the pattern on the fly. My original pattern is 300dpi so much too large for my purposes here, so I reduced it by half.

Now just hide/delete the original tree layer underneath the new patterned one and you’re done!

Make a mess with a brush

This last technique, like most of what I do, came purely by accident. I was frustrated with a design not going my way so I stopped to pray. Impatient, my prayer was short and heated, and then I proceeded to scribble with the brush I had up at the time. What happened resulted in a paper-like texture I use in almost all of my patterns. This is all there is to it. Seriously, it’s so lame, I don’t care if you don’t believe me. It’s really this stupid.

Start with a new blank white canvas, grab any brush (one with straight lines works great), and just scribble. For this demonstration I used a simple fence I doodled.

Scribbling back and forth…

La la la la…

…isn’t design fun?

Now use the offset filter like before scribbling over the seams each time. Offset, scribble, offset scribble, until you get a nice seamless image. Now save this as a pattern just like before and we’ll use it to make texture.

I’ll start with my Ornamental pattern…

Now I add my texture pattern and start tweaking blend modes and opacity levels.

My favorite is a Color Dodge blend mode.

Then there’s a Vivid Light with about 65% opacity.

And for a bolder look, Color Burn with about 85% opacity.

Let texture be your friend

Spend some time getting to know textures. While you shop, while you work, drive, and eat, look at packaging, signage, and the world around you. Note what works well and pay attention to what doesn’t. The most important lesson is subtlety. Beyond that, just enjoy what you do and the rest will fall into place soon enough.

Share Tweet me (but don't mistweet me)

Copyright © 2008 – 2010 Natalie Jost