Create Tilable Patterns for Website Background Image

Here is a straight-forward and simple (I think) method for creating images that can be tiled without looking too "gridlike".

This tutorial makes use of Inkscape (www.inkscape.org), an open-source vector graphics editor. I imagine that this method can be applied to expensive vector graphics programs like Adobe Illustrator as well. Hey, it's your money.

Step 1: Set Up the Document

After opening up Inkscape, you will want to set up the document properties. ([File -> Document properties])

First, change the width and height of the document to a number that is easier to work with. For this tutorial, I created a square image, but any proportion will do.

Next, you'll want to set up the grid. In older versions of Inkscape, there was only one grid possble. In newer versions, you'll need to create a new grid. Change the grid spacing so that these values divide evenly into the values of the document width & hegiht.

Generally, it's a good idea to work from a large image and then scale down as necessary. Because this is vector art, size techincally does not matter, but practically speaking, it will be easier conceptually with larger numbers. In this tutorial, I used a 500x500px image, and my grid is at 10px intervals.

Finally, make sure that the "Enable snapping" option is checked.

Step 2: Rectangle Tool

Use the rectangle tool to draw a square/rectangle that takes up the full document size. A large grid spacing value (see previous step) will mke the rectangle tool snap easily to the document borders.

Step 3: Cloning the Pattern

Add the image that you want to have in your pattern. If your image is an SVG file, then usually you can just drag and drop it onto your open document.

Create a clone of this image. ([Edit -> Clone -> Create clone] or you can press Alt+D)
Move the original image out of the way so that won't interfere with your workspace.

Move the cloned image into the square, and create a few copies of the clone. The reason for using clones instead of copies of the origina will become apparent later.

Here's an easy way to make copies in inkspace: drag the object to be copied, and press the spacebar to drop a copy at that spot (keep the mouse button depressed).

Generaly, you probably don't need more than 2 or 3 copies to create the pattern. As you can see, I had 3 copies of the image but I ended up deleting one later. Once you think you have enough, group these items together.

Step 4: More Cloning

Re-enable snapping if you disabled it in the previous step, as I did. In the screenshot you don't see the grid, but it is enabled.

Select the group of objects you just created, and make a clone of that group.

Line up the edges of the clone with the page border, and keep dropping copies of the clone until you have at least a 3x3 grid of clones around the original in the middle.

Step 5: Expert Movers

Now that you have you spread of clones, it's time to smooth out your pattern. Right now the pattern looks rather blocky and too regular, so we want to spread things around a bit.

To move objects that are inside a group, the most straight-forward method would be to first ungroup the objects, move the object in question, and then re-group the objects. However, this will break the links to the clones.

Instead, we want to keep the group intact while manipulating single objects within the group. To do this, hold the Control button and click on the object you want to modify. Control-click selects single objects within a group.

If you now move the objects, the surrounding clones will also reflect the change. Using this method, you can now move the images around until you are satisfied with your overall pattern. You can also resize, rotate, or delete the images. I ended up deleting one of the images because I only needed 2 to fulfil the pattern.

Step 6: About Using Cloned Images

I mentioned in step 3 that you should use clones instead of copies of images when creating the middle square ("the original"). The reason is that if your image is itself a group of objects, the control-click method of selecting grouped items will select the image's individual objects. Clones themselves cannot be edited (except for size and color) and so the control-click method will cause the entire clone object to be selected regardless of how many objects the original image is composed of.

Step 7: Finishing Touches

As an optional step, select the background square (Ctrl-click) and set the fill color to none (ie- transparent) or whatever color you want to have the background. ([Object -> Fill and stroke])

I also decreased the opacity of the group as a whole (select by regular click) so that the pattern can be in the background and not be intrusive.

Finally, the important step of exporting. Open up the exporting window ([File -> Export bitmap]). Click the "Page" button. This will export just the parts of the document that fall within the page boundaries -- that is, inside the square of the "original".

Change the exported bitmap size if you want, and then click "Export".