Skip to page contents

Perlotine Tutorial

Text and images Copyright (C) 2002 Carol Spears and may not be used without permission of the author.

Intention

I made a pretty neat image map for my web site. These three tutorials demonstrate some of The GIMPs html rendering plug-ins that I used to make the image map. In this tutorial, the first of three, I am going to demonstrate how to run perlotine a couple of times to slice an image up and put it back together in some nested tables.

Since I am going to make a web page that emulates The GIMP palette colorpicker, I "Acquired" a screenshot of the dialog with the Visibone2 palette selected. Here is a screenshot of the screenshot of the dialog with the guides placed for the first step.

For the design of my colorpicker, it will be better to run perlotine once over the image for the rows and then again for each rows columns. I want to leave the image map area in one block and also, I want to put html text box in the logical place and a couple of buttons at the bottom. Each row needs a different width of columns. It will probably be clearer once we make the slices ....

Step 1

Perl-O-Tine is a plug-in that slices an image along guides that you have placed and writes the html table that will put it back together again on a web page. If you are using The GIMP after experience with Photoshop LE, you might not be aware of guides or their usefulness. Put the curser on the ruler and drag toward the image.

I zoomed in 4 times on my screenshot so I could make neat slices.

Once you have the guides in place, you can find the plug-in under <Image>Filter->Web->Perlotine.

Step 2

"Save path:" tells The GIMP where to put the slices. "Html file name:" names the perlotine html. The Perlotine plug-in names the images very smartly, with the position name. My first round of slices were named imap-table1 and second round, imap-table2. I opted for png, to be politically correct on a gimp.org site. Last, since I am running the plug-in a few times, I opt for the separate directory to keep the images apart. Sooner or later, you will have to click the "Ok" button for the plug-in to work.

Step 3

This is the product of the first slicing with Perlotine.

This is a 3 element table. We will be slicing the middle section again, for The GIMP Table Magic Plug-in in the third tutorial, yet to be written. The bottom section will be sliced up to contain a dialog box for the color number to return to for both color pickers, so we will slice that next.

Below is the html that Perlotine generated. As I slice the smaller parts, this first html will be a base that the new tables should easily slide into. You can shift-right-click on the pieces to see how it worked.

<table cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td><img alt=" " src="imap-table1-0-0.png" width="290" height="73"></td>
    </tr><tr>
        <td><img alt=" " src="imap-table1-1-0.png" width="290" height="177"></td>
    </tr><tr>
        <td><img alt=" " src="imap-table1-2-0.png" width="290" height="17"></td>
    </tr><tr>
        <td><img alt=" " src="imap-table1-3-0.png" width="290" height="21"></td>
    </tr><tr>
        <td><img alt=" " src="imap-table1-4-0.png" width="290" height="50"></td>
    </tr>
</table>
  

This is the second slice. The dialog box has been put into its own element. By slicing it separately, I avoided slicing the image map.

<table cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td><img alt=" " src="imap-table1-3-0-0.png" width="10" height="21"></td>
        <td><img alt=" " src="imap-table1-3-0-1.png" width="219" height="21"></td>
        <td><img alt=" " src="imap-table1-3-0-2.png" width="61" height="21"></td>
    </tr>
</table>
  

Here is the new table. It has 7 elements. The piece 4 rows down and 2 elements to the left can be filled with a textbox now.

There are two ways to add the new table. I chose the more difficult of the two, as I am using css and css doesn't seem to like nested tables. So I made the previous elements span 3 columns. If you don't know how to tweak html like this, you can just nest them like I did here.

I am making all of the rest of the cuts in one step now. First the tweaked code for this table and then the completely chopped up table, blown out to see the pieces and put back together again, so you can believe it. And that code. By then you should be able to do any sort of slicing you need.

<table cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td colspan="3"><img alt=" " src="imap-table1-0-0.png" width="290" height="73"></td>
    </tr>
    <tr>
        <td colspan="3"><img alt=" " src="imap-table1-1-0.png" width="290" height="177"></td>
    </tr>
    <tr>
        <td colspan="3"><img alt=" " src="imap-table1-2-0.png" width="290" height="17"></td>
    </tr>
    <tr>
        <td><img alt=" " src="imap-table1-3-0-0.png" width="10" height="21"></td>
        <td><img alt=" " src="imap-table1-3-0-1.png" width="219" height="21"></td>
        <td><img alt=" " src="imap-table1-3-0-2.png" width="61" height="21"></td>
    </tr><tr>
        <td colspan="3"><img alt=" " src="perlotine1/imap-table1-4-0.png" width="290" height="50"></td>
    </tr>
</table>
  

Exploded View	Assembled View

<!--  Ugly ugly HTML (that works in mozilla)  -->
<table cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td colspan="3"><img alt=" " src="imap-table1-0-0.png" width="290" height="73"></td>
    </tr>
    <tr>
        <td colspan="3"><table cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td><img alt=" " src="imap-table1-1-0-0.png" width="15" height="177"></td>
        <td><img alt=" " src="imap-table1-1-0-1.png" width="241" height="177"></td>
        <td><img alt=" " src="imap-table1-1-0-2.png" width="34" height="177"></td>
    </tr>
</table>
</td>
    </tr>
    <tr>
        <td colspan="3"><img alt=" " src="imap-table1-2-0.png" width="290" height="17"></td>
    </tr>
    <tr>
        <td><img alt=" " src="imap-table1-3-0-0.png" width="10" height="21"></td>
        <td><img alt=" " src="imap-table1-3-0-1.png" width="219" height="21"></td>
        <td><img alt=" " src="imap-table1-3-0-2.png" width="61" height="21"></td>
    </tr><tr>
        <td colspan="3"><table cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td><img alt=" " src="imap-table1-4-0-0.png" width="5" height="6"></td>
        <td><img alt=" " src="imap-table1-4-0-1.png" width="277" height="6"></td>
        <td><img alt=" " src="imap-table1-4-0-2.png" width="8" height="6"></td>
    </tr>
    <tr>
        <td><img alt=" " src="imap-table1-4-1-0.png" width="5" height="36"></td>
        <td><img alt=" " src="imap-table1-4-1-1.png" width="277" height="36"></td>
        <td><img alt=" " src="imap-table1-4-1-2.png" width="8" height="36"></td>
    </tr>
    <tr>
        <td><img alt=" " src="imap-table1-4-2-0.png" width="5" height="8"></td>
        <td><img alt=" " src="imap-table1-4-2-1.png" width="277" height="8"></td>
        <td><img alt=" " src="imap-table1-4-2-2.png" width="8" height="8"></td>
    </tr>
</table></td>
    </tr>
</table>

The original tutorial can be found here.