Web page layouts with the GIMP

PAINTING YOUR SITE

Article from Issue 59/2005
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.

Buy this article as PDF

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

Buy Linux Magazine

SINGLE ISSUES
Print Issues
Digital Issues
 
SUBSCRIPTIONS
Print Subs
Digisubs
 
TABLET & SMARTPHONE APPS
Get it on Google Play

US / Canada

Get it on Google Play

UK / Australia

Related content

  • Custom Text in GIMP

    GIMP offers plenty of options for creating custom text effects. We'll show you how to sweeten your text with bold outlines, tasty color, 3D effects, curves, and more.

    more »
  • Gimp Scripting

    Many users turn to GIMP for pictures in the window, but some may not realize GIMP also has scripting capabilities that allow you to automate recurring tasks. The Python scripting language is a useful alternative to the GIMP’s integrated Lisp dialect.

    more »
  • Perl: Photos Effects

    With the GIMP image editing program, and a little help from Perl, you can enhance your digital photos and transform a modern image into a nostalgic turn-of-the-century shot.

    more »
  • Animation with GIMP

    Although developed for editing individual images, GIMP has everything you need to create perfect animations via plugins and scripts.

    more »
  • GIMP Maps

    GIMP adds texture and other three-dimensional effects to images through the use of secondary maps that affect the original image on a per-pixel basis.

    more »
comments powered by Disqus

Visit Our Shop

Trial Subscription

Digital Subscription

Subscribe

Direct Download

Read full article as PDF:

Web_Design_with_Gimp.pdf (322.50 kB)

News

Tag Cloud

Administration Community Events Hardware Linux Linux New Media Linux Pro Magazine Mobile Programming Software Ubuntu Web Development Windows free software open source