Creating Repeating Abstract Patterns

Peter Pearson

I came across this awesome Photoshop tutorial the other day and was really pleased with my results so I decided to take things a little further and create some repeating backgrounds for web design, or for anywhere else you find them useful. If you want to complete the tutorial above you will need Photoshop with the 3D Transform filter installed. Otherwise you are welcome to use this image for the tutorial I have written below or use any other image you can lay your paws on.

Lots of blocks

Multicoloured Narrow Pattern Greens Reds Blues Greys

Abstract blocks

Abstract 1 Abstract 2 Abstract 3 Abstract 4 Abstract 5

Stripes of blocks

Stripes 1 Stripes 2 Stripes 3 Stripes 4 Stripes 5 Stripes 6 Stripes 7

Other Images

Splat 1 Splat 2 Mona Lisa Grunge Face1 Face2 BlackSplat BlackSplat2

This technique can be used to generate some really interesting patterns from just about any image, a few of those in column four are from my own images. See the original images here: Splat 1 and 2 Black splat and Face 1 and 2

Making Repeating Backgrounds

Once you have followed the tutorial it is very easy to make the abstract backgrounds seen in the second, third and forth columns above from your final image.

1. First take a section of your image using the marquee tool (M), this should be square(ish) for the abstract blocks effect and a longer rectange for the striped effect.

2. Crop the image to just your selection using Image > Crop, then duplicate the layer you have using Layer > Duplicate.

3. Increase the size of your canvas using Image > Canvas Size, change the width and height to 200% and click the bottom left arrow. This should give you a bigger canvas with your image in the bottom left corner.

4. Now select the top layer with the move tool (V) and drag one of the outside edges to the other side of the canvas, placing it carefully against the opposite edge. This should mirror your original image as seen above. If the little boxes to drag the edges are not visible you need to check the 'Show Transform Tools' near the top of the page.

5. Next duplicate your top layer again using Layer > Duplicate Layer, and repeat step 4 twice over to fill the remaining space.

6. Save a copy of the image and it should now be ready for use, provided you have lined it all up exactly.

The Result

Here is the repeated pattern, alternatively you can rotate the image using Image > Rotate Canvas > 90 CW to get another pattern.

Using the pattern in web design

To use the image as a repeating background as seen on this page you will need to apply the following style to the element you want to apply it to. To use it as the background for the whole page apply it to the body tag.

Using a Style Sheet:

body { background: url(YourImage.jpg) }

Using Inline Styles:

<body style="background: url(YourImage.jpg)">

Hope you have fun using this, just remember I can't be held accountable for inducing headaches in each of you websites visitors.

Using the image as a pattern in Photoshop

If you want to use the image as a pattern in Photoshop select Edit > Define Pattern. The can then be used in any document by selecting the paint bucket tool (G) and selecting Pattern from the drop down box at the top of the page.