How to create smallest repeatable background image from a large pattern?


My designer has sent me a background image for a website we're working on that is just diagonal lines, but the image is very large and I would like to make it as small as possible and then set it as a repeatable background to make it cover the entire element.

Is there an easy way to generate the smallest possible background image from a large pattern? I've been trying to just guess but I can't get the pattern to line up perfectly.

Here's the image:


1/28/2016 4:59:00 PM

Accepted Answer

Found an article which helped me think through how to do it. In case anyone else has this question, the "Create repeating patterns" section of this article is what helped me figure it out.

Zoom in and pick a focal point on the design, in this case it’s a point in the design where the pink line changes to yellow. Drag out a marquee until you reach the same point elsewhere on the design.

1/28/2016 5:23:00 PM