Today we will be working with the offset filter in Photoshop to help create a seamless textured pattern. If you ever find yourself trying to make repeatable patterns for the web, then you’ll definitely want to follow this quick tutorial. I’ll be using a random texture that I found somewhere on the internet, you can grab it here (click on the thumb for the full size):
Step 1 – Setup Your Photoshop Document
Go ahead and create a new photoshop document that is 600px by 600px. Choosing a large tile size will make our background seem less tiled, but may require a little more work depending on the image your trying to make repeatable. Specifically, if your source image has a lot of color variation you might want to choose a smaller tile size to make things easier on yourself. The image we are using has a very consistent color scope, so our 600×600 tile size should be easy enough to work with.
Step 2 – Paste in the Jute Texture
Next you need to paste in the jute texture. I’ve oriented mine to the top left and scaled it down until it just fits the canvas. You’ll end up cutting off the right side of the image.
Step 3 – Using the Offset Filter
Now comes the fun part! With your texture layer selected, goto the top menu and choose Filter > Other > Offset. We want to offset our image horizontally and vertically by 300-pixels, allowing us to see where our pattern has its seams. After applying the filter you should see your texture now has 4 defined quadrants. In the next step we are going to clean those up and make our pattern seamless.
Step 4 – Smooth the Divisions
This is the hardest part of making seamless textures. We need to smooth out the dividing lines using photoshop’s many helpful tools. I’ve found two different ways to do this, but the method you use ultimately depends on the texture you’re working with. Some textures are really easy to turn into a pattern, other textures are almost impossible. This jute texture is relatively easy thanks to the consistent color, but there are a few tricks I used to get things just right.
Method #1 – (I found this works better for this texture)
- Copy areas of the texture that have no seam and paste them (in a new layer) on top of the seams. Adding some feathering to your selection (around 5px) will make things a little smoother.
- Use the eraser tool (using a soft & small setting) and erase the edges of your new layer.
- You’ll find that the edges of your new layer look a little blurred and don’t really fit in… to fix this use the sharpen tool along the edge.
- Use the clone tool to remove the seams
- If you find things are blurry use the sharpen tool to make things fit properly.
TIP: When you have a relativity seamless pattern you can use the burn and darken tools to make the lighting more standard…
It definitely takes a little time to get things perfect, but it’s worth it in the end. It took me around 20-minutes before I had a semi-perfect seamless texture. Below you’ll find the final image: