Had a lot of people asking me lately to write something up on how to create repeating backgrounds in Photoshop for their web pages or what ever else.

So here goes! (it’s very quick and easy)

My repeating area will be 200px by 200px, but in order to create that we need a canvas of 250px X 250px. Bring up the rulers (Ctrl + R) and mark out the 200px mark on the width and height.

Now once you have done that, start filling the area with your pattern, I’m just going to use the shapes that come with photoshop for this demo.  I’m also going to colour the background dark gray.

Ok so here is my pattern, all I have to do now is take the sections that sit outside the rules and place them over the other side of pattern.

so turn off the background, Select one side (selection in red area)

Copy all layers (Shift + Ctrl + C) and paste it (Ctrl + V)

Take the duplicated pieces and place them against the other side of the image making sure they are in-line with the original shapes.

Do the same for the top and bottom.

So here is my pattern so far (Note: the overflowing shapes have been copied and pasted to make sure it repeats perfectly.)

All you need to do now is crop your pattern down to 200 x 200px (so cut the overflow off).

Turn off your background layer (click the eye next to your background layer) and then merge all visible layers (right click on a layer and its down the bottom).

Then go to Edit > Define Pattern

Give it a name and PRESTO! its in your patterns section of layer effects.

now to add your repeating pattern to an image, select the layer you want to add the pattern to, right click, go to the pattern tab, and it should be in the list there!


If your having any trouble following this, let me know and I will try and help out…


– Alex –