Photoshop Tip: Create a Seamless Texture

In this beginner tutorial I will run you through some simple steps to take a texture of your choosing and turn it into a seamless texture that you could use as a repeating background or anything else you want.

I am going to use a rocky texture I downloaded somewhere. You can use this file if you want. Just click on the image for the large version.

Now start a new document in photoshop and I am going to make my canvas 1024X768px.

Size your rocky texture down using ctrl+t to transform it. Then hold down shift and position our mouse on the bottom right corner and drag it toward the top left corner. The reason you hold down shift is because it will size down the object evenly. Try without shift and you will see how the object reacts.

Here is the size I sized mine down to

To show you what I mean by seamless duplicate your rocky layer in your canvas and move it to the right of it.

Now do you see the seam?

If you duplicate them a couple more times and move them underneath the others you can see how this texture will not be seamless in any way.

Ok you can delete all the duplicated layers, you won’t need those. I was just showing you what I meant by seamless.

So now copy your sized down rocky layer into a new document. Just grab your rectangle marquee tool and highlight around the layer on the canvas and hit ctrl+c then ctrl+n for a new document.

When you hit ctrl+n hit ok on the window that pops up. Then paste it in the new document with ctrl+v.

Now to make this texture seamless, photoshop has a nice little tool to help out with that. Its called the offset filter. To use this go to filter>>other>>offset

The offest filter copies parts of the texture and rearranges them so all we have to do is slight editing to get the texture looking good.

Here are the offest filter settings I used:

All I did was experiment with the horizontal and vertical settings until I got the texture to where it needed the least amount of editing. What I mean by that is it will have the least amount of seams.

And here is what my texture looks like after that:

Do you see the seams photoshop added to the image? I highlighted them in the next image.

How do you get rid of those? That is easy as well, by using the clone stamp tool.

This is a very easy tool to use so it should be easy to learn by any beginner.

Grab your clone stamp tool

Choose a 21px soft brush

To use this tool hold down the alt key on your keyboard and click to the left or the right of the seam with your mouse to pick part of the image to cover up the seam with.

See how I am getting rid of the seam?

Now my texture looks like this

Now drag that into the document you were working in before and compare it to the texture as it was originally. You can see how in the new one certain areas are repeated, but not much. You can get rid of the other layer that we started with or just hide it.

Now do like we did before in the first few steps and duplicate the new layer and you should see no seams when they are side by side or below or on top of each other.

To show you this working in action I will do some simple css/html coding to make this repeat on the background of a website.

I will be using dreamweaver, if you don’t have that I am sure there are some free programs you can use out there that will do the same thing.

So I saved the texture as a .jpg image called seamlesstexturetut-bg.jpg

I am not going to go through the steps of using dreamweaver but I will show you the css I write for this to work on a website.

In between my ending header tag and beginning body tag of dreamweaver I will write this code:

That is all the code needed to see this example at work.

Click here to see the working tutorial

Thanks for checking out this tutorial!

By John Overbee

John Overbee is a graphic designer for the iEntry Network.

Leave a comment