16
Jun
written by: Andrew Houle // stored in: Tutorials
After I wrote my four part series on textures, I received a few questions of how to tile them. This tutorial will walk you through how I would go about it. This is a very common task and is extremely useful if you have a texture or pattern that you need to repeat across an image or a website. Using the offset filter and a little brushing up makes this task a breeze.
I am going to use the wooden texture I created in my wood texture tutorial. If you’d like to follow along with the wood texture I used you can download it here.
Let’s Get Started
- Open up your image in Photoshop
- Duplicate your image, hit ‘ctrl, j’ to do so. Delete the background layer and move it to the bottom. Your layers should look something like below.
- Now click back to your top layer (layer 1 copy). Now click filter->other->offset. Choose 250 for both the horizontal and vertical pixels, and make sure you check wrap around. These numbers should always be set to 50% of the original image size, so that you can tile the image evenly.
- Now add a layer mask to that layer. Click on the small layer mask icon at the bottom of the layers panel.
- Change your foreground color to black, and grab a your brush tool. Change the brush size to around 70px, the hardness to 0, and the opacity to around 50%.
- Begin painting in black on the mask to reveal the layer beneath in order to get rid of the seams. Be careful not to paint too close to the edge, this will make the image tile poorly. In general the black paint on the mask will look like a cross like below.
- Resize the canvas to twice it’s original size. Click image->canvas size and change the values to 1000px by 1000px or whatever twice your image size is.
- Highlight the top two layers. Click on one, hold shift, then click on the other. With the two highlighted, right click on either and choose merge layers from the options that come up.
- Grab the move tool (shortcut ‘v’ on the keyboard) and move your newly merged layer, flush to the top left corner.
- Copy and paste the layer, by holding down shift and alt, click on the wood in the top left and drag it to the right until it is flush, just to the right of the original block. Repeat that step and drag that layer down, then do it again drag the last piece to the bottom left.
- Merge the four tile layers wood tile layers you just created.
- Your seams should look pretty good now, but you may still have to clean them up some, if so, grab the clone stamp tool (shortcut ’s’ on the keyboard) and try to fix the remaining imperfections with this. To use the stamp tool change the brush size to something like 90px and 0 hardness. Hold down alt and click on a sample of wood next to the seam you want to fix. Then let go of alt and click on the seam and drag to clone the area. You should end up with something like the image below.
Now you can tile this graphic as much as you’d need to. I hope you’ve found this tutorial helpful.
Suggest a Tutorial or Article
to My Ink Blog
by Email
Twitter
Flickr
Digg
Stumble Upon
June 17th, 2008 at 1:46 pm
Excellent. As an extra step at the end, I usually create a copy of the layer and use the “Pattern Maker” tool (filter | pattern maker…). Put this at the top and lay the opacity very thin (3-10%). This creates a subtle noise layer on top that helps smooth out the tiling.
June 23rd, 2008 at 2:41 pm
this is actually good.
June 25th, 2008 at 10:03 am
Well done. You can never find “really” good walkthroughs of how to make seamless backgrounds. They are always rather vague, especially to newer users.
August 12th, 2008 at 3:40 pm
I’m definately adding you to my feed reading list
August 12th, 2008 at 3:51 pm
Installing,
Thanks for adding my to your feed!
October 26th, 2008 at 1:34 am
Brilliant tutorial, worked like a charm.