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 @@
<title>GIMP - Draw A Paint Brush</title>
<!--#include virtual="/includes/wgo-look-feel.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>
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,
it is pretty good. But I am sure many of the others are great too, check a few out at your bookstore!
</p>
<div class="subtitle">Step 1</div>
<h2>Step 1</h2>
<p class="images">
<img src="1.png" alt=""/>
</p>
......@@ -19,7 +19,7 @@
Anyway, we start off with a plain gray image.
</p>
<div class="subtitle">Step 2</div>
<h2>Step 2</h2>
<p class="images">
<img src="2.png" alt=""/>
</p>
......@@ -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.
</p>
<div class="subtitle">Step 3</div>
<h2>Step 3</h2>
<p class="images">
<img src="3.png" alt=""/>
</p>
......@@ -36,7 +36,7 @@
so it might be helpful to check out my Bezier tool tutorials if you have trouble.
</p>
<div class="subtitle">Step 4</div>
<h2>Step 4</h2>
<p class="images">
<img src="4.png" alt=""/>
</p>
......@@ -44,7 +44,7 @@
Just fill the selection with black color.
</p>
<div class="subtitle">Step 5</div>
<h2>Step 5</h2>
<p class="images">
<img src="5.png" alt=""/>
</p>
......@@ -53,7 +53,7 @@
Try to think where the light comes from, and make the selection accordingly.
</p>
<div class="subtitle">Step 6</div>
<h2>Step 6</h2>
<p class="images">
<img src="6.png" alt=""/>
</p>
......@@ -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.
</p>
<div class="subtitle">Step 7</div>
<h2>Step 7</h2>
<p class="images">
<img src="7.png" alt=""/>
</p>
......@@ -71,7 +71,7 @@
Make a blend from top to bottom, so that the white fades out towards the brush tip.
</p>
<div class="subtitle">Step 8</div>
<h2>Step 8</h2>
<p class="images">
<img src="8.png" alt=""/>
</p>
......@@ -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...
</p>
<div class="subtitle">Step 9</div>
<h2>Step 9</h2>
<p class="images">
<img src="9.png" alt=""/>
</p>
......@@ -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.
</p>
<div class="subtitle">Step 10</div>
<h2>Step 10</h2>
<p class="images">
<img src="10.png" alt=""/>
</p>
......@@ -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.
</p>
<div class="subtitle">Step 11</div>
<h2>Step 11</h2>
<p class="images">
<img src="11.png" alt=""/>
</p>
......@@ -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.
</p>
<div class="subtitle">Step 12</div>
<h2>Step 12</h2>
<p class="images">
<img src="12.png" alt=""/>
</p>
......@@ -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.
</p>
<div class="subtitle">Step 13</div>
<h2>Step 13</h2>
<p class="images">
<img src="13.png" alt=""/>
</p>
......@@ -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.
</p>
<div class="subtitle">Step 14</div>
<h2>Step 14</h2>
<p class="images">
<img src="14.png" alt=""/>
</p>
......@@ -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.
</p>
<div class="subtitle">Step 15</div>
<h2>Step 15</h2>
<p class="images">
<img src="15.png" alt=""/>
</p>
......@@ -146,7 +146,7 @@
This will make the texture of the handle. Fill the selection with the wooden pattern.
</p>
<div class="subtitle">Step 16</div>
<h2>Step 16</h2>
<p class="images">
<img src="16.png" alt=""/>
</p>
......@@ -154,7 +154,7 @@
Add another layer, this time for the hilight of the wood. Position it just above the handle layer.
</p>
<div class="subtitle">Step 17</div>
<h2>Step 17</h2>
<p class="images">
<img src="17.png" alt=""/>
</p>
......@@ -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.
</p>
<div class="subtitle">Step 18</div>
<h2>Step 18</h2>
<p class="images">
<img src="18.png" alt=""/>
</p>
......@@ -171,7 +171,7 @@
Okay, it looks very much like a brush already... Lets just add a shadow and it looks better.
</p>
<div class="subtitle">Step 19</div>
<h2>Step 19</h2>
<p class="images">
<img src="19.png" alt=""/>
</p>
......@@ -180,7 +180,7 @@
We are going to make this copy into a drop shadow for the original brush.
</p>
<div class="subtitle">Step 20</div>
<h2>Step 20</h2>
<p class="images">
<img src="20.png" alt=""/>
</p>
......@@ -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.
</p>
<div class="subtitle">Step 21</div>
<h2>Step 21</h2>
<p class="images">
<img src="21.png" alt=""/>
</p>
......@@ -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.
</p>
<div class="subtitle">Step 22</div>
<h2>Step 22</h2>
<p class="images">
<img src="22.png" alt=""/>
</p>
......@@ -205,7 +205,7 @@
You need to click the "chain" button on the scale dialog to change the image's aspect ratio.
</p>
<div class="subtitle">Step 23</div>
<h2>Step 23</h2>
<p class="images">
<img src="23.png" alt=""/>
</p>
......@@ -214,7 +214,7 @@
The easiest way to copy a layer is to drag it from the layers dialog to an image.
</p>
<div class="subtitle">Step 24</div>
<h2>Step 24</h2>
<p class="images">
<img src="24.png" alt=""/>
</p>
......@@ -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.
</p>
<div class="subtitle">Step 25</div>
<h2>Step 25</h2>
<p class="images">
<img src="25.png" alt=""/>
</p>
......
......@@ -2,9 +2,9 @@
<title>GIMP - Working with the Image</title>
<!--#include virtual="/includes/wgo-look-feel.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>
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>
......
......@@ -2,16 +2,16 @@
<title>GIMP - Drawing Shapes with Bezier Tool</title>
<!--#include virtual="/includes/wgo-look-feel.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>
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).
</p>
<div class="subtitle">Shapes with Bezier!?</div>
<h2>Shapes with Bezier!?</h2>
<p class="images">
<img src="box.gif" alt=""/>
</p>
......@@ -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.
</p>
<div class="subtitle">Let's get started!</div>
<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.
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>
<div class="subtitle">1. Left side</div>
<h2>1. Left side</h2>
<p class="images">
<img src="box_numb.gif" alt=""/>
</p>
......@@ -72,7 +72,7 @@
(The light was coming from the left)
</p>
<div class="subtitle">2. Right side</div>
<h2>2. Right side</h2>
<p class="images">
<img src="gradient2.gif" alt=""/>
</p>
......@@ -87,7 +87,7 @@
It's better to overlap the lower layer a bit than leave a space between them.
</p>
<div class="subtitle">3. Top side</div>
<h2>3. Top side</h2>
<p class="images">
<img src="gradient3.gif" alt=""/>
</p>
......@@ -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 ;)
</p>
<div class="subtitle">4. Finished Work</div>
<h2>4. Finished Work</h2>
<p class="images">
<img src="finished_image.gif" alt=""/>
</p>
......
......@@ -2,9 +2,9 @@
<title>GIMP - Film Grain Tutorial</title>
<!--#include virtual="/includes/wgo-look-feel.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>
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:
......@@ -13,13 +13,13 @@
then this tutorial is for you.
</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>
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.
</p>
<div class="subtitle">Extracting the Film Grain</div>
<h2>Extracting the Film Grain</h2>
<p>
This is a subject for another, longer tutorial. But here are the basic steps:
</p>
......@@ -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.
</p>
<div class="subtitle">Ruining a Perfectly Good Image</div>
<h2>Ruining a Perfectly Good Image</h2>
<p class="images">
<img src="sailboat-01-original.jpg" alt=""/>
<img src="sailboat-08-grain-masked-rebalanced.jpg" alt=""/>
......@@ -50,7 +50,7 @@
Technically, it's better, but it's unnecessary for most images.)
</p>
<div class="subtitle">Step 2</div>
<h2>Step 2</h2>
<p class="images">
<img src="sailboat-02-luminosity.jpg" alt=""/>
<img src="sailboat-03-grain.jpg" alt=""/>
......@@ -59,7 +59,7 @@
Next add a new layer to the image, and use the bucket to fill it with your tileable noise.
</p>
<div class="subtitle">Step 3</div>
<h2>Step 3</h2>
<p class="images">
<img src="sailboat-04-grain-added.jpg" alt=""/>
</p>
......@@ -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.)
</p>
<div class="subtitle">Step 4</div>
<h2>Step 4</h2>
<p class="images">
<img src="sailboat-05-luminosity-blurred.jpg" alt=""/>
</p>
......@@ -79,7 +79,7 @@
This will cause the grain to show through strongly in the shadows and midtones, but not in the highlights.
</p>
<div class="subtitle">Step 5</div>
<h2>Step 5</h2>
<p class="images">
<img src="sailboat-08-grain-masked-rebalanced.jpg" alt=""/>
</p>
......@@ -91,7 +91,7 @@
Here's the Layers, Channels &amp; Paths dialog for the finished image.
</p>
<div class="subtitle">Related Techniques</div>
<h2>Related Techniques</h2>
<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
mode to fill a selection with grain directly.
......
......@@ -2,9 +2,9 @@
<title>GIMP - Golden Text Tutorial</title>
<!--#include virtual="/includes/wgo-look-feel.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">
<img src="title.gif" alt=""/>
</p>
......@@ -15,7 +15,7 @@
Additionally it can map an enviroment-map to the image.
</p>
<div class="subtitle">Part I</div>
<h2>Part I</h2>
<p class="images">
<img src="envmap_gold.jpg" alt=""/>
</p>
......@@ -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.
</p>
<div class="subtitle">Part II</div>
<h2>Part II</h2>
<p class="images">
<img src="curves1_small.gif" alt=""/>
<img src="bumpmap1_small.gif" alt=""/>
......@@ -86,7 +86,7 @@
Another possibility is the use of a different gradient.
</p>
<div class="subtitle">Part III</div>
<h2>Part III</h2>
<p class="images">
<img src="curves3_small.gif" alt=""/>
<img src="bumpmap3_small.gif" alt=""/>
......
......@@ -28,9 +28,9 @@ function popup(url, textbox)
<!--#include virtual="/includes/wgo-look-feel.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">
<img src="imap-table1-1-0.png" alt=""/>
<img src="dialog-imagemap-t.png" alt=""/>
......@@ -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.
</p>
<div class="subtitle">1. Goodies-&gt;Create Guides</div>
<h2>1. Goodies-&gt;Create Guides</h2>
<p class="images">
<img src="dialog-createguides.png" alt=""/>
<img src="imagemap1-zoom.png" alt=""/>
......@@ -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!
</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,
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.
......@@ -74,10 +75,11 @@ function popup(url, textbox)
</p>
<p>
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>
<div class="subtitle">2. Map Image</div>
<h2>2. Map Image</h2>
<p class="images">
<img src="dialog-guides-image.png" alt=""/>
</p>
......@@ -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.
</p>
<div class="subtitle">3. Table Editor</div>
<h2>3. Table Editor</h2>
<p class="images">
<img src="dialog-guides-urlset.png" alt=""/>
</p>
......@@ -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.
</p>
<div class="subtitle">4. File-&gt;Save As</div>
<h2>4. File-&gt;Save As</h2>
<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,
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>.
</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>
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,
producing a file called <a href="visibone.html">visibone.html</a>.
This didn't work. bex did exactly what I told her to do and I had forgotten a ". The plop at the end should have been a ')"&gt;.
It was easy enough to fix with any editors global replace thingie .... My "working chunk of html" is called <a href="bexcolored.html">bexcolored.html</a>.
It was easy enough to fix with any editors global replace thingie ....
My "working chunk of html" is called <a href="bexcolored.html">bexcolored.html</a>.
The script should be easy to edit to use any palette. That is why I brought up the missing".
</p>
<p>
......
......@@ -2,9 +2,9 @@
<title>GIMP - Image Pipes</title>
<!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<div class="heading">Image Pipes</div>
<h1>Image Pipes</h1>
<div class="subtitle">Intention</div>
<h2>Intention</h2>
<p>
Gimp 1.1 and the soon to come 1.2 introduce alot of new features, including the ability to use full color "pixmap brushes".
In addition, you can also combine single frame pixmap brushes into a "image pipe". A Gimp Image Pipe allows you to spray out
......@@ -16,7 +16,7 @@
seem difficult. However, for almost all common image pipes it is easy to set them up.
</p>
<div class="subtitle">Example 1</div>
<h2>Example 1</h2>
<p class="images">
<img src="example1_ss.gif" alt=""/>
</p>
......@@ -69,7 +69,7 @@
example image above (also making use of the fun gradient brushes).
</p>
<div class="subtitle">Example 2</div>
<h2>Example 2</h2>
<p class="images">
<img src="example2_ss.gif" alt=""/>
</p>
......@@ -85,7 +85,7 @@
An example of the use of this image:
</p>
<div class="subtitle">Example 3</div>
<h2>Example 3</h2>
<p class="images">
<img src="example3_ss.gif" alt=""/>
</p>
......@@ -105,7 +105,7 @@
You will want to save the image with the values show here:
</p>
<div class="subtitle">Example 4</div>
<h2>Example 4</h2>
<p class="images">
<img src="example4_ss.gif" alt=""/>
</p>
......@@ -124,7 +124,7 @@
Example output.
</p>
<div class="subtitle">Example 5</div>
<h2>Example 5</h2>
<p class="images">
<img src="example_ss5.gif" alt=""/>
</p>
......
......@@ -2,9 +2,9 @@
<title>GIMP - Image Pipes 2</title>
<!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<div class="heading">Image Pipes 2</div>
<h1>Image Pipes 2</h1>
<div class="subtitle">What are image pipe and pixmap brushes?</div>
<h2>What are image pipe and pixmap brushes?</h2>
<p>
A pixmap brush is an image, with both shape and color, that gets drawn with one of the paint tools. The pencil draws the pixmap with a single click.
The paintbrush does the same with some extra options. The airbrush allows you to do levels of transparency for the pixmap brush.
......@@ -14,7 +14,7 @@
An image pipe is a series of pixmap brushes combined into one, so that one or more of the pixmaps from the image pipe is drawn as you click or drag the mouse.
</p>
<div class="subtitle">How Do You Make a New Brush?</div>
<h2>How Do You Make a New Brush?</h2>
<p class="images">
<img src="fig1.jpg" alt=""/>
</p>
......@@ -47,7 +47,7 @@
less will mean the pixmaps will overlap. See the examples above.
</p>
<div class="subtitle">Image Pipe Options</div>
<h2>Image Pipe Options</h2>
<p class="images">
<a href="layer_example.xcf.gz"><img src="fig4.jpg" alt=""/></a>
</p>
......
......@@ -2,7 +2,7 @@
<title>GIMP - jpeg race</title>
<!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<div class="heading">jpeg race</div>
<h1>jpeg race</h1>
<table>
<tr><td>
......
......@@ -2,24 +2,27 @@
<title>GIMP - GIMPLite Quickies</title>
<!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<div class="heading">GIMPLite Quickies</div>
<h1>GIMPLite Quickies</h1>
<div class="subtitle">Intention</div>
<h2>Intention</h2>
<p>
So, you have The GIMP installed on your computer, you need to make a quick change to an image for some project, but don't want to learn about
computer graphics right now in order to get the image changed. Totally understandable. The GIMP is a powerful image manipulator with many options and tools.
However, it is quick and somewhat intuitive (after a time) for the small jobs as well. Hopefully, these quickies will help you with your quick problem and help
computer graphics right now in order to get the image changed. Totally understandable.
The GIMP is a powerful image manipulator with many options and tools.
However, it is quick and somewhat intuitive (after a time) for the small jobs as well.
Hopefully, these quickies will help you with your quick problem and help
you to stay friends with The GIMP and ready for its more complex tools and methods later, when you have the time and inspiration.
</p>
<p>
A couple of words about the images used here. The came from <a href="http://antwrp.gsfc.nasa.gov/apod/astropix.html">APOD</a>,
Astronomy Picture Ofthe Day. The screenshots were taken on my desktop which is sporting this <a href="http://antwrp.gsfc.nasa.gov/apod/ap020328.html">APOD</a> image.
Astronomy Picture Ofthe Day. The screenshots were taken on my desktop which is sporting this
<a href="http://antwrp.gsfc.nasa.gov/apod/ap020328.html">APOD</a> image.
</p>
<p>
All you should need to know to start here is how to find your image and open it. <span class="filter">File-&gt;Open</span>.
</p>
<div class="subtitle">Change the Size of an Image (Scale)</div>
<h2>Change the Size of an Image (Scale)</h2>
<p class="images">
<a href="scale-menu.png"><img src="scale-menu-t.png" alt=""/></a>
<a href="scale-dialog.png"><img src="scale-dialog-t.png" alt=""/></a>
......@@ -57,7 +60,7 @@
and height and have it look correct. So only change one and let The GIMP change the rest. To change the other length see the crop quickie.
</p>
<div class="subtitle">Make jpegs Smaller</div>
<h2>Make jpegs Smaller</h2>
<p class="images">
<a href="jpegsave-menu.png"><img src="jpegsave-menu-t.png" alt=""/></a>
<a href="jpegsave-dialog-de.png"><img src="jpegsave-dialog-de-t.png" alt=""/></a>
......@@ -93,7 +96,7 @@
but the difference in what you actually see is fairly interesting.
</p>
<div class="subtitle">Crop An Image</div>
<h2>Crop An Image</h2>
<p class="images">
<a href="crop-menu.png"><img src="crop-menu-t.png" alt=""/></a>
<a href="crop-dialog.png"><img src="crop-dialog-t.png" alt=""/></a>
......@@ -107,7 +110,8 @@
<a href="ngc6369_heritage_big.jpg">ngc6369 heritage</a>.
</p>
<p>
I always click on the approximate upper left corner and drag to the lower <a href="crop-drag.png">right corner</a>. You don't need to worry about being accurate
I always click on the approximate upper left corner and drag to the lower <a href="crop-drag.png">right corner</a>.
You don't need to worry about being accurate
on this first swipe with the crop tool, since a little dialog will pop up and you can make a better choice for your new borders there..
</p>
<p>
......@@ -120,10 +124,11 @@
right after I fixed the width and height and the Y origin, but before the final positoning. The arrows show the move points.
</p>
<p>
I decided that the image looked the best with the <a href="crop-dialog2.png">X Origin at 39</a>. The final image appears <a href="ngc6369_heritage_sq.jpg">here</a>.
I decided that the image looked the best with the <a href="crop-dialog2.png">X Origin at 39</a>.
The final image appears <a href="ngc6369_heritage_sq.jpg">here</a>.
</p>
<div class="subtitle">Find Info About Your Image</div>
<h2>Find Info About Your Image</h2>
<p class="images">
<a href="info-menu.png"><img src="info-menu-t.png" alt=""/></a>
<a href="info-dialog.png"><img src="info-dialog-t.png" alt=""/></a>
......@@ -158,7 +163,7 @@
for instance my friend printed images and then scanned them back in. Terrible business!
</p>
<div class="subtitle">Change the Mode</div>
<h2>Change the Mode</h2>
<p class="images">
<a href="mode-menu.png"><img src="mode-menu-t.png" alt=""/></a>
<img src="mode-dialog.png" alt=""/>
......@@ -209,7 +214,8 @@
</p>
<p>
When you need the person in the photo looking in the other direction, or you need to top of the image to be the bottom.
Mirroring the image (sort of). Right click on the image and follow the menus <span class="filter">&lt;Image&gt;Tools-&gt;Transform Tools-&gt;Flip</span>,
Mirroring the image (sort of). Right click on the image and follow the menus
<span class="filter">&lt;Image&gt;Tools-&gt;Transform Tools-&gt;Flip</span>,
or use the button on the toolbox. <img src="flip-button.png" alt=""/>
</p>
<p>
......@@ -229,14 +235,16 @@
The flips are all displayed on one page for you, <a href="flips.html">here</a>. One might ask themselves, useful? or filler for a pre-established format?
</p>
<div class="subtitle">Rotate An Image</div>
<h2>Rotate An Image</h2>
<p class="images">
<a href="rotate-menu.png"><img src="rotate-menu-t.png" alt=""/></a>
</p>
<p>
Let's say you turned your brand new digital camera to get a vertical shot, now some of your images are on their sides.
Right click on the image, and follow the menus <span class="filter">&lt;Image&gt;Image-&gt;Transforms-&gt;Rotate-&gt;90 degrees</span> (or 270 depending on the orientation).
Using an <a href="http://antwrp.gsfc.nasa.gov/apod/ap000228.html">APOD</a> image. I rotated it once to demonstrate. <a href="sombrero_vlt-270.jpg">270 degrees</a>.
Right click on the image, and follow the menus <span class="filter">&lt;Image&gt;Image-&gt;Transforms-&gt;Rotate-&gt;90 degrees</span>
(or 270 depending on the orientation).
Using an <a href="http://antwrp.gsfc.nasa.gov/apod/ap000228.html">APOD</a> image. I rotated it once to demonstrate.
<a href="sombrero_vlt-270.jpg">270 degrees</a>.
</p>
<p>
......
......@@ -2,7 +2,7 @@
<title>GIMP - jpeg race</title>
<!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<div class="heading">jpeg race</div>
<h1>jpeg race</h1>
<table>
<tr><td>
......
......@@ -2,9 +2,9 @@
<title>GIMP - Perl Debugged</title>
<!--#include virtual="/includes/wgo-look-feel.xhtml" -->
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<div class="heading">Perl Debugged</div>
<h1>Perl Debugged</h1>
<div class="subtitle">Intention</div>
<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
......@@ -36,7 +36,7 @@ register "example", "Example", "Dumb example for debugging",
exit main;
</pre>
<div class="subtitle">Gimp::set_trace</div>
<h2>Gimp::set_trace</h2>
<p>
The gimp module provides tracing ability, which is a form of debugging.
To activate this, start gimp from an XTerm, and place the following at the top of the script:
......@@ -79,7 +79,7 @@ exit main;
It provides a powerful history of what could be going wrong in your script.
</p>
<div class="subtitle">Perl Debugger</div>