Web page layouts with the GIMP

PAINTING YOUR SITE

Author(s):

Good homepage design is a question of the layout. Sometimes the best option is to use a graphics program to design the page, then translate the result into HTML code. The versatile image manipulation program GIMP can help.

Some purists believe they must compose HTML code line by line in a text editor to achieve clean results, but other developers are occasionally willing to consider alternatives. One little known alternative is the option of creating a graphics file in GIMP and then converting the file directly to HTML. GIMP version 2 (www.gimp.org) or newer includes the Py-Slice plug-in, which converts the image into a collection of tiles, and then creates an HTML table that organizes the tiles into an image that looks like the original. The results can easily be used for homepages with attractive graphics, like the example shown in Figure 1. Most current distributions give you GIMP version 2.2; we will be using this version for the remainder of this article. Suse users will need to add the Python extension and the Py-Slice plug-in manually [2]. After doing so, launch GIMP and create a new image (File | New). Then select the 800x600 entry in the Templates drop down. This is the resolution we will be using for the homepage. Then enter a name for the file; you will be storing the file under this name later. Make sure you use GIMP’s native .xcf format to have access to all of GIMP’s features.