Stock images for this tutorial
Full Size Screenshots
The days of obnoxious, page-filling web backgrounds are gone. Now CSS and DHTML let designers spread images across different page components, such as menus and banners, without the background overwhelming the rest of the page. Background images are an important part of web design, and because they can now span multiple CSS divisions on a single page, the need for tiles with no visible edges has become even more important.
NOTE: The Web isn’t the only place where these tiles can be used. Much of the work in texturing 3-D objects involves the use of seamless tiles.
The default patterns supplied with GIMP are nearly all seamless tiles, but few of those patterns are suited for use as background images, so it’s likely that web designers will often need to create custom tiles. With GIMP, it’s possible to create seamless tiles from scratch in a few simple steps.
Most raster image editors make creating seamless tiles a point-and-click operation, and GIMP is no exception. In this tutorial I’ll show you how to create tiles the automated way and the manual way.
The Automated Method
The automated method takes advantage of the fact that the Hurl filter generates a tileable pattern by default.
- Start with a new white canvas (File->New). The width and height of the canvas should be equal. For this tutorial I set the canvas size to 300 x300 pixels, though you could start with a larger canvas.
- Open the Change Foreground Color dialog by clicking the foreground color in the toolbox. Set the RGB values to 199/148/103 to match the medium brown shown here, then click OK to close the window. Drag the foreground color onto the canvas.
- Add a transparent layer by choosing Layer->New Layer and setting the Layer Fill Type to Transparency. Name the new layer Noise.
- Open the Hurl filter (Filters->Noise->Hurl). Set the Random Seed value to 10 and the Randomization to 50 percent. Set the Repeat level to 2 in order to apply the filter twice. Click OK to apply the filter to the new layer.
- Desaturate this layer (Colors->Desaturate).
Merging the Layers
- Make sure the Noise layer is active in the Layers dialog.
- Set the Noise layer’s Mode to Grain Merge and its Opacity to 75 percent.
- Merge the Noise layer with the Background layer (Layer->Merge Down).
- Open the Gaussian Blur filter (Filters->Blur->Gaussian Blur). Set the Blur Radius to 1 pixel. Click OK to apply this filter to the merged layers.
Saving and Viewing the Pattern
- Now let’s export this image as a pattern file. Choose File->Export to open the Export Image dialog. Browse to the Patterns directory and export the image as seamless-tile-1.pat. The .pat extension will tell GIMP to save the file as a pattern file.
- In the Export Image As Pattern dialog that pops up, type Seamless Tile 1 in the Description field. After exporting the file, refresh the Patterns dialog by clicking the refresh button (in the middle of the button bar at the bottom of the Patterns dialog).
- To verify that the pattern is seamless, open a new white canvas three times the size of the original canvas (in this case, 900 x 900 pixels). In the Patterns dialog (Windows->Dockable Dialogs->Patterns), click the new pattern Seamless Tile 1.
- Choose the Bucket Fill tool from the toolbox. Reset the options using the Reset button on the bottom right of the dialog.
- In the Tool Options dialog, set the Fill Type to Pattern fill and the Affected Area to Fill whole selection. Click the new canvas. The tile should repeat three times across and three times down, and there should be no seams.
The Manual Method
The manual method isn’t much more difficult than the automated method, but it allows designers far more creative freedom.
- The manual method starts just as the automated method started, with a white canvas sized to 300 x 300 pixels. To fill the canvas with the green shown here, click the foreground color box, set the RGB values to 5/138/30 and click OK to close the dialog, then drag the foreground color onto the canvas.
- Choose the Paintbrush tool, then choose the Galaxy (AP) brush from the Brushes dialog.
With the canvas selected, press D and then X to set the foreground color to white. Click the canvas randomly, avoiding the edges of the image.
Offset the Image and Add Brushstrokes
- Open the Offset dialog (Layer->Transform->Offset). Click the Offset by x/2, y/2 button and leave the Wrap around option selected. Click OK to apply the offset.
- Randomly click the canvas again, targeting blank areas. Again, avoid the edges of the image.
- Repeat the offsetting and painting processes several times, adding brushstrokes until you have what appears to be a seamless tile.
- As before, export the image as a pattern file and refresh the Patterns dialog.
- Open a new white canvas three times the size of the original (in this case, 900 x 900 pixels), and use the Bucket Fill tool to fill the canvas with the new pattern. If there are obvious repetitions in the pattern, edit the original image and repeat the process.
If the original image is fairly small and applied to a much larger canvas, it can be easy to spot the repeating pattern. Notice the areas highlighted—small vertical patterns are recognizable and suggest the original pattern needs additional work.
Two-dimensional patterns like these can add texture to many images. Experiment with different patterns to see how they might be used to add texture to a three-dimensional image. Start by desaturating the patterned image, then use the Bump Map filter (Filters->Map->Bump Map) to give it depth. Try adding layers above your pattern layer that contain other patterns or solid colors, then use the layer modes to blend them.