Best way to create repeating image from existing one


Given two different image types:

  1. A regular pattern (e.g.
  2. A plain image, that doesnt repeat (e.g.

to 1) How do you extract the smallest existing pattern in the image

I currently crop it, save it and check in the browser if it repeats correctly - but thats really time-consuming / also really difficult with complex patterns

to 2) How do you make the image repeat?

I currently do it in two different ways: either put a small gradient on all 4 sides, which only works on some images and the transition doesnt really look that good, or the complex way: Have the original image in the center with a padding of ~200px to each side, copy the image to all sides (bordering the centered image), select the transitions and fill it with "content sensitive fill", and crop it again to the original image dimensions - repeats fine/looks good, but again, thats really time-consuming

I use Photoshop; the images are for website backgrounds

sry for my expressions/technical terms, but english isnt my native language

11/12/2014 12:12:00 PM

Accepted Answer

In Photoshop, using Filter > Other > Offset can help with seamless tiles and textures. Put in values for horizontal and vertical that are half the size of the texture you're trying to make into a tile.

11/12/2014 2:35:00 PM