Home           Contact           Site Index

Creating Web Tiles

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 two techniques 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.

I'll be using this image as the example and show you how it was created. Used as a background, it looks like this:

-

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 cropped out a small section by placing my cursor on the image, and holding the left mouse button down, 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 cropped out the selected portion of the photo:



The next step was to click on the "Image"
tab in XnView, and select "Resize"



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



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



This is the resultant image



I then clicked on the "Filter" tab in XnView, selecting "Effects"



The "Sharpen" effect comes up by default.   I adjusted the slider control
until there was more contrast and slightly sharper lines in my little image.



Resulting in this image.



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.

I clicked on "Apply" which gave me this image



and then clicked the "Rotate Left" icon in the toolbar



Resulting in this 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 I went back to XnView (which was still open, with the image loaded) and selected the "Adjust" & "Brightness" feature, under the "Image" tab

and played with all of the controls until I liked the way the image looked.

Then, using the "Save As" feature, saved the final image to my Backgrounds folder.

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

Threre are still more things I can do with this image as well.   For example, if I wished to change the primarily horizontal lines, in the background it produces, to vertical lines, I can use XnView to rotate the image.

Here's how the background would look with the tile rotated.



There are enumerable other changes which could me made to the image but I'll give one more example.   I could use the Hue, Saturation and Lightness controls in XnView

to change color and appearance of the tile.

Here's the modified tile used as a background:



There are any number of variations on the same theme but this technique is dependant upon the mirroring capabilities of 20/20 to make the tile appear seamless.   The last time I checked, the developer's site for 20/20 was gone but the software can still be found with a search engine.   If you're unable to find it, contact me and I'll try to help.   Now I'll move on to another method of creating web tiles.



Another really terrific tool for creating web tiles is i.Mage, freeware from Memecode.   This little program is one of the smallest and most user friendly paint applications available anywhere on the web.   To create tiles in i.Mage I began by opening Notepad, maximizing it, and tapping the "Print Screen" key, which saves an image of my computer screen to the clipboard.   I then open XnView and click on "File", "Import Clipboard" to retrieve the image from my clipboard.

Next, I draw a small box in the white field of the image by holding down the left mouse button while dragging the mouse across the screen and finally click on the scissors icon

which crops the box I've drawn.

Next, I click on "Image" and "Resize", uncheck the "Keep ratio" box, and set symetrical dimensions for this plain white image.   In this case I chose 32 X 32.

I used "Save as" to save the image as "sample.gif" (selecting .gif from the file type drop down menu).

XnView offers a number choices for color depth.   I selected "8" from the menu.

Next, I open my blank sample in i.Mage.   i.Mage breaks images up into a grid with each little square of the grid representing one pixel.

Clicking on the little plus sign in i.Mage's toolbar, next to the word "Tools"

opens up a side panel showing the paint tools.

Because the all-white image was saved with eight colors, the palette shows one white and seven black segments.

right clicking on any palette color opens a menu from which I select "HLS cube".

I'll be honest with you here, I have no idea what an "HLS cube"is but, having played with the software, I've learned that this offers the best choice of colors to work with.   The palette that appears, following this selection, looks like this:

clicking on the paint brush in the tool panel

and then clicking on any color showing in the palette will enable you to paint one pixel at a time with that color.   without showing you in detail, since most of the controls are easy to understand once you start playing with them, I'll show you an image that I painted, onto my white sample, while I was working on this tutorial.   On i.mage's screen the finished image looked very much like this:

Each small square division in the image above represents one pixel.   I selected colors from the palette by clicking on them and then painted each individual pixel of the image in a pattern that I worked out as I went along.   I then saved the image, under another name, opened it in Irfanview and reduced it's color count to six, because I only used six colors in the image (for details on this see my tutorial on Optimizing Images) and resaved it, overwriting the original. Here's the completed image I saved with Irfanview:

Tiled, this image looks like this:



With a little judicious repainting an almost 3D effect can be produced.



Which completes this tutorial!


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 four.   This is purely an arbitrary personal preference.   Odd sizes work just fine but 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, most of which were created with i.mage.

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

I hope you've enjoyed this tutorial,
and and thank you for visiting my site.
Don Crowder      2005

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 losing detail in the image.   Details on this technique are covered in my tutorial on Optimizing Images (see Site Index).

Home           Contact           Site Index