Seamless background are really useful when you create a website because using a full image you make the page loading too heavy. Using instead a few pixels seamless image and repeating it with the CSS background-repeat property (see W3C css reference) you make your web page light and fast to load.
Let's see then!
Step 1
Open your photo.You have to choose an image that hasn't too many color or subject variation. We suppose that you are going to use the texture as a background or for a similar thing so it needs to be uniform as much as possible.
Step 2
Crop the photo to eliminate useless patterns.Check the photo image and eventually resize the canvas.
Step 3
Go to Filter>Other>Offset and set the measures as half of your picture size. My image was 1400x1400 px so I have to set 700 for both measures.
You can see that the image has been repeated in four equal tiles. This is remarked by the conjunction lines between the four squares.
Step 4
We have quite finished now. The only thing that we have to do is delete these conjunction lines using tools like the Clone Stamp Tool (S) or the Healing Brush Tool (J). The more differences are in your image, the less is easy for you that. I suggest to zoom the image close the conjunction lines to get a more accurate result.
This is the final result.
It’s awesome how simple it is to create useful stuffs. Drop me a comment below, and let me know what you thought of this tutorial.
