Commit 049dd06c authored by Niklas Mattisson's avatar Niklas Mattisson

Tutorial section now uses <hx> tags instead of <div class="">.

parent b75794a7
...@@ -2,16 +2,16 @@ ...@@ -2,16 +2,16 @@
<title>GIMP - Draw A Paint Brush</title> <title>GIMP - Draw A Paint Brush</title>
<!--#include virtual="/includes/wgo-look-feel.xhtml" --> <!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" --> <!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<div class="heading">Draw A Paint Brush</div> <h1>Draw A Paint Brush</h1>
<div class="subtitle">Intention</div> <h2>Intention</h2>
<p> <p>
So, we want to create a nice paintbrush image with the Gimp. This tutorial can be a bit complex and I think it is better for a bit more advanced gimper. So, we want to create a nice paintbrush image with the Gimp. This tutorial can be a bit complex and I think it is better for a bit more advanced gimper.
If you want to learn the basics, a good way to do so is to get one of the many Gimp books written. If I must pick one to recommend, I think it would be Grokking The Gimp, If you want to learn the basics, a good way to do so is to get one of the many Gimp books written. If I must pick one to recommend, I think it would be Grokking The Gimp,
it is pretty good. But I am sure many of the others are great too, check a few out at your bookstore! it is pretty good. But I am sure many of the others are great too, check a few out at your bookstore!
</p> </p>
<div class="subtitle">Step 1</div> <h2>Step 1</h2>
<p class="images"> <p class="images">
<img src="1.png" alt=""/> <img src="1.png" alt=""/>
</p> </p>
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
Anyway, we start off with a plain gray image. Anyway, we start off with a plain gray image.
</p> </p>
<div class="subtitle">Step 2</div> <h2>Step 2</h2>
<p class="images"> <p class="images">
<img src="2.png" alt=""/> <img src="2.png" alt=""/>
</p> </p>
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
We first create a new transparent layer, and name it "tip" since we start drawing the brush from the brush tip. We first create a new transparent layer, and name it "tip" since we start drawing the brush from the brush tip.
</p> </p>
<div class="subtitle">Step 3</div> <h2>Step 3</h2>
<p class="images"> <p class="images">
<img src="3.png" alt=""/> <img src="3.png" alt=""/>
</p> </p>
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
so it might be helpful to check out my Bezier tool tutorials if you have trouble. so it might be helpful to check out my Bezier tool tutorials if you have trouble.
</p> </p>
<div class="subtitle">Step 4</div> <h2>Step 4</h2>
<p class="images"> <p class="images">
<img src="4.png" alt=""/> <img src="4.png" alt=""/>
</p> </p>
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
Just fill the selection with black color. Just fill the selection with black color.
</p> </p>
<div class="subtitle">Step 5</div> <h2>Step 5</h2>
<p class="images"> <p class="images">
<img src="5.png" alt=""/> <img src="5.png" alt=""/>
</p> </p>
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
Try to think where the light comes from, and make the selection accordingly. Try to think where the light comes from, and make the selection accordingly.
</p> </p>
<div class="subtitle">Step 6</div> <h2>Step 6</h2>
<p class="images"> <p class="images">
<img src="6.png" alt=""/> <img src="6.png" alt=""/>
</p> </p>
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
The important thing here is to set the blend mode to "FG to Transparent", we only want to add white, not the black. The important thing here is to set the blend mode to "FG to Transparent", we only want to add white, not the black.
</p> </p>
<div class="subtitle">Step 7</div> <h2>Step 7</h2>
<p class="images"> <p class="images">
<img src="7.png" alt=""/> <img src="7.png" alt=""/>
</p> </p>
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
Make a blend from top to bottom, so that the white fades out towards the brush tip. Make a blend from top to bottom, so that the white fades out towards the brush tip.
</p> </p>
<div class="subtitle">Step 8</div> <h2>Step 8</h2>
<p class="images"> <p class="images">
<img src="8.png" alt=""/> <img src="8.png" alt=""/>
</p> </p>
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
and add small "roundings" to the ends. Then fill the selection with a rather mid gray gradient. It does not look very real yet, but we want to bring this to life next... and add small "roundings" to the ends. Then fill the selection with a rather mid gray gradient. It does not look very real yet, but we want to bring this to life next...
</p> </p>
<div class="subtitle">Step 9</div> <h2>Step 9</h2>
<p class="images"> <p class="images">
<img src="9.png" alt=""/> <img src="9.png" alt=""/>
</p> </p>
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
Again, think how the light would reflect and how the shadows would be on a real object. And dont worry if it does not look right at first, it needs some practice and patience. Again, think how the light would reflect and how the shadows would be on a real object. And dont worry if it does not look right at first, it needs some practice and patience.
</p> </p>
<div class="subtitle">Step 10</div> <h2>Step 10</h2>
<p class="images"> <p class="images">
<img src="10.png" alt=""/> <img src="10.png" alt=""/>
</p> </p>
...@@ -105,7 +105,7 @@ ...@@ -105,7 +105,7 @@
Again, since the metal has a pretty shiny surface, you can use the Dodge/Burn tool to make the shadows and hilights stronger. Using brighness and contrast might help too. Again, since the metal has a pretty shiny surface, you can use the Dodge/Burn tool to make the shadows and hilights stronger. Using brighness and contrast might help too.
</p> </p>
<div class="subtitle">Step 11</div> <h2>Step 11</h2>
<p class="images"> <p class="images">
<img src="11.png" alt=""/> <img src="11.png" alt=""/>
</p> </p>
...@@ -113,7 +113,7 @@ ...@@ -113,7 +113,7 @@
We add the "engraving" by painting blackwith a very small brush, airbrush again works well. Try to make it look like some letter ornament or whatever you like. We add the "engraving" by painting blackwith a very small brush, airbrush again works well. Try to make it look like some letter ornament or whatever you like.
</p> </p>
<div class="subtitle">Step 12</div> <h2>Step 12</h2>
<p class="images"> <p class="images">
<img src="12.png" alt=""/> <img src="12.png" alt=""/>
</p> </p>
...@@ -121,7 +121,7 @@ ...@@ -121,7 +121,7 @@
Add hilights with white color to the areas that would get reflection. Since the light comes from top left, the hilights go to bottom right of the black "engraved" shapes. Add hilights with white color to the areas that would get reflection. Since the light comes from top left, the hilights go to bottom right of the black "engraved" shapes.
</p> </p>
<div class="subtitle">Step 13</div> <h2>Step 13</h2>
<p class="images"> <p class="images">
<img src="13.png" alt=""/> <img src="13.png" alt=""/>
</p> </p>
...@@ -129,7 +129,7 @@ ...@@ -129,7 +129,7 @@
Next we want to do the rest of the handle. We again create a new layer for it. Since it comes from "inside" the metal part, it is better to put it behind the metal part layers. Next we want to do the rest of the handle. We again create a new layer for it. Since it comes from "inside" the metal part, it is better to put it behind the metal part layers.
</p> </p>
<div class="subtitle">Step 14</div> <h2>Step 14</h2>
<p class="images"> <p class="images">
<img src="14.png" alt=""/> <img src="14.png" alt=""/>
</p> </p>
...@@ -137,7 +137,7 @@ ...@@ -137,7 +137,7 @@
Again, the bezier selection tool. Yes, I love it. You should too. Make a nice tapered shape that represents the brush handle. Again, the bezier selection tool. Yes, I love it. You should too. Make a nice tapered shape that represents the brush handle.
</p> </p>
<div class="subtitle">Step 15</div> <h2>Step 15</h2>
<p class="images"> <p class="images">
<img src="15.png" alt=""/> <img src="15.png" alt=""/>
</p> </p>
...@@ -146,7 +146,7 @@ ...@@ -146,7 +146,7 @@
This will make the texture of the handle. Fill the selection with the wooden pattern. This will make the texture of the handle. Fill the selection with the wooden pattern.
</p> </p>
<div class="subtitle">Step 16</div> <h2>Step 16</h2>
<p class="images"> <p class="images">
<img src="16.png" alt=""/> <img src="16.png" alt=""/>
</p> </p>
...@@ -154,7 +154,7 @@ ...@@ -154,7 +154,7 @@
Add another layer, this time for the hilight of the wood. Position it just above the handle layer. Add another layer, this time for the hilight of the wood. Position it just above the handle layer.
</p> </p>
<div class="subtitle">Step 17</div> <h2>Step 17</h2>
<p class="images"> <p class="images">
<img src="17.png" alt=""/> <img src="17.png" alt=""/>
</p> </p>
...@@ -163,7 +163,7 @@ ...@@ -163,7 +163,7 @@
Then do a hilight like you did for the brush tip on steps 5-7. You might want to reduce the fill opacity a bit since the wood is quite not as shiny as the wet brush tip. Then do a hilight like you did for the brush tip on steps 5-7. You might want to reduce the fill opacity a bit since the wood is quite not as shiny as the wet brush tip.
</p> </p>
<div class="subtitle">Step 18</div> <h2>Step 18</h2>
<p class="images"> <p class="images">
<img src="18.png" alt=""/> <img src="18.png" alt=""/>
</p> </p>
...@@ -171,7 +171,7 @@ ...@@ -171,7 +171,7 @@
Okay, it looks very much like a brush already... Lets just add a shadow and it looks better. Okay, it looks very much like a brush already... Lets just add a shadow and it looks better.
</p> </p>
<div class="subtitle">Step 19</div> <h2>Step 19</h2>
<p class="images"> <p class="images">
<img src="19.png" alt=""/> <img src="19.png" alt=""/>
</p> </p>
...@@ -180,7 +180,7 @@ ...@@ -180,7 +180,7 @@
We are going to make this copy into a drop shadow for the original brush. We are going to make this copy into a drop shadow for the original brush.
</p> </p>
<div class="subtitle">Step 20</div> <h2>Step 20</h2>
<p class="images"> <p class="images">
<img src="20.png" alt=""/> <img src="20.png" alt=""/>
</p> </p>
...@@ -188,7 +188,7 @@ ...@@ -188,7 +188,7 @@
Turn on "Keep Trans" checkbox on the layers dialog, and select the whole image and fill it black with the bucket fill tool. Turn on "Keep Trans" checkbox on the layers dialog, and select the whole image and fill it black with the bucket fill tool.
</p> </p>
<div class="subtitle">Step 21</div> <h2>Step 21</h2>
<p class="images"> <p class="images">
<img src="21.png" alt=""/> <img src="21.png" alt=""/>
</p> </p>
...@@ -196,7 +196,7 @@ ...@@ -196,7 +196,7 @@
Unselect the "keep trans" and blur the layer a fair bit, I think I used something like 20 for the radius. Unselect the "keep trans" and blur the layer a fair bit, I think I used something like 20 for the radius.
</p> </p>
<div class="subtitle">Step 22</div> <h2>Step 22</h2>
<p class="images"> <p class="images">
<img src="22.png" alt=""/> <img src="22.png" alt=""/>
</p> </p>
...@@ -205,7 +205,7 @@ ...@@ -205,7 +205,7 @@
You need to click the "chain" button on the scale dialog to change the image's aspect ratio. You need to click the "chain" button on the scale dialog to change the image's aspect ratio.
</p> </p>
<div class="subtitle">Step 23</div> <h2>Step 23</h2>
<p class="images"> <p class="images">
<img src="23.png" alt=""/> <img src="23.png" alt=""/>
</p> </p>
...@@ -214,7 +214,7 @@ ...@@ -214,7 +214,7 @@
The easiest way to copy a layer is to drag it from the layers dialog to an image. The easiest way to copy a layer is to drag it from the layers dialog to an image.
</p> </p>
<div class="subtitle">Step 24</div> <h2>Step 24</h2>
<p class="images"> <p class="images">
<img src="24.png" alt=""/> <img src="24.png" alt=""/>
</p> </p>
...@@ -222,7 +222,7 @@ ...@@ -222,7 +222,7 @@
I wanted to erase some of the shadow of the handle so it looks more realistic. I just used the eraser tool with a big fuzzy brush. I wanted to erase some of the shadow of the handle so it looks more realistic. I just used the eraser tool with a big fuzzy brush.
</p> </p>
<div class="subtitle">Step 25</div> <h2>Step 25</h2>
<p class="images"> <p class="images">
<img src="25.png" alt=""/> <img src="25.png" alt=""/>
</p> </p>
......
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
<title>GIMP - Working with the Image</title> <title>GIMP - Working with the Image</title>
<!--#include virtual="/includes/wgo-look-feel.xhtml" --> <!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" --> <!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<div class="heading">Working with the Image</div> <h1>Working with the Image</h1>
<div class="subtitle">Intention</div> <h2>Intention</h2>
<p> <p>
A plug-in is of limited use if it has nothing to do with the image. In this section, we explore the exciting world of the GIMP image hierarchy, and learn how to manipulate it. A plug-in is of limited use if it has nothing to do with the image. In this section, we explore the exciting world of the GIMP image hierarchy, and learn how to manipulate it.
</p> </p>
......
...@@ -2,16 +2,16 @@ ...@@ -2,16 +2,16 @@
<title>GIMP - Drawing Shapes with Bezier Tool</title> <title>GIMP - Drawing Shapes with Bezier Tool</title>
<!--#include virtual="/includes/wgo-look-feel.xhtml" --> <!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" --> <!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<div class="heading">Drawing Shapes with Bezier Tool</div> <h1>Drawing Shapes with Bezier Tool</h1>
<div class="subtitle">Intention</div> <h2>Intention</h2>
<p> <p>
Bezier selection can be used in many creative ways. Maybe the best thing in it is the smooth, beautiful curves it produces. 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'. 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> </p>
<div class="subtitle">Shapes with Bezier!?</div> <h2>Shapes with Bezier!?</h2>
<p class="images"> <p class="images">
<img src="box.gif" alt=""/> <img src="box.gif" alt=""/>
</p> </p>
...@@ -27,13 +27,13 @@ ...@@ -27,13 +27,13 @@
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. 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> </p>
<div class="subtitle">Let's get started!</div> <h2>Let's get started!</h2>
<p> <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> 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> </p>
<div class="subtitle">1. Left side</div> <h2>1. Left side</h2>
<p class="images"> <p class="images">
<img src="box_numb.gif" alt=""/> <img src="box_numb.gif" alt=""/>
</p> </p>
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
(The light was coming from the left) (The light was coming from the left)
</p> </p>
<div class="subtitle">2. Right side</div> <h2>2. Right side</h2>
<p class="images"> <p class="images">
<img src="gradient2.gif" alt=""/> <img src="gradient2.gif" alt=""/>
</p> </p>
...@@ -87,7 +87,7 @@ ...@@ -87,7 +87,7 @@
It's better to overlap the lower layer a bit than leave a space between them. It's better to overlap the lower layer a bit than leave a space between them.
</p> </p>
<div class="subtitle">3. Top side</div> <h2>3. Top side</h2>
<p class="images"> <p class="images">
<img src="gradient3.gif" alt=""/> <img src="gradient3.gif" alt=""/>
</p> </p>
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,7 @@
you can flatten the image and our little tutorial-cube is finished. Now apply for your 'Cube Gimp Licence' from the nearest Gimp Station ;) you can flatten the image and our little tutorial-cube is finished. Now apply for your 'Cube Gimp Licence' from the nearest Gimp Station ;)
</p> </p>
<div class="subtitle">4. Finished Work</div> <h2>4. Finished Work</h2>
<p class="images"> <p class="images">
<img src="finished_image.gif" alt=""/> <img src="finished_image.gif" alt=""/>
</p> </p>
......
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
<title>GIMP - Film Grain Tutorial</title> <title>GIMP - Film Grain Tutorial</title>
<!--#include virtual="/includes/wgo-look-feel.xhtml" --> <!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" --> <!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<div class="heading">Film Grain Tutorial</div> <h1>Film Grain Tutorial</h1>
<div class="subtitle">Intention</div> <h2>Intention</h2>
<p> <p>
This tutorial assumes a patched version of GIMP 1.2.2. Please don't distribute binaries which include this patch; This tutorial assumes a patched version of GIMP 1.2.2. Please don't distribute binaries which include this patch;
it creates non-standard XCF files, which would suprise users terribly. Real-world images have lots of noise: it creates non-standard XCF files, which would suprise users terribly. Real-world images have lots of noise:
...@@ -13,13 +13,13 @@ ...@@ -13,13 +13,13 @@
then this tutorial is for you. then this tutorial is for you.
</p> </p>
<div class="subtitle">Why Would Anyone Want to Ruin Perfectly Good Images?</div> <h2>Why Would Anyone Want to Ruin Perfectly Good Images?</h2>
<p> <p>
Perhaps you've rendered a gorgeous 3D scene, but want to make it look more like a photograph. Perhaps you're compositing Perhaps you've rendered a gorgeous 3D scene, but want to make it look more like a photograph. Perhaps you're compositing
two different photos, and need make the grain match. Or maybe you're just perverse. two different photos, and need make the grain match. Or maybe you're just perverse.
</p> </p>
<div class="subtitle">Extracting the Film Grain</div> <h2>Extracting the Film Grain</h2>
<p> <p>
This is a subject for another, longer tutorial. But here are the basic steps: This is a subject for another, longer tutorial. But here are the basic steps:
</p> </p>
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
In the following example, we'll use a weird, vertically-striped noise pattern. It looks like some kind of scanner noise, or perhaps an artifact of old newsprint. In the following example, we'll use a weird, vertically-striped noise pattern. It looks like some kind of scanner noise, or perhaps an artifact of old newsprint.
</p> </p>
<div class="subtitle">Ruining a Perfectly Good Image</div> <h2>Ruining a Perfectly Good Image</h2>
<p class="images"> <p class="images">
<img src="sailboat-01-original.jpg" alt=""/> <img src="sailboat-01-original.jpg" alt=""/>
<img src="sailboat-08-grain-masked-rebalanced.jpg" alt=""/> <img src="sailboat-08-grain-masked-rebalanced.jpg" alt=""/>
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
Technically, it's better, but it's unnecessary for most images.) Technically, it's better, but it's unnecessary for most images.)
</p> </p>
<div class="subtitle">Step 2</div> <h2>Step 2</h2>
<p class="images"> <p class="images">
<img src="sailboat-02-luminosity.jpg" alt=""/> <img src="sailboat-02-luminosity.jpg" alt=""/>
<img src="sailboat-03-grain.jpg" alt=""/> <img src="sailboat-03-grain.jpg" alt=""/>
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
Next add a new layer to the image, and use the bucket to fill it with your tileable noise. Next add a new layer to the image, and use the bucket to fill it with your tileable noise.
</p> </p>
<div class="subtitle">Step 3</div> <h2>Step 3</h2>
<p class="images"> <p class="images">
<img src="sailboat-04-grain-added.jpg" alt=""/> <img src="sailboat-04-grain-added.jpg" alt=""/>
</p> </p>
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
Position the noise layer above the image layer, and set the mode to Grey Addition. (Again, this won't work unless the patch has been installed.) Position the noise layer above the image layer, and set the mode to Grey Addition. (Again, this won't work unless the patch has been installed.)
</p> </p>
<div class="subtitle">Step 4</div> <h2>Step 4</h2>
<p class="images"> <p class="images">
<img src="sailboat-05-luminosity-blurred.jpg" alt=""/> <img src="sailboat-05-luminosity-blurred.jpg" alt=""/>
</p> </p>
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
This will cause the grain to show through strongly in the shadows and midtones, but not in the highlights. This will cause the grain to show through strongly in the shadows and midtones, but not in the highlights.
</p> </p>
<div class="subtitle">Step 5</div> <h2>Step 5</h2>
<p class="images"> <p class="images">
<img src="sailboat-08-grain-masked-rebalanced.jpg" alt=""/> <img src="sailboat-08-grain-masked-rebalanced.jpg" alt=""/>
</p> </p>
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
Here's the Layers, Channels &amp; Paths dialog for the finished image. Here's the Layers, Channels &amp; Paths dialog for the finished image.
</p> </p>
<div class="subtitle">Related Techniques</div> <h2>Related Techniques</h2>
<p> <p>
You can use various brushes in the mask layer to selectively edit the grain. You can also use the bucket tool in Pattern Fill, Grey Addition You can use various brushes in the mask layer to selectively edit the grain. You can also use the bucket tool in Pattern Fill, Grey Addition
mode to fill a selection with grain directly. mode to fill a selection with grain directly.
......
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
<title>GIMP - Golden Text Tutorial</title> <title>GIMP - Golden Text Tutorial</title>
<!--#include virtual="/includes/wgo-look-feel.xhtml" --> <!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" --> <!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<div class="heading">Golden Text Tutorial</div> <h1>Golden Text Tutorial</h1>
<div class="subtitle">Intention</div> <h2>Intention</h2>
<p class="images"> <p class="images">
<img src="title.gif" alt=""/> <img src="title.gif" alt=""/>
</p> </p>
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
Additionally it can map an enviroment-map to the image. Additionally it can map an enviroment-map to the image.
</p> </p>
<div class="subtitle">Part I</div> <h2>Part I</h2>
<p class="images"> <p class="images">
<img src="envmap_gold.jpg" alt=""/> <img src="envmap_gold.jpg" alt=""/>
</p> </p>
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
idea to render the image in the double size and scale it down for the final image. Some other neat tricks can be found in the next part. idea to render the image in the double size and scale it down for the final image. Some other neat tricks can be found in the next part.
</p> </p>
<div class="subtitle">Part II</div> <h2>Part II</h2>
<p class="images"> <p class="images">
<img src="curves1_small.gif" alt=""/> <img src="curves1_small.gif" alt=""/>
<img src="bumpmap1_small.gif" alt=""/> <img src="bumpmap1_small.gif" alt=""/>
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
Another possibility is the use of a different gradient. Another possibility is the use of a different gradient.
</p> </p>
<div class="subtitle">Part III</div> <h2>Part III</h2>
<p class="images"> <p class="images">
<img src="curves3_small.gif" alt=""/> <img src="curves3_small.gif" alt=""/>
<img src="bumpmap3_small.gif" alt=""/> <img src="bumpmap3_small.gif" alt=""/>
......
...@@ -28,9 +28,9 @@ function popup(url, textbox) ...@@ -28,9 +28,9 @@ function popup(url, textbox)
<!--#include virtual="/includes/wgo-look-feel.xhtml" --> <!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" --> <!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<div class="heading">Image Map Tutorial</div> <h1>Image Map Tutorial</h1>
<div class="subtitle">Intention</div> <h2>Intention</h2>
<p class="images"> <p class="images">
<img src="imap-table1-1-0.png" alt=""/> <img src="imap-table1-1-0.png" alt=""/>
<img src="dialog-imagemap-t.png" alt=""/> <img src="dialog-imagemap-t.png" alt=""/>
...@@ -48,7 +48,7 @@ function popup(url, textbox) ...@@ -48,7 +48,7 @@ function popup(url, textbox)
I tried to arrow and number the few areas I am worried about for this tutorial. So, relax. I tried to arrow and number the few areas I am worried about for this tutorial. So, relax.
</p> </p>
<div class="subtitle">1. Goodies-&gt;Create Guides</div> <h2>1. Goodies-&gt;Create Guides</h2>
<p class="images"> <p class="images">
<img src="dialog-createguides.png" alt=""/> <img src="dialog-createguides.png" alt=""/>
<img src="imagemap1-zoom.png" alt=""/> <img src="imagemap1-zoom.png" alt=""/>
...@@ -57,7 +57,8 @@ function popup(url, textbox) ...@@ -57,7 +57,8 @@ function popup(url, textbox)
This is a screenshot of the Create Guides Dialog (left image). We get to change every single option before we are done. Whee! This is a screenshot of the Create Guides Dialog (left image). We get to change every single option before we are done. Whee!
</p> </p>
<p> <p>
I came to this tutorial prepared with a perfectly wonderful colorpicker script that I stole from <a href="http://the-light.com/colclick.html">Victor S. Engel</a>. I came to this tutorial prepared with a perfectly wonderful colorpicker script that I stole from
<a href="http://the-light.com/colclick.html">Victor S. Engel</a>.
The only problem with his colorpicker is that it didn't look like The GIMP. :) If you "View Source" of that page, The only problem with his colorpicker is that it didn't look like The GIMP. :) If you "View Source" of that page,
you can see that there is a similar line to each image map coordinate area. So, into the "Base URL" box, put the stuff that will be the same on each. you can see that there is a similar line to each image map coordinate area. So, into the "Base URL" box, put the stuff that will be the same on each.
I am going to deal with the colors (256 of them, eek!) after I make the image map. I am going to deal with the colors (256 of them, eek!) after I make the image map.
...@@ -74,10 +75,11 @@ function popup(url, textbox) ...@@ -74,10 +75,11 @@ function popup(url, textbox)
</p> </p>
<p> <p>
You can do the math or count the squares, but the Visibone2 palette has 16 colors across and 16 colors down. You can do the math or count the squares, but the Visibone2 palette has 16 colors across and 16 colors down.
I used the mouse on guides to determine the start point of the first image map area. That is all of the configurable things in this dialog. Time to click "Apply". I used the mouse on guides to determine the start point of the first image map area.
That is all of the configurable things in this dialog. Time to click "Apply".
</p> </p>
<div class="subtitle">2. Map Image</div> <h2>2. Map Image</h2>
<p class="images"> <p class="images">
<img src="dialog-guides-image.png" alt=""/> <img src="dialog-guides-image.png" alt=""/>
</p> </p>
...@@ -89,7 +91,7 @@ function popup(url, textbox) ...@@ -89,7 +91,7 @@ function popup(url, textbox)
At this point, for this project, you can jump right to "4. File Save"as it is totally done for our use. At this point, for this project, you can jump right to "4. File Save"as it is totally done for our use.
</p> </p>
<div class="subtitle">3. Table Editor</div> <h2>3. Table Editor</h2>
<p class="images"> <p class="images">
<img src="dialog-guides-urlset.png" alt=""/> <img src="dialog-guides-urlset.png" alt=""/>
</p> </p>
...@@ -101,18 +103,22 @@ function popup(url, textbox) ...@@ -101,18 +103,22 @@ function popup(url, textbox)
I fully admit that I only used a small small part of this great plug-ins ability. 256 elements was out of the reach of my short attention span. I fully admit that I only used a small small part of this great plug-ins ability. 256 elements was out of the reach of my short attention span.
</p> </p>
<div class="subtitle">4. File-&gt;Save As</div> <h2>4. File-&gt;Save As</h2>
<p> <p>
I am not going to bore you with the directions to <span class="filter">File-&gt;Save As</span>. Instead, check out my product <a href="imap1.html">here</a>. I am not going to bore you with the directions to <span class="filter">File-&gt;Save As</span>.
Instead, check out my product <a href="imap1.html">here</a>.
It needs the colors placed at the end of the lines. This information is already found in The GIMP Palette directory, It needs the colors placed at the end of the lines. This information is already found in The GIMP Palette directory,
usually located at ~.gimp-1.2/palettes/. This was the <a href="Visibone2">Visibone2</a> palette. I posed this problem to my friend bex and went to sleep. usually located at ~.gimp-1.2/palettes/. This was the <a href="Visibone2">Visibone2</a> palette.
I posed this problem to my friend bex and went to sleep.
When I awoke, she had solved my dilemma by writing the <a href="bextruder.sh.txt">bextruder shell script</a>. When I awoke, she had solved my dilemma by writing the <a href="bextruder.sh.txt">bextruder shell script</a>.
</p> </p>
<p> <p>
This puppy takes each line from <a href="Visibone2.txt">Visibone2.txt</a>, gets a color from the <a href="Visibine2">Visibone2</a> This puppy takes each line from <a href="Visibone2.txt">Visibone2.txt</a>, gets a color from the <a href="Visibine2">Visibone2</a>
in your home directory and puts it on the end of the line. Then plops a ')&gt; on the end of that, producing a file called <a href="visibone.html">visibone.html</a>. in your home directory and puts it on the end of the line. Then plops a ')&gt; on the end of that,