Testing if a BG will Repeat Tile Properly in Photoshop?

I am frequently working to create background textures in Photoshop to be used on the web. Unfortunately I usually have to guess, or just use freebies from other websites.

I would like to build my own textures in Photoshop and check if they tile properly before exporting the image. Is there a way to do this quickly? I remember a method using offset, but I’m not familiar with the tools.

Below are a couple example background tiles so you can see what I’m talking about:

tile1

tile2

Answer

  • create your image. For example, let’s say it’s 200px square
  • go to FILTERS > OTHER > OFFSET and type in x and y numbers that are half your image size (in this case 100px)
  • this will shift your image over that many pixels and put the pixels that were moved off the canvas on to the other side. You now will see a seam running down the middle of your image where the pattern doesn’t quite repeat fully.
  • touch up this seam to make it a smooth blend using whichever tools you like (clone tool is a common option).
  • save your new image.

For more complex images, you may need to do a final offset of say 1/4 the pixel dimensions to touch up the edges you might have missed the first time that fell near the edge of the canvas.

Attribution
Source : Link , Question Author : Destiny Islands , Answer Author : DA01

Leave a Comment