Prerequisite: You are familiar with Photoshop and the clone tool.

Part of optimizing your website for all browser types and monitor resolutions can include creating a repeating texture that will scale to fit any monitor size. I’m going to show you my technique for creating a texture that can infinitely repeat width-wise from a basic non repeating texture. I’m open to pointers or workarounds though if anyone out there has anything to contribute.

The starting texture

This is just a standard wood texture that does not repeat. It has a lot of marks and blemishes that interfere with each other making it impractical to use this as a background.

You can see that if we try to repeat this texture to the right, we end up with quite a few issues that are fairly obvious. So here is how I deal with a texture like this.

Step 1: Cut the image in half

First thing we need to do is to create 2 layers from this image by cutting it in half. You can do this easily by selecting the Rectangular Marquee Tool in the Tools Palette. At the top toolbar you will see “Style:”. Set that to “Fixed Size”. Then, since our texture is 468×468, set the marquee to 234×468. This way, when you drag out the marquee, it will automatically divide the image in half.

With the texture’s layer selected in the Layers Palette, right click the image and select “Layer via Cut”. This will create 2 layers where the marquee was outlining.

Step 2: Flip

Now that the image is divided up into 2 separate layers, select the layer in the Layers Palette that contains the left side of the texture.

Once you have the layer selected, go to Edit >> Transform >> Flip Horizontal. Then go ahead and flip the right side horizontally as well. This will flip the left side of the image horizontally, creating our unsightly repeating texture line in the middle of the image.

Step 3: Fix the problem areas

The next thing we need to do is to blend the two sides of the texture together, getting rid of the seam. First we need to select the both of the two layers that we created (you can select both by holding ctrl as you click them). Then right click on the highlighted layers and select “Merge Layers” at the bottom of the menu.

Now select the Clone Stamp Tool from the Tools Palette. Change the brush size to somewhere between 10 and 15. The goal is to blend the two textures together as seamless as possible. So start blending the texture one area at a time. Try to sample from random areas on the image to reduce texture repeating.

Conclusion

Now you have a texture that can repeat-x seamlessly off into infinity. If you would like to make this texture repeat both x and y, repeat this tutorial but divide the image in half on the width-wise instead of height-wise. It is usually a tad more difficult, however, to make a texture repeat-x so I may create a tutorial for that later on. Please feel free to leave any comments or criticism. Thanks for reading!