Let’s make a seamlessly repeating pattern!

There are a lot of reasons you might want to make a seamlessly repeatable pattern for a client. I’m usually making them for a website background, but occasionally we make them for other things, like sandwich wraps, to flood the back of a business card or letterhead, or even decorative tape.

There are already a ton of excellent tutorials for making a seamless background pattern in Photoshop or Illustrator, and I probably won’t be saying anything that hasn’t been said better elsewhere, but I thought I’d walk through my process for these.

Let’s take a recent (and ridiculously complicated) pattern I made for a restaurant client who sells Asian street food.

When I set out to write this blogpost, it occurred to me that not too long ago, I wasn’t allowed to make website background patterns this big or complicated. We’ve come a long way, and I was curious about why that was. So I asked Gregg. He was sitting 20 feet away from me at his desk, but I was feeling antisocial, so I IM’d him.

Ok! Nice. That’s good to know.

Gregg was very excited to talk complicated geeky things with someone, and he immediately walked over to my desk with a copy of CSS3 for Web Designers, opened to a chapter about layering multiple background images over each other for a super neat scrolling effect. I read it, and understood …most of it.

But let’s get back to business. The background image I had made in my proofs had a red vector pattern laying over an orange texture. I had planned on making it one flat image, but now I want to separate them and do this nifty parallax scrolling thing. The red vector part is a bit complicated.

…so we’ll leave complicated Illustrator vector patterns for later days. Let’s focus on the wood pattern, and a shortcut for quickly making a nice, seamless texture pattern in Photoshop. This is the technique I use for things like Scratch’s blackboard pattern, Tommy Lasagna’s marble pattern, any of your more “organic”, random textured patterns.

Start with a square of the pattern you want. This is a layered combo of a few free wood textures I found online, and tweaked and saturated until it was a 900 pixel square of just the right shade of yellow-orange.

I’ve got guides at all four edges, and guides bisecting it vertically and horizontally. You want these to be as precise as possible, so turning on your “snap” feature is helpful here. *That’s under the “View” dropdown in Photoshop’s menu bar. You can pick exactly what to snap to; in this case just snapping all works pretty well.

Take your block of pattern, and move it directly down, so what used to be the middle point is sitting exactly on the lower guide.

Now duplicate your layer, and slide it straight up, so the middle is sitting right on that topmost guide.

Clip off the edges (again, snap helps you be more precise here) and turn off the guides. Now your top and bottom edges will line up perfectly, and all you have to do is fix your new middle.

Some judicious cloning and healing brush will create the illusion of a smooth, seamless texture. A trained eye can see where you probably cloned it, but this is going behind another pattern, so it’s pretty forgiving. I should really give a tutorial on how to clone judiciously now, but that would take a lot of explaining, and my “method” boils down to “push those pixels around til it looks nice.” Maybe that will be a future blog post: Pushing Things Around Until They are Pretty.

You’ll have to do the same process from left to right as well as from top to bottom, but once you’re done, you can crop to the guides, and you’ve got a perfectly serviceable repeating pattern, ready to be dropped into the background of your site!