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.

Comments

[justgage]

 Really Awesome tutorial, using the clones was brilliant.