Creating a Tileable, Seamless Background with GIMP
In order to make a tiled background image on your website look professional, you need to make sure that images you use for the background were meant to be tiled. If an image was not made for tiling, the website will look amateurish and may reflect negatively on your content. The key is to ensure that your images are seamless instead of like the same pattern endlessly repeated. Here is a guide for creating a tileable, seamless background in the free software program Gimp.
The Dimensions of the Canvas
The first important factor is size of your canvas, which should be larger than the largest of the brushes you plan on implementing. A brush that is 350 x 350 pixels will need a canvas that is at least 500 x 500.
Creating the Image to be Tiled
Open Gimp and decide on your foreground colors, as well as the ones for your background. Create a new image, define its dimensions and make it transparent for the moment.
Make a new layer for the image. This layer will be your background, so if you are making an image with a transparent background you can omit this step. You can create a new layer by using the Layers -> Channels -> Paths dialog box.
You will now want to make a layer for the image itself. This should be a transparent layer. Choose the brush that you want from the Brush dialog. If you want to use multiple images, your best option is to use a layer for each one as this allows you to better position them. Using the brush, position the pointer over the center of the layer and click with the left mouse button to place your image on the layer. Adjust the size of the image via the “scale layer” feature on the layers dialog.
Once the image looks the way you want it to look, you can flatten it by using the “Flatten Image” function in the Layers dialog. This is necessary before moving onto the next part of the process.
Creating a Seamless Tile
If there is any overlap between the images, then the canvas is too small. You will need to have space between the parts. You can scale the layer with the “Scale Layer” function in the Layers dialog and you can add another layer to the background image also via the Layer dialog.
Scaling the Image
The image you now have will probably be too big for your web page. Your next step is to reduce its size to something like 128×128 or 64×64 pixels. Perhaps even smaller depending on what you need.
Tiling the Image
Right-click on the image and choose Filter, then Map and then Tile. Enter a size for your image. The dimensions here should be a multiple of the dimensions of the image. Look at the image, if it is not what you want you can adjust it.
Once you have your tile image, save it as tile0001.png.
September 14, 2012