Web tiles are small, square or rectangular images that can be used as backgrounds in web pages or email stationery. In use, they're "tiled" together endlessly to create a continuous image which appears beneath the content of the web page (or email).

By far the most popular web tiles are designed so that the lines between images are invisible, or "seamless" and there are several ways to create such images. This page outlines one technique for creating seamless web tiles using freeware tools that are readily available by download from the Internet. Links to the the software I'm using will be included, but any software, with similar features can be used. The background of this page is this seamless tile image:



(what's that you say? No it isn't? Keep reading, it becomes clear in the end)

I'll be using this image as the example and show you how it was created. This tile makes an attractive background but text doesn't show up on it particularly well so I'm displaying my text and images in this table, with a neutral background to make it more easily readable. Let's get started!

To begin with, I selected an image that I picked up somewhere on the web. Here's the image I started with:



Opening this image in XnView (my favorite freeware graphics editor), I cut out a small section by placing my cursor on the image, and holding the left mouse button, while shifting the mouse, until I'd selected the segment of the photo I wanted to work with.



Next, I clicked on the icon, at top center of the XnView screen, that shows a pair of scissors.



This clipped out the selected portion of the photo:



In the resize window, I unchecked the little box marked "Keep ratio"



Then set the dimensions to 16 X 16 and clicked on "OK"



I then clicked on the "Filter" tab in XnView, selecting "Enhance Focus", and clicked it (once only).



Followed by the "Enhance Detail" selection, under the "Filter" tab, and enhanced the detail in the image three times (3 times) in succession.



I then saved the image, giving it a temporary name, to my desktop by clicking on "File", "Save As", typing in a new name, and directing the browse window to the desktop. Here, I minimized XnView, and opened 20/20. This is free software, but it's not freeware, it's adware. The ads are fairly inconspicious, and it doesn't download new ads when you're online. It sticks to the ads that were in the initial download. 20/20 is, on my system, a little "buggy" at times, probably because I don't have enough RAM, but it has some unique features that make it very useful for creating web tiles in particular.

I opened my temporary image in 20/20, clicked on the "Image" tab in 20/20's tool bar, then clicked on the "Mirror" icon



20/20 created two images, side by side, displaying them onscreen and giving me the choice of applying this modification to the main image.



Repeating the steps to produce a mirrored copy gave me this image:



Which I saved to the desktop using a slightly different file name and closed 20/20.
Note:   For some reason, 20/20 has trouble overwriting an image. It offers you the choice to "Replace Existing Image" but it produces an error message when you click "Yes" so, when working in 20/20, I automatically give a modified image a slightly different name in order to "work around" receiving the error message.

At this point I minimized 20/20 and opened my newly modified image in XnView. I again used the "Enhance Detail" feature in XnView three (3) times and hit "Save". XnView will, by default, ask if you want to "Replace Existing Image" and has no problem saving the new image, under the same name, when you hit "Yes".

Finally, I reopened the image in 20/20 and had a look at how it tiled, with the "Tile Preview" feature.



I decided that the image was too dark, so went back to XnView (which was still open, with the image loaded) and used the "Adjust" & "Brightness" feature, under the "Image" tab



setting it to a point that made the image look a little lighter



Enhanced the detail one final time, and, using the "Save As" feature, saved the final image to my Phil & Moke's Backgrounds folder."

All of which brings us back to where this page started, with this image:



Which my wife felt didn't look good on this page, so, back I went, into XnView. Under the "Image" tab in XnView, you'll see the word "Adjust". When you scoll down to it, a side-bar comes out and on that side-bar you see the word "Balance". If you click on "Balance", you'll get a screen that allows you to adjust the red, green, and blue content of a graphic image in small increments. I adjusted the image several times, saving it under a new name each time, and showed her how each image looked, on this page, until she liked it. This is the final image:



Which is why you see this image as the background of this tutorial page, and you can easily see that it no longer resembles the image from which it was created. That's the interesting thing about background tiles. If you don't like them, you can always change them to suit yourself (or whoever *grin*)

Which completes this tutorial! I hope you found it helpful or instructional.

It isn't necessary for web tiles to be any particular size, but I like to make mine in sizes that are multiples of the number eight. This is purely an arbitrary personal preference though so you needn't worry about odd sizes. You can make them any size you like.

Smaller images are generally faster loading, and some very nice backgrounds can be made with images that are quite small. Here are a few examples.

The backgrounds for each segment of this table are 12 X 12 pixel images

We hope you've enjoyed this tutorial,
and and we thank you for visiting with us.
Don Crowder     2002
Updated   July 31, 2003

Editor's Note: Since this tutorial was created, I've discovered that, with most (but not all) tile images, smaller files sizes will result if they are saved as .gif images, reducing their color count as much as possible without loosing detail in the image. Details on this technique are covered in my tutorial on Optimizing Images (see main menu).