Seamless tiles
Seamless tiles can be used for Web page backgrounds, desktop wallpaper, surface textures in digital illustrations, and more. There are many ways to make a seamless tile, but here is a technique I use frequently from my original art work.
Step 1: Below is a section of my original textured art work, that I thought may work well as an entire background for a web page. I realise it is a strong colour for a web page, but for illustration purposes it should get the idea across. I took a small section and copied it into a new document of 130 pixels square, resolution 72 (pixels per inch), RGB mode.
|
This is before the seamless procedure, click on image to view. As you can see it needs some work to get rid of the ugly seams. |
Step 2: Now go to 'filter' then scroll down to 'other' then choose 'offset' and set the Horizontol & Vertical to 65 pixels (which is half of the original tile size of 130 pixel square). Make sure the 'Wrap Around is checked.
|
Here you can see the results of the offset filter. The edges need some work on. |
Step 3: Click the clone tool in the tools pallette, I used a brush size of 17. Then place just above one of the seams by holding down the 'alt' key, to pick up the area you want to copy, then release the 'alt' key and go over the seams, each time repeating the same steps until all four areas are complete. I needed to go back to on my image again, 'filter', 'other' then 'offset' and repeat again, this time it only needed minimal work with the clone tool.
|
Click on the tile to view the seamless background. Step 4: Now go to'Save for Web'to optimise your tile. |
