Make a Pattern Repeat Without Visible Edges

Click screenshots to view full size.

Nothing is more annoying to me than seeing a background on someone’s site that doesn’t repeat properly. This tutorial will teach you how to get a pattern to repeat smoothly, with no visible lines where the repeated images meet.

For this tutorial, I will demonstrate with the following image of wood grain that I found on Google Images:

First, let’s take a look at what this image looks like when repeated as it is.

See all those lines where the edges meet? Instead, we want it to repeat smoothly with no lines or choppiness. This is actually a very easy thing to do.

First, open a new canvas that is both twice as wide and twice as tall as the image you want to repeat. Move the image into the bottom left corner of the canvas, and make sure that the edges meet the edge of the canvas exactly, rather than going past the edge or coming up short.

Right click (or left click on a left-handed mouse) the layer containing your image in the layers window, press “duplicate image”, and select “okay” when prompted.

Move the image in this new layer to the upper left corner, again making sure that the edges line up. With this layer still highlighted in the layers window, go to Edit>>Transform>>Flip Vertical. Do you notice how the two images transition smoothly into each other now?

Merge the two layers into one by selecting Layer>>Merge Visible. Duplicate this layer, and move it off to the right half of the screen, filling the rest of the empty space. At this point with the specific wood grain image I am using it looks like the two layers blend perfectly into one another, but with another image this would not necessarily be the case, so we will continue. As the final step, with the most recently-created layer still highlighted in the layers window, go to Edit>>Transform>>Flip Horizontal.

After completing the above steps, my image looks like this:

Now this image is ready to be used as a flawlessly repeating background/pattern. What we have done is made it perfectly symmetrical, so it will meet up with its own edges nicely. Here is the finished result repeated smoothly:

Click for full size:

Good luck, and feel free to contact me with any questions regarding this tutorial.