Testing if a BG will Repeat Tile Properly in Photoshop?



Testing if a BG will Repeat Tile Properly in Photoshop?


Question

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

2012/04/17
1
9
4/17/2012 1:40:00 PM

Accepted 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.

2012/04/18
17
4/18/2012 4:30:00 PM

DA01 answers how to make it but your question is how to test it. The answer to that question is:

  1. Select your pattern layer
  2. Edit > Define Pattern
  3. Create New Layer
  4. Select All
  5. Edit > Fill > Pattern > Choose your pattern
  6. Hit okay and see if it looks good
Ryan
2012/04/18