Web page layouts with the GIMP


Article from Issue 59/2005

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.

Buy this article as PDF

Express-Checkout as PDF
Price $2.95
(incl. VAT)

Buy Linux Magazine

Get it on Google Play

US / Canada

Get it on Google Play

UK / Australia

comments powered by Disqus

Direct Download

Read full article as PDF:

Web_Design_with_Gimp.pdf (322.50 kB)


njobs Europe
Njobs Netherlands Njobs Deutschland Njobs United Kingdom Njobs Italia Njobs France Njobs Espana Njobs Poland
Njobs Austria Njobs Denmark Njobs Belgium Njobs Czech Republic Njobs Mexico Njobs India Njobs Colombia