Commit 442b7d2b authored by Niklas Mattisson's avatar Niklas Mattisson

*** empty log message ***

parent 10c248e3
......@@ -3,6 +3,9 @@
<!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<h1>Working with the Image</h1>
<p>
Text and images Copyright (C) 2002 <a href="mail:People-Turner_Kevin">Kevin Turner</a> and may not be used without permission of the author.
</p>
<h2>Intention</h2>
<p>
......@@ -31,15 +34,15 @@
Drawables make life much more exciting. &lt;snip&gt;
</p>
<p>
The original document can be found <a href="http://gimp-plug-ins.sourceforge.net/doc/Writing/html/sect-image.html#sect-image-intro">here</a>.
The original document can be found <a href="tutorial:Drawables-Kevin_Turner">here</a>.
</p>
<!--#include virtual="/includes/wgo-tutorial-fini.xhtml" -->
<div>
<span id="footerleft">
Tutorial &copy; 2002 <a href="http://sourceforge.net/sendmessage.php?touser=9300">Kevin Turner</a>
Tutorial &copy; 2002 <a href="home:People-Turner_Kevin">Kevin Turner</a>
</span>
<span id="footerright">
<a href="mailto:webmaster@gimp.org">webmaster@gimp.org</a>
<a href="mail:People-Turner_Kevin">acapnotic@users.sourceforge.net</a>
</span>
</div>
<!--#include virtual="/includes/wgo-xhtml-fini.xhtml" -->
......@@ -3,12 +3,17 @@
<!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<h1>Drawing Shapes with Bezier Tool</h1>
<p>
Text and images Copyright (C) 2002 <a href="mail:People-Kuosmanen_Tuomas">Tuomas Kuosmanen</a> and may not be used
without permission of the author.
</p>
<h2>Intention</h2>
<p>
Bezier selection can be used in many creative ways. Maybe the best thing in it is the smooth, beautiful curves it produces.
But you can also use Bezier to create different polygonal shapes if you don't 'pull out the handles'.
Polygonal shapes are especially useful when painting some geometric objects, as you can draw one side at a time (into different layers if you want).
Polygonal shapes are especially useful when painting some geometric objects,
as you can draw one side at a time (into different layers if you want).
</p>
<h2>Shapes with Bezier!?</h2>
......@@ -16,20 +21,23 @@
<img src="box.gif" alt=""/>
</p>
<p>
This tutorial is about making simple geometrical shapes with The Gimp. I will concentrate on the Bezier tool since I find it so useful for this purpose.
This tutorial is about making simple geometrical shapes with The Gimp.
I will concentrate on the Bezier tool since I find it so useful for this purpose.
I hope you get some help and new stuff to put in your Gimp Tricks Sack :) I personally use this technique for nearly all my work.
</p>
<p>
<b>Notice!</b>
This is not a 'back to basics' -tutorial. You should be familiar with Gimp's dialogs and menus.
I was thinking about this, and I did not want to make this an 'entry level' thing, basically to avoid bloating this too big and duplicating other people's work.
I was thinking about this, and I did not want to make this an 'entry level' thing,
basically to avoid bloating this too big and duplicating other people's work.
Beziers are covered in my other tutorial, and I recommend you to read it before going further if you find the material here confusing.
If you are new to Gimp I suggest you to go to the Gimp homepage in www.gimp.org and first read through the Documentation section there.
</p>
<h2>Let's get started!</h2>
<p>
First we must create a new image for our creation. Make the size 256x256 pixels and choose RGB for the type. The image background should be white.
First we must create a new image for our creation. Make the size 256x256 pixels and choose RGB for the type.
The image background should be white.
Open the Layers &amp; Channels -dialog with the right-button-menu:
<span class="filter">&lt;Image&gt; Dialogs -&gt; Layers, Channels &amp; Paths...</span>
</p>
......@@ -41,7 +49,8 @@
<p>
Now create a new transparent layer, and name it Left_side so you know what layer I'll talk about later on.
Make sure you have the new layer active by checking the layers-dialog. If it is not selected, click the layer's name in the dialog.
<br /><br />
</p>
<p>
Imagine the blue cube on the right side into your canvas, we'll be doing side #1 now.
</p>
<p class="images">
......@@ -50,10 +59,12 @@
<p>
<img src="bezier_tool.gif" alt=""/> Choose the Bezier-selection tool and make something like the side #1 on the blue cube,
think about the perspective. (If this causes you trouble, don't worry. You will learn by experience).
<br /><br />
</p>
<p>
You can adjust the points' places if you can't get them right at the first try, see the Bezier tutorial for more information on that.
Your bezier should look something like the one on the right.
<br /><br />
</p>
<p>
Once you are satisfied with your 'box' click inside it to make the selection.
</p>
<p class="images">
......@@ -80,10 +91,12 @@
<p>
Now on to the right side, side #2. Create a new transparent layer and name it Right_side.
Use the Bezier Tool and try to make the right side of the cube and turn it into a selection.
<br /><br />
</p>
<p>
Take the Gradient Tool again and, still with the same colors, make a gradient from farther up-left
to near the selection's lower-right corner (see image on right). This way we get a darker gradient suitable for the shadow-side.
<br /><br />
</p>
<p>
<b>Hint!</b> Be careful with the edges. You don't want to leave any holes so the background can be seen through...
It's better to overlap the lower layer a bit than leave a space between them.
</p>
......@@ -94,7 +107,8 @@
</p>
<p>
Our final ultimate task is to create the top, side #3. Again, create a new transparent layer and name it (who quessed? :) Top_side.
<br /><br />
</p>
<p>
Now you probably know we want to make yet one bezier selection and this time the gradient has to be even lighter than in the first side.
So I suggest you lighten the dark blue color a fair amount, it's easier to get a light gradient that way.
This time you pull the gradient from left to right, according the arrow in the picture. Once you find the shading look good,
......@@ -111,27 +125,31 @@
so you can save as jpeg or any other format than xcf. Or, better still, from the layers dialog, make the background invisible
and choose <span class="filter">&lt;Image&gt; Layers -&gt; Merge Visible Layers</span> so you will have the background on a
separate layer and you can work further on it if you like.
<br /><br />
The next thing is to start using the geometrical shapes as building blocks to make things. And you can twist the beziers to make a bit more fancy stuff...
<br /><br />
</p>
<p>
The next thing is to start using the geometrical shapes as building blocks to make things.
And you can twist the beziers to make a bit more fancy stuff...
</p>
<p>
I have provided <a href="example.xcf.gz">the xcf-file</a> for the image we just created, if you want to experiment with it,
although you should be perfectly able to do just as good yourself.
<br />
Thanks for your interest.
<br /><br />
</p>
<p>
tigert
</p>
<p>
The original tutorial can be found <a href="http://tigert.gimp.org/gimp/tutorials/bezier_shapes/">here</a>.
The original tutorial can be found <a href="tutorial:Drawing_Shapes_with_Bezier_Tool-Tuomas_Kuosmanen">here</a>.
</p>
<!--#include virtual="/includes/wgo-tutorial-fini.xhtml" -->
<div>
<span id="footerleft">
Tutorial &copy; 2002 <a href="mailto:tigert@gimp.org">Tuomas Kuosmanen (tigert)</a>
Tutorial &copy; 2002 <a href="home:People-Kuosmanen_Tuomas">Tuomas Kuosmanen (tigert)</a>
</span>
<span id="footerright">
<a href="mailto:webmaster@gimp.org">webmaster@gimp.org</a>
<a href="mail:People-Kuosmanen_Tuomas">tigert@gimp.org</a>
</span>
</div>
<!--#include virtual="/includes/wgo-xhtml-fini.xhtml" -->
......@@ -3,6 +3,9 @@
<!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<h1>Film Grain Tutorial</h1>
<p>
Text and images Copyright (C) 2002 <a href="mail:People-Kidd_Eric">Eric Kidd</a> and may not be used without permission of the author.
</p>
<h2>Intention</h2>
<p>
......@@ -105,15 +108,15 @@
</p>
<p>
The original tutorial can be found <a href="http://carol.gimp.org/gimp/tutorials/film-grain/">here</a>
The original tutorial can be found <a href="tutorial:Film_Grain-Eric_Kidd">here</a>
</p>
<!--#include virtual="/includes/wgo-tutorial-fini.xhtml" -->
<div>
<span id="footerleft">
Tutorial &copy; 2002 <a href="mailto:eric.kidd@pobox.com">Eric Kidd</a>
Tutorial &copy; 2002 <a href="home:People-Kidd_Eric">Eric Kidd</a>
</span>
<span id="footerright">
<a href="mailto:webmaster@gimp.org">webmaster@gimp.org</a>
<a href="mail:People-Kidd_Eric">eric.kidd@pobox.com</a>
</span>
</div>
<!--#include virtual="/includes/wgo-xhtml-fini.xhtml" -->
......@@ -3,6 +3,9 @@
<!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<h1>Golden Text Tutorial</h1>
<p>
Text and images Copyright (C) 2002 <a href="mail:People-Budig_Simon">Simon Budig</a> and may not be used without permission of the author.
</p>
<h2>Intention</h2>
<p class="images">
......@@ -109,15 +112,15 @@
</p>
<p>
The original tutorial can be found <a href="http://www.home.unix-ag.org/simon/gimp/golden.html">here</a>.
The original tutorial can be found <a href="tutorial:Golden_Text-Simon_Budig">here</a>.
</p>
<!--#include virtual="/includes/wgo-tutorial-fini.xhtml" -->
<div>
<span id="footerleft">
Tutorial &copy; 2002 <a href="mailto:Simon.Budig@unix-ag.org">Simon Budig (nomis)</a>
Tutorial &copy; 2002 <a href="home:People-Budig_Simon">Simon Budig (nomis)</a>
</span>
<span id="footerright">
<a href="mailto:webmaster@gimp.org">webmaster@gimp.org</a>
<a href="mail:People-Budig_Simon">Simon.Budig@unix-ag.org</a>
</span>
</div>
<!--#include virtual="/includes/wgo-xhtml-fini.xhtml" -->
......@@ -29,6 +29,9 @@ function popup(url, textbox)
<!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<h1>Image Map Tutorial</h1>
<p>
Text and images Copyright (C) 2002 <a href="mail:People-Spears_Carol">Carol Spears</a> and may not be used without permission of the author.
</p>
<h2>Intention</h2>
<p class="images">
......@@ -130,15 +133,15 @@ function popup(url, textbox)
</form>
<p>
The original tutorial can be found <a href="http://carol.gimp.org/mygimp/tutorials/">here</a>.
The original tutorial can be found <a href="tutorial:Image_Map-Carol_Spears">here</a>.
</p>
<!--#include virtual="/includes/wgo-tutorial-fini.xhtml" -->
<div>
<span id="footerleft">
Tutorial &copy; 2002 <a href="mailto:carol@gimp.org">Carol Spears (carol)</a>
Tutorial &copy; 2002 <a href="home:People-Spears_Carol">Carol Spears (carol)</a>
</span>
<span id="footerright">
<a href="mailto:webmaster@gimp.org">webmaster@gimp.org</a>
<a href="mail:People-Spears_Carol">carol@gimp.org</a>
</span>
</div>
<!--#include virtual="/includes/wgo-xhtml-fini.xhtml" -->
......@@ -3,6 +3,9 @@
<!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<h1>Image Pipes</h1>
<p>
Text and images Copyright (C) 2002 <a href="mail:People-Likins_Adrian">Adrian Likins</a> and may not be used without permission of the author.
</p>
<h2>Intention</h2>
<p>
......@@ -91,9 +94,12 @@
</p>
<p>
An example of a two dimensional pipe
A interesting use for image pipe would be to simulate a natural media situration. For example, maybe a brush that has ten different versions based that correlate to tablet pressure.
For this example, I'll use a somewhat contrived example for simplicity sake. It will use the "angular" paramater in for per layer dimension, and a "random" paramter to select which
of the multiple images to use. I use this in a couple of brushes to "humanize" the output. Instead of having the same image stamped out over and over, it varies a little randomly.
A interesting use for image pipe would be to simulate a natural media situration.
For example, maybe a brush that has ten different versions based that correlate to tablet pressure.
For this example, I'll use a somewhat contrived example for simplicity sake.
It will use the "angular" paramater in for per layer dimension, and a "random" paramter to select which
of the multiple images to use. I use this in a couple of brushes to "humanize" the output.
Instead of having the same image stamped out over and over, it varies a little randomly.
The example source image is a 8 layer image, with each layer split in two with a guide. The guide isnt require but it makes it easier to create.
<br />
A screenshot of the layers dialog showing creation of an image of this type.(Image above)
......@@ -146,15 +152,15 @@
</p>
<p>
The original tutorial can be found <a href="http://adrian.gimp.org/gimppipe/">here</a>.
The original tutorial can be found <a href="tutorial:Image_Pipes-Adrian_Likins">here</a>.
</p>
<!--#include virtual="/includes/wgo-tutorial-fini.xhtml" -->
<div>
<span id="footerleft">
Tutorial &copy; 2002 <a href="mailto:adrian@gimp.org">Adrian Likins (adrian)</a>
Tutorial &copy; 2002 <a href="home:People-Likins_Adrian">Adrian Likins (adrian)</a>
</span>
<span id="footerright">
<a href="mailto:webmaster@gimp.org">webmaster@gimp.org</a>
<a href="mail:People-Likins_Adrian">adrian@gimp.org</a>
</span>
</div>
<!--#include virtual="/includes/wgo-xhtml-fini.xhtml" -->
......@@ -3,6 +3,9 @@
<!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<h1>Image Pipes 2</h1>
<p>
Text and images Copyright (C) 2002 <a href="mail:People-Jones_Sam">Sam Jones</a> and may not be used without permission of the author.
</p>
<h2>What are image pipe and pixmap brushes?</h2>
<p>
......@@ -125,13 +128,17 @@
<p>
So, what we have is feet which alternate left-right-left and follow the direction of the mouse. It looks a little like above.
</p>
<p>
The original tutorial can be found <a href="tutorial:Image_Pipes2-Sam_Jones">here</a>.
</p>
<!--#include virtual="/includes/wgo-tutorial-fini.xhtml" -->
<div>
<span id="footerleft">
Tutorial &copy; 2002 <a href="mailto:samjones@io.com">Sam Jones</a>
Tutorial &copy; 2002 <a href="home:People-Jones_Sam">Sam Jones</a>
</span>
<span id="footerright">
<a href="mailto:webmaster@gimp.org">webmaster@gimp.org</a>
<a href="mail:People-Jones_Sam">samjones@io.com</a>
</span>
</div>
<!--#include virtual="/includes/wgo-xhtml-fini.xhtml" -->
......@@ -3,6 +3,9 @@
<!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<h1>jpeg race</h1>
<p>
Text and images Copyright (C) 2002 <a href="mail:People-Spears_Carol">Carol Spears</a> and may not be used without permission of the author.
</p>
<table>
<tr><td>
......@@ -23,10 +26,10 @@
<!--#include virtual="/includes/wgo-tutorial-fini.xhtml" -->
<div>
<span id="footerleft">
Tutorial &copy; 2002 <a href="mailto:carol@gimp.org">Carol Spears (carol)</a>
Tutorial &copy; 2002 <a href="home:People-Spears_Carol">Carol Spears (carol)</a>
</span>
<span id="footerright">
<a href="mailto:webmaster@gimp.org">webmaster@gimp.org</a>
<a href="mail:People-Spears_Carol">carol@gimp.org</a>
</span>
</div>
<!--#include virtual="/includes/wgo-xhtml-fini.xhtml" -->
......@@ -3,6 +3,9 @@
<!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<h1>GIMPLite Quickies</h1>
<p>
Text and images Copyright (C) 2002 <a href="mail:People-Spears_Carol">Carol Spears</a> and may not be used without permission of the author.
</p>
<h2>Intention</h2>
<p>
......@@ -248,15 +251,15 @@
</p>
<p>
The original tutorial can be found <a href="http://carol.gimp.org/mygimp/tutorials/">here</a>.
The original tutorial can be found <a href="tutorial:GIMPLite_Quickies-Carol_Spears">here</a>.
</p>
<!--#include virtual="/includes/wgo-tutorial-fini.xhtml" -->
<div>
<span id="footerleft">
Tutorial &copy; 2002 <a href="mailto:carol@gimp.org">Carol Spears (carol)</a>
Tutorial &copy; 2002 <a href="home:People-Spears_Carol">Carol Spears (carol)</a>
</span>
<span id="footerright">
<a href="mailto:webmaster@gimp.org">webmaster@gimp.org</a>
<a href="mail:People-Spears_Carol">carol@gimp.org</a>
</span>
</div>
<!--#include virtual="/includes/wgo-xhtml-fini.xhtml" -->
......@@ -3,6 +3,9 @@
<!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<h1>jpeg race</h1>
<p>
Text and images Copyright (C) 2002 <a href="mail:People-Spears_Carol">Carol Spears</a> and may not be used without permission of the author.
</p>
<table>
<tr><td>
......@@ -23,10 +26,10 @@
<!--#include virtual="/includes/wgo-tutorial-fini.xhtml" -->
<div>
<span id="footerleft">
Tutorial &copy; 2002 <a href="mailto:carol@gimp.org">Carol Spears (carol)</a>
Tutorial &copy; 2002 <a href="home:People-Spears_Carol">Carol Spears (carol)</a>
</span>
<span id="footerright">
<a href="mailto:webmaster@gimp.org">webmaster@gimp.org</a>
<a href="mail:People-Spears_Carol">carol@gimp.org</a>
</span>
</div>
<!--#include virtual="/includes/wgo-xhtml-fini.xhtml" -->
......@@ -4,16 +4,21 @@
<link style type="text/css" rel="alternate stylesheet" type="text/css" title="helvetix fixes" href="http://oak.mysterious.org:8082/style/helvetix-fixes.css" />
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<h1>Perl Debugged</h1>
<p>
Text and images Copyright (C) 2002 <a href="mail:People-Burgess_Seth">Seth Burgess</a> and may not be used without permission of the author.
</p>
<h2>Intention</h2>
<p>
The Perl module for Gimp is a nice evolution of the scripting interface of Gimp. It removes the dependence on the relatively rarely encountered
scheme language of script-fu and replaces it with one that is familiar to a much larger audience. In doing so, the perl interface to gimp also
can take advantage of many of the features that have been added to perl over the years.
<br /><br />
</p>
<p>
My aim in creating this tutorial is to make debugging scripts easier. We'll touch on the facilities provided by the Gimp module,
and then focus on using the perl debugger to interactively develop scripts.
<br /><br />
</p>
<p>
To illustrate the points in this tutorial, this is a simple script that will change as we progress:
</p>
<pre class="code">
......@@ -222,34 +227,38 @@ Debugged program terminated. Use q to quit or R to restart,
<p>
This example session shows changing a value of a variable at run-time so to load a different file than the one hard-coded into the script.
Note that I continue ('c') and it stops immediately after $DB::single is set.
<br /><br />
</p>
<p>
Far more complex debugging is possible, but this should give you a good taste of what its all about.
</p>
<h2>Conclusion</h2>
<p>
Thats all there is to it! I hope this has been useful to you.
<br /><br />
</p>
<p>
You can <a href="perldebug.tar.gz">download a compressed copy</a> of this tutorial. You can also get a <a href="Example">copy of the script</a>.
Feel free to use either/both however you want.
<br /><br />
</p>
<p>
This tutorial has gone over the basics of using the Gimp module for tracing, the Perl Server for starting your scripts,
and using the perl debugger to interactively execute your scripts. If you have comments, questions,
or suggestions about this tutorial, please drop me a line.
<br /><br />
</p>
<p>
Happy GIMPing, Seth
</p>
<p>
The original tutorial can be found <a href="http://www.gimp.org/~sjburges/perl_debug/intro.html">here</a>.
The original tutorial can be found <a href="tutorial:Perl_Debugged-Seth_Burgess">here</a>.
</p>
<!--#include virtual="/includes/wgo-tutorial-fini.xhtml" -->
<div>
<span id="footerleft">
Tutorial &copy; 2002 <a href="mailto:sjburges@gimp.org">Seth Burgess (sjburges)</a>
Tutorial &copy; 2002 <a href="home:People-Burgess_Seth">Seth Burgess (sjburges)</a>
</span>
<span id="footerright">
<a href="mailto:webmaster@gimp.org">webmaster@gimp.org</a>
<a href="mail:People-Burgess_Seth">sjburges@gimp.org</a>
</span>
</div>
<!--#include virtual="/includes/wgo-xhtml-fini.xhtml" -->
<!--#include virtual="/includes/wgo-xhtml-init.xhtml" -->
<title>GIMP - Perlotine Tutorial</title>
<!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<h1>Perlotine Tutorial</h1>
<h2>Intention</h2>
<p style="text-align: center;">
<img src="perlotine1-guides.png" alt="" />
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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 ....
</p>
<h2>Step 1</h2>
<p style="text-align: center;">
<img src="perlotine1-zoom.png" alt="" />
</p>
<p>
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.
</p>
<p>
I zoomed in 4 times on my screenshot so I could make neat slices.
</p>
<h2>Step 2</h2>
<p style="text-align: center;">
<img src="dialog-perlotine.png" alt="" />
</p>
<p>
Once you have the guides in place, you can find the plug-in under <span class="filter">&lt;Image&gt;Filter-&gt;Web-&gt;Perlotine</span>.
</p>
<p>
"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.
</p>
<h2>Step 3</h2>
<table style="border-spacing: 0; margin-left: auto; margin-right: auto;"><tbody>
<tr><td><img class="map" alt="" src="imap-table1-0-0.png" width="290" height="73" /></td></tr>
<tr><td><img class="map" alt="" src="imap-table1-1-0.png" width="290" height="177" /></td></tr>
<tr><td><img class="map" alt="" src="imap-table1-2-0.png" width="290" height="17" /></td></tr>
<tr><td><img class="map" alt="" src="imap-table1-3-0.png" width="290" height="21" /></td></tr>
<tr><td><img class="map" alt="" src="imap-table1-4-0.png" width="290" height="50" /></td></tr>
</tbody></table>
<p>
This is the product of the first slicing with Perlotine.
</p>
<p>
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.
</p>
<p>
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 <kbd>shift-right-click</kbd> on the pieces to see how it worked.
</p>
<pre class="code">
&lt;table cellspacing=0 cellpadding=0 border=0&gt;
&lt;tr&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-0-0.png&quot; width=&quot;290&quot; height=&quot;73&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;tr&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-1-0.png&quot; width=&quot;290&quot; height=&quot;177&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;tr&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-2-0.png&quot; width=&quot;290&quot; height=&quot;17&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;tr&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-3-0.png&quot; width=&quot;290&quot; height=&quot;21&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;tr&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-4-0.png&quot; width=&quot;290&quot; height=&quot;50&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</pre>
<table style="border-spacing: 0; margin: 0 auto 0 auto;"><tbody>
<tr><td class="map"><img class="map" alt="" src="imap-table1-3-0-0.png" width="10" height="21" /></td>
<td class="map"><img class="map" alt="" src="imap-table1-3-0-1.png" width="219" height="21" /></td>
<td class="map"><img class="map" alt="" src="imap-table1-3-0-2.png" width="61" height="21" /></td>
</tr>
</tbody></table>
<p>
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.
</p>
<pre class="code">
&lt;table cellspacing=0 cellpadding=0 border=0&gt;
&lt;tr&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-3-0-0.png&quot; width=&quot;10&quot; height=&quot;21&quot;&gt;&lt;/td&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-3-0-1.png&quot; width=&quot;219&quot; height=&quot;21&quot;&gt;&lt;/td&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-3-0-2.png&quot; width=&quot;61&quot; height=&quot;21&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</pre>
<table style="border-spacing: 0; margin: 0 auto 0 auto;">
<tr><td colspan="3"><img class="map" alt=" " src="imap-table1-0-0.png" width="290" height="73" /></td></tr>
<tr><td colspan="3"><img class="map" alt=" " src="imap-table1-1-0.png" width="290" height="177" /></td></tr>
<tr><td colspan="3"><img class="map" alt=" " src="imap-table1-2-0.png" width="290" height="17" /></td></tr>
<tr><td class="map"><img class="map" alt=" " src="imap-table1-3-0-0.png" width="10" height="21" /></td>
<td class="map"><img class="map" alt=" " src="imap-table1-3-0-1.png" width="219" height="21" /></td>
<td class="map"><img class="map" alt=" " src="imap-table1-3-0-2.png" width="61" height="21" /></td>
</tr>
<tr><td colspan="3"><img alt=" " src="imap-table1-4-0.png" width="290" height="50" /></td></tr>
</table>
<p>
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.
</p>
<p>
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 <a href="nested.html">here</a>.
</p>
<p>
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.
</p>
<pre class="code">
&lt;table cellspacing=0 cellpadding=0 border=0&gt;
&lt;tr&gt;
&lt;td colspan=&quot;3&quot;&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-0-0.png&quot; width=&quot;290&quot; height=&quot;73&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td colspan=&quot;3&quot;&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-1-0.png&quot; width=&quot;290&quot; height=&quot;177&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td colspan=&quot;3&quot;&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-2-0.png&quot; width=&quot;290&quot; height=&quot;17&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-3-0-0.png&quot; width=&quot;10&quot; height=&quot;21&quot;&gt;&lt;/td&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-3-0-1.png&quot; width=&quot;219&quot; height=&quot;21&quot;&gt;&lt;/td&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-3-0-2.png&quot; width=&quot;61&quot; height=&quot;21&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;tr&gt;
&lt;td colspan=&quot;3&quot;&gt;&lt;img alt=&quot; &quot; src=&quot;perlotine1/imap-table1-4-0.png&quot; width=&quot;290&quot; height=&quot;50&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</pre>
<table style="width: 100%; vertical-align: top; margin: 0; padding: 0;"><tbody>
<tr><td><table style="border-spacing: 0; margin: 0 auto 0 auto;"><tbody>
<tr><td colspan="3" style=""><img alt=" " src="imap-table1-0-0.png" width="290" height="73" /></td></tr>
<tr><td colspan="3" style="padding: 1em;"><table style="border-spacing: 0;"><tbody>
<tr><td><img class="map" alt=" " src="imap-table1-1-0-0.png" width="15" height="177" /></td>
<td><img class="map" alt=" " src="imap-table1-1-0-1.png" width="241" height="177" /></td>
<td><img class="map" alt=" " src="imap-table1-1-0-2.png" width="34" height="177" /></td>
</tr>
</tbody></table>
</td>
</tr>
<tr><td colspan="3"><img class="map" alt=" " src="imap-table1-2-0.png" width="290" height="17" /></td></tr>
<tr>
<td><img class="map" alt=" " src="imap-table1-3-0-0.png" width="10" height="21" /></td>
<td><img class="map" alt=" " src="imap-table1-3-0-1.png" width="219" height="21" /></td>
<td><img class="map" alt=" " src="imap-table1-3-0-2.png" width="61" height="21" /></td>
</tr>
<tr>
<td colspan="3" style="padding-left: 2em;"><table style="border-spacing: 0;"><tbody>
<tr>
<td><img class="map" alt=" " src="imap-table1-4-0-0.png" width="5" height="6" /></td>
<td><img class="map" alt=" " src="imap-table1-4-0-1.png" width="277" height="6" /></td>
<td><img class="map" alt=" " src="imap-table1-4-0-2.png" width="8" height="6" /></td>
</tr>
<tr>
<td><img class="map" alt=" " src="imap-table1-4-1-0.png" width="5" height="36" /></td>
<td><img class="map" alt=" " src="imap-table1-4-1-1.png" width="277" height="36" /></td>
<td><img class="map" alt=" " src="imap-table1-4-1-2.png" width="8" height="36" /></td>
</tr>
<tr>
<td><img class="map" alt=" " src="imap-table1-4-2-0.png" width="5" height="8" /></td>
<td><img class="map" alt=" " src="imap-table1-4-2-1.png" width="277" height="8" /></td>
<td><img class="map" alt=" " src="imap-table1-4-2-2.png" width="8" height="8" /></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
</td><td style="vertical-align: top;">
<table style="border-spacing: 0; border-collapse: collapse;"><tbody>
<tr><td colspan="3" style="margin: 0; padding: 0; height: 73px;"><img style="margin: 0; padding: 0;" alt=" " src="imap-table1-0-0.png" width="290" height="73" /></td></tr>
<tr><td colspan="3" style="margin: 0; padding: 0;"><table style="border-spacing: 0; margin: 0; padding: 0;"><tbody>
<tr><td style="margin: 0; padding: 0; height: 177px;"><img alt=" " src="imap-table1-1-0-0.png" width="15" height="177" /></td><td style="margin: 0; padding: 0;"><img alt=" " src="imap-table1-1-0-1.png" width="241" height="177" /></td><td style="margin: 0; padding: 0;"><img alt=" " src="imap-table1-1-0-2.png" width="34" height="177" /></td></tr></tbody></table></td></tr>
<tr>
<td colspan="3" style="margin: 0; padding: 0;"><img alt=" " src="imap-table1-2-0.png" width="290" height="17" /></td>
</tr>
<tr>
<td style="padding: 0;"><img alt=" " src="imap-table1-3-0-0.png" width="10" height="21" /></td>
<td style="padding: 0;"><img alt=" " src="imap-table1-3-0-1.png" width="219" height="21" /></td>
<td style="padding: 0;"><img alt=" " src="imap-table1-3-0-2.png" width="61" height="21" /></td>
</tr>
<tr>
<td colspan="3" style="margin: 0; padding: 0;"><table style="border-spacing: 0;"><tbody>
<tr>
<td style="padding: 0;"><img alt=" " src="imap-table1-4-0-0.png" width="5" height="6" /></td>
<td style="padding: 0;"><img alt=" " src="imap-table1-4-0-1.png" width="277" height="6" /></td>
<td style="padding: 0;"><img alt=" " src="imap-table1-4-0-2.png" width="8" height="6" /></td>
</tr>
<tr>
<td style="padding: 0;"><img alt=" " src="imap-table1-4-1-0.png" width="5" height="36" /></td>
<td style="padding: 0;"><img alt=" " src="imap-table1-4-1-1.png" width="277" height="36" /></td>
<td style="padding: 0;"><img alt=" " src="imap-table1-4-1-2.png" width="8" height="36" /></td>
</tr>
<tr>
<td style="padding: 0;"><img alt=" " src="imap-table1-4-2-0.png" width="5" height="8" /></td>
<td style="padding: 0;"><img alt=" " src="imap-table1-4-2-1.png" width="277" height="8" /></td>
<td style="padding: 0;"><img alt=" " src="imap-table1-4-2-2.png" width="8" height="8" /></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr></tbody></table>
<pre class="code">
&lt;!-- Ugly ugly HTML (that works in mozilla) --&gt;
&lt;table cellspacing=0 cellpadding=0 border=0&gt;
&lt;tr&gt;
&lt;td colspan=&quot;3&quot;&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-0-0.png&quot; width=&quot;290&quot; height=&quot;73&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td colspan=&quot;3&quot;&gt;&lt;table cellspacing=0 cellpadding=0 border=0&gt;
&lt;tr&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-1-0-0.png&quot; width=&quot;15&quot; height=&quot;177&quot;&gt;&lt;/td&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-1-0-1.png&quot; width=&quot;241&quot; height=&quot;177&quot;&gt;&lt;/td&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-1-0-2.png&quot; width=&quot;34&quot; height=&quot;177&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td colspan=&quot;3&quot;&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-2-0.png&quot; width=&quot;290&quot; height=&quot;17&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-3-0-0.png&quot; width=&quot;10&quot; height=&quot;21&quot;&gt;&lt;/td&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-3-0-1.png&quot; width=&quot;219&quot; height=&quot;21&quot;&gt;&lt;/td&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-3-0-2.png&quot; width=&quot;61&quot; height=&quot;21&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;tr&gt;
&lt;td colspan=&quot;3&quot;&gt;&lt;table cellspacing=0 cellpadding=0 border=0&gt;
&lt;tr&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-4-0-0.png&quot; width=&quot;5&quot; height=&quot;6&quot;&gt;&lt;/td&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-4-0-1.png&quot; width=&quot;277&quot; height=&quot;6&quot;&gt;&lt;/td&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-4-0-2.png&quot; width=&quot;8&quot; height=&quot;6&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-4-1-0.png&quot; width=&quot;5&quot; height=&quot;36&quot;&gt;&lt;/td&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-4-1-1.png&quot; width=&quot;277&quot; height=&quot;36&quot;&gt;&lt;/td&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-4-1-2.png&quot; width=&quot;8&quot; height=&quot;36&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-4-2-0.png&quot; width=&quot;5&quot; height=&quot;8&quot;&gt;&lt;/td&gt;
&lt;td&gt;&lt;img alt=&quot; &quot; src=&quot;imap-table1-4-2-1.png&quot; width=&quot;277&quot; height=&quot;8&quot;&gt;&lt;/td&gt;