Commit 2dde8bcb authored by Niklas Mattisson's avatar Niklas Mattisson

Modified ChangeLog. Fixed the filter class for most of the tutorials.

Modified ChangeLog.
Fixed the filter class for most of the tutorials.
parent 585f6c4f
2002-11-18 scizzo <scizzo@gimp.org>
* tutorials/The_Basics/, tutorials/Borders_On_Selections/.
tutorials/Quickmask/, tutorials/Red_Eye_Removal/,
tutorials/Film_Grain/, tutorials/Changing_Background_Color_1/,
tutorials/Changing_Background_Color_2/, tutorials/3d_Logo/,
tutorials/Simple_Animations/, tutorials/Golden_Text/:
Fixed the filter class for most of the tutorials.
2002-11-15 scizzo <scizzo@gimp.org>
* tutorials/Creating_Icons/: Add the first port of the
......
......@@ -152,7 +152,7 @@
</p>
<p>
Select the original text layer (the one you added some color to) and do the Alpha to Selection trick again.
Right click on the image and use Select &gt; grow. This will make the new selection larger by a number of pixels -
Right click on the image and use <span class="filter">&lt;Image&gt;Select-&gt;Grow</span>. This will make the new selection larger by a number of pixels -
I used a value of 2 pixels. Once you have a selection, be sure to reselect the new layer (outline) so that you can
fill it (step 17). And below is what it looks like.
</p>
......@@ -220,7 +220,7 @@
<p>
This. Click inside the bezier path once you close it (close it by clicking one the first node).
This will create a selection.
Use Select &gt; feather to feather (blur) the selection. I used a value of about 10 pixels.
Use <span class="filter">&lt;Image&gt;Select-&gt;Feather</span> to feather (blur) the selection. I used a value of about 10 pixels.
</p>
<div class="subtitle">Step 23</div>
......@@ -247,7 +247,7 @@
<img src="logo-24.png" alt=""/>
</p>
<p>
The image should now look a little like this (Right Image). Don't worry, it'll look better soon.
The image should now look a little like this. Don't worry, it'll look better soon.
</p>
<div class="subtitle">Step 26</div>
......@@ -280,8 +280,9 @@
</p>
<p>
With a little playing around you can get to this. I duplicated the rust layer and moved them (the original rust and the copy) down the stack until
the highlight and lowlight layers were above them. I also duplicated the original text layer, switched on Keep Trans., and used Render &gt; Clouds &gt; Noise to add
a bit of interest to the layer. Try using the Curves tool to help with this. You may also notice that the outline layer is blurred. Sometimes this can help.
the highlight and lowlight layers were above them. I also duplicated the original text layer, switched on Keep Trans., and used
<span class="filter">&lt;Image&gt;Render-&gt;Clouds-&gt;Solid Noise</span> to add a bit of interest to the layer. Try using the Curves tool to help with this.
You may also notice that the outline layer is blurred. Sometimes this can help.
The idea is, try stuff and find out.
</p>
<p>
......
......@@ -12,7 +12,7 @@
Since Gimp is an image manipulation program and not a painting program it doesn't include tools to draw shapes like squares and circles.
However this doesn't mean you can paint them, in fact there are some interesting options regarding this subject when it comes to the gimp.
The solution is to use the selection stroking capabilities of the Gimp. This option can be accesed on the image menu (right button click
on the image), by going to "Edit-&gt;Stroke".
on the image), by going to <span class="filter">&lt;Image&gt;Edit-&gt;Stroke</span>.
</p>
<div class="subtitle">Step 1</div>
......@@ -47,7 +47,7 @@
<img src="img17_result.png" alt=""/>
</p>
<p>
When all the options are selected you can finally click on "Edit-&gt;Stroke". Using a small brush and selecting a blue color here is
When all the options are selected you can finally click on <span class="filter">&lt;Image&gt;Edit-&gt;Stroke</span>. Using a small brush and selecting a blue color here is
the result for the selection made above:
</p>
......
......@@ -47,7 +47,7 @@
<img src="menu.png" alt=""/>
</p>
<p>
The first step is to activate the color to alpha plug-in. Its menu location is &lt;image&gt;/Filters/Colors/Color To Alpha, where &lt;image&gt;
The first step is to activate the color to alpha plug-in. Its menu location is <span class="filter">&lt;image&gt;Filters-&gt;Colors-&gt;Color To Alpha</span>, where &lt;image&gt;
means to right click on the image. If its grayed-out, it means that you have an indexed image. If its not there, upgrade your gimp to 1.2.x.
</p>
......
......@@ -19,7 +19,7 @@
</p>
<p>
In this tutorial I explore the select by color option to remove a particular color from the image. The first step, after you have loaded the image of course,
is to click on the image with the right mouse button, and choose the option "select-&gt;by color" as seen above:
is to click on the image with the right mouse button, and choose the option <span class="filter">&lt;Image&gt;Select-&gt;By Color</span> as seen above:
</p>
<div class="subtitle">Step 2</div>
......@@ -58,7 +58,8 @@
<img src="img7_step5.png" alt=""/>
</p>
<p>
With the selection complete and with an alpha channel just choose from the image menu "Edit-&gt;Clear", and the image background will e gone.
With the selection complete and with an alpha channel just choose from the image menu <span class="filter">&lt;Image&gt;Edit-&gt;Clear</span>,
and the image background will e gone.
</p>
<div class="subtitle">Step 6</div>
......
......@@ -45,8 +45,9 @@
<img src="sailboat-08-grain-masked-rebalanced.jpg" alt=""/>
</p>
<p>
First, desaturate the image. You can do this using &lt;Image&gt;/Colors/Desaturate or the Desaturate filter provided with the MathMap plugin.
(The latter actually returns the luminosity of an image, not a desaturated version. Technically, it's better, but it's unnecessary for most images.)
First, desaturate the image. You can do this using <span class="filter">&lt;Image&gt;Image-&gt;Colors-&gt;Desaturate</span> or the <b>Desaturate</b> filter
provided with the MathMap plugin.(The latter actually returns the luminosity of an image, not a desaturated version.
Technically, it's better, but it's unnecessary for most images.)
</p>
<div class="subtitle">Step 2</div>
......@@ -74,8 +75,8 @@
So far, so good. But the noise is too strong in the shadows and highlights of the image. To demphasize it, we can use a layer mask.
<br />
First, add a layer mask to the noise layer. Then, make a copy of the image, gaussian blur it with a radius of 15 pixels, and paste
the blurred image into the layer mask. Use &lt;Image&gt;/Colors/Invert to swap bright for dark. This will cause the grain to show through
strongly in the shadows and midtones, but not in the highlights.
the blurred image into the layer mask. Use <span class="filter">&lt;Image&gt;Image-&gt;Colors-&gt;Invert</span> to swap bright for dark.
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>
......@@ -83,7 +84,8 @@
<img src="sailboat-08-grain-masked-rebalanced.jpg" alt=""/>
</p>
<p>
Next, use <Image>/Colors/Curves to adjust the value of the layer mask. We want to make the midtones bright, and the shadows and hightlights dark.
Next, use <span class="filter">&lt;Image&gt;Image-&gt;Colors-&gt;Curves</span> to adjust the value of the layer mask.
We want to make the midtones bright, and the shadows and hightlights dark.
You can adjust the curves to taste. Curves Dialog This increases the grain in the midtones, and reduces it elsewhere.
<br />
Here's the Layers, Channels &amp; Paths dialog for the finished image.
......@@ -94,9 +96,10 @@
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.
<br />
Many kinds of noise can be created using &lt;Image&gt;/Filters/Noise/Scatter HSV. You can apply this directly to an image, or to a film grain pattern.
Many kinds of noise can be created using <span class="filter">&lt;Image&gt;Filters-&gt;Noise-&gt;Scatter HSV</span>. You can apply this directly to an image,
or to a film grain pattern.
<br />
To denoise an image, try &lt;Image&gt;/Filters/Blur/Selective Guassian Blur. It's slow, but very nifty.
To denoise an image, try <span class="filter">&lt;Image&gt;Filters-&gt;Blur-&gt;Selective Guassian Blur</span>. It's slow, but very nifty.
</p>
<p>
......
......@@ -11,7 +11,7 @@
<p>
Doesn't the title look really valuable? To reproduce this effect you need the incredible "Lighting"-Plugin,
created by Tom Bech and Federico Mena Quintero. It is not in the standard gimp-1.0 distribution, you have to
install it yourself. It can be found at <span class="filter">&lt;Image&gt;/Filters/Light Effects/Lighting Effects</span>. This Plugin does a very good Bump-Mapping.
install it yourself. It can be found at <span class="filter">&lt;Image&gt;Filters-&gt;Light Effects-&gt;Lighting Effects</span>. This Plugin does a very good Bump-Mapping.
Additionally it can map an enviroment-map to the image.
</p>
......@@ -21,12 +21,12 @@
</p>
<p>
The trick is to use a good enviroment-map. I created it with
<span class="filter">&lt;Image&gt;/Filters/Render/Solid Noise</span>
<span class="filter">&lt;Image&gt;Filters-&gt;Render-&gt;Solid Noise</span>
(X/Y-Size: 2.8, Detail: 1, Tileable). It is important for a good effect to get different grays in the top right corner. Then I did a
<span class="filter">&lt;Image&gt;/Image/Colors/Auto-Stretch Contrast</span> and a
<span class="filter">&lt;Image&gt;/Filters/Blur/Gaussian Blur (IIR)</span> with a radius of 5 to get the full range of gray. Then select the "Golden"-Gradient in
<span class="filter">&lt;Image&gt;/Dialogs/Gradient Editor...</span> and
<span class="filter">&lt;Image&gt;/Filters/Colors/Gradient Map</span> it to the image.
<span class="filter">&lt;Image&gt;Image-&gt;Colors-&gt;Auto-Stretch Contrast</span> and a
<span class="filter">&lt;Image&gt;Filters-&gt;Blur-&gt;Gaussian Blur (IIR)</span> with a radius of 5 to get the full range of gray. Then select the "Golden"-Gradient in
<span class="filter">&lt;Image&gt;Dialogs-&gt;Gradient Editor...</span> and
<span class="filter">&lt;Image&gt;Filters-&gt;Colors-&gt;Gradient Map</span> it to the image.
</p>
<p class="images">
......@@ -79,7 +79,7 @@
So you can select between a linear, spherical, logarithmic and a sinusoidial Bumpmap.
<br /><br />
There is a much more flexible way to specify the surface of the Bumpmap. The Key is the
<span class="filter">&lt;Image&gt;/Image/Colors/Curves-Dialog.</span>
<span class="filter">&lt;Image&gt;Image-&gt;Colors-&gt;Curves-Dialog.</span>
Create the text and blur it with a wider radius. Then select the Curves-Dialog and modify the text-profile. A little Blur (Radius 2)
makes the Bumpmap a little bit smoother. See the examples above.
<br /><br />
......
......@@ -39,7 +39,7 @@
<p>
After you click the red QuickMask button, a translucent red mask appears around your selection. This red mask represents the outside of your selection.
When you click the dashed QuickMask button to go back into normal selection mode, anything red will not be selected, and anything clear will be.
So, let's start playing with this mask. First, right click on the image and select Filters &gt; Distorts &gt; Waves from the menu. Apply the filter,
So, let's start playing with this mask. First, right click on the image and select <span class="filter">Filters-&gt;Distorts-&gt;Waves</span> from the menu. Apply the filter,
and watch what happens to the mask.
</p>
......@@ -48,7 +48,7 @@
<img src="image.4.jpg" alt=""/>
</p>
<p>
The mask gets all wavy. Let's add one more effect: Filters &gt; Blur &gt; Gaussian Blur (RLE).
The mask gets all wavy. Let's add one more effect: <span class="filter">&lt;Image&gt;Filters-&gt;Blur-&gt;Gaussian Blur (RLE)</span>.
</p>
<div class="subtitle">Step 5</div>
......@@ -65,8 +65,8 @@
</p>
<p>
See how the selection follows the mask? This is a powerful feature of QuickMask. You can use it to modify any existing selection, and you can even
use it to create new selections. Our last step is to use Select &gt; Invert and Edit &gt; Fill. The result, a soft white fade into the background,
is shown in the final step.
use it to create new selections. Our last step is to use <span class="filter">&lt;Image&gt;Select-&gt;Invert</span> and
<span class="filter">&lt;Image&gt;Edit-&gt;Fill</span>. The result, a soft white fade into the background, is shown in the final step.
</p>
<div class="subtitle">Final</div>
......@@ -82,21 +82,21 @@
<img src="spread-11.png" alt=""/>
</p>
<p>
The above image used Filters &gt; Noise &gt; Spread, with horizontal and vertical settings at 11, to get the effect.
The above image used <span class="filter">&lt;Image&gt;Filters-&gt;Noise-&gt;Spread</span>, with horizontal and vertical settings at 11, to get the effect.
</p>
<p class="images">
<img src="newsprint.png" alt=""/>
</p>
<p>
I used some blurring and the Filters &gt; Render &gt; Newsprint plugin to get this effect.
I used some blurring and the <span class="filter">&lt;Image&gt;Filters-&gt;Render-&gt;Newsprint</span> plugin to get this effect.
</p>
<p class="images">
<img src="pixelize-10.png" alt=""/>
</p>
<p>
As in the tutorial, this one used Waves, but instead of blurring, I used Filters &gt; Blur &gt; Pixelize instead.
As in the tutorial, this one used Waves, but instead of blurring, I used <span class="filter">&lt;Image&gt;Filters-&gt;Blur-&gt;Pixelize</span> instead.
</p>
<p>
......
......@@ -22,7 +22,7 @@
<p>
I zoomed in on the image, 4:1 ratio, as this is almost pixel by pixel work. I ended up using the 5 x 5 fuzzy brush that came with the GIMP tarball.
As usual, your choice depends on the resolution of your image. A fuzzy brush is highly recommended. On this web sized image, the 3 x 3 fuzzy brush
didn't work fast enough. As always, you can Edit--&gt;Undo until you make the right selections.
didn't work fast enough. As always, you can <span class="filter">&lt;Image&gt;Edit-&gt;Undo</span> until you make the right selections.
</p>
<div class="subtitle">Step 2</div>
......@@ -52,7 +52,7 @@
<br />
tigert warned that this method can leave the white spots in the eyes slightly green. I have found this to be true, however so far it hasn't been enough green
to worry about. Given a photo where the green will make a difference, you can use the same tool combination on the green channel, just move the opacity slider
to a smaller percentage. Edit--&gt;Undo until you get it right.
to a smaller percentage. <span class="filter">&lt;Image&gt;Edit-&gt;Undo</span> until you get it right.
</p>
<div class="subtitle">Final</div>
......
......@@ -19,17 +19,18 @@
<p>
We'll create a very simple web banner. Let's start with a new image 468x60 px. Use white as the background color.
Create new transparent layer. Select the whole image with Ctrl+A and fill it with black (Ctrl+,).
Shrink the selection by 1 px ( <span class="filter">&lt;image&gt;/selection/shrink</span>) and delete the selection with Ctrl+K.
Shrink the selection by 1 px ( <span class="filter">&lt;image&gt;Selection-&gt;shrink</span>) and delete the selection with Ctrl+K.
We created a 1 px frame around out banner.
</p>
<p>
Now it's time to put our logo or the main theme picture into the banner. I have prepared a masked-out flower you see on the picture on the left.
I just pasted the flower below the border frame, used alpha to selection, created an empty layer below it and filled the selection with black using Ctrl+,.
After that I blurred the shadow using Gaussian blur RLE and ofset it by 2px to bottom right. I couldn't resist adding the interlace effect using
<span class="filter">&lt;image&gt;/filters/render/grid</span> and a layer mask. In that layer mask i applied a b/w gradient, so that the left of the flower is not interlaced.
<span class="filter">&lt;image&gt;Filters-&gt;Render-&gt;Grid</span> and a layer mask. In that layer mask i applied a b/w gradient,
so that the left of the flower is not interlaced.
<br /><br />
This part of the tutorial is not the key element, so feel free to experiment. Once you're ready flatten the image using the
<span class="filter">&lt;image&gt;/layers/flatten image.</span>
<span class="filter">&lt;image&gt;Layers-&gt;Flatten Image</span>.
</p>
<div class="subtitle">Step 2</div>
......@@ -57,7 +58,7 @@
because the delay does not have to be constant. In GIMP you specify the delay as a layer comment. Just double-click the layer comment in the layers'
window and a delay in ms enclosed in brackets ().
<br /><br />
To check if the timing is good, you can preview the animation using the <span class="filter">&lt;image&gt;/filters/ animation/animation playback</span>.
To check if the timing is good, you can preview the animation using the <span class="filter">&lt;image&gt;Filters-&gt;Animation-&gt;Animation Playback</span>.
You can even drag the preview around your desktop.
</p>
......@@ -71,7 +72,7 @@
In the last step, we'll use a very handy function for applying a filter to multiple layers. Before we do that, we need to create a new image out of the third frame.
In GIMP 1.1+ it's as simple as dragging the layer preview from the layers window to the toolbar. Now duplicate the image four times. With a rectangular select tool,
draw a selction around the text. Now we're ready to apply a gaussian blur filter on every layer using varying parameters. Use the
<span class="filter">&lt;image&gt;/filters/filter all layers</span> function and select plug-in-gauss-rle2 from the list and press the apply varying button.
<span class="filter">&lt;image&gt;Filters-&gt;Filter All Layers</span> function and select plug-in-gauss-rle2 from the list and press the apply varying button.
The blur dialog pops up. Now we need to specify parameters for the lowest layer in the stack, ie. our first frame.
<br /><br />
We want to blur the text away in time, so for the first frame, let's specify a lower value. We'll blur in horizontal direction only,
......@@ -85,12 +86,13 @@
<img src="saveas.png" alt=""/>
</p>
<p>
Now we only need to save our animation as GIF. Before we do that, let's optimize the animation using the <span class="filter">&lt;image&gt;/filters/animation/animation optimize</span> function.
Now we only need to save our animation as GIF. Before we do that, let's optimize the animation using the
<span class="filter">&lt;image&gt;Filters-&gt;Animation-&gt;Animation Optimize</span> function.
This will create a new image using a different mode than what we have now. You can use two different modes for every frame of your animation.
You can either use the replace mode (default), which will replace the old frame with the new one. It's like taking the frame out before adding a new one.
The other is the combine method, in which the new frame is added to the previous frame. That way only changes need to be updated.
That's what animation optimize basically does. The file size gets tremendously smaller. Now we need to index the image using
<span class="filter">&lt;image&gt;/image/mode/indexed</span> function (Alt+I).
<span class="filter">&lt;image&gt;Image-&gt;Mode-&gt;Indexed</span> function (Alt+I).
<br /><br />
Try to use as little colors as possible and avoid dithering. Both number of colors and dithering tend to enlarge the filesize dramaticaly.
I used no color dithering and generated 32 color pallette. The file size of the banner is about 7kB. If you now save the image as GIF,
......
......@@ -24,7 +24,8 @@
clicking outside of the selection with the move tool still active. You will notice that the pointer changes into a down-arrow
when you're outside of the floating selection and into a 4-arrow when inside it. This is to give visual feedback which of the
two actions (moving or anchoring) a click will trigger.
You should have one layer with black text on white background. Using Image->Colors->Invert you will achieve something like the picture above.
You should have one layer with black text on white background. Using <span class="filter">&lt;Image&gt;Image-&gt;Colors-&gt;Invert</span> you
will achieve something like the picture above.
</p>
<div class="subtitle">Adding colors</div>
......@@ -68,8 +69,9 @@
</p>
<p>
Now activate the text layer again. (you don't have to make the layers on top invisible to work on this layer.
It's enough that you activate it in the layers dialog.) Now do Edit->Copy. Make sure you have the mask of the top
layer selected and the layer is activated. Choose Edit->Paste. You will again get a floating selection, shown in the layer dialog like this:
It's enough that you activate it in the layers dialog.) Now do <span class="filter">&lt;Image&gt;Edit-&gt;Copy</span>. Make sure you have the mask of the top
layer selected and the layer is activated. Choose <span class="filter">&lt;Image&gt;Edit-&gt;Paste</span>. You will again get a floating selection,
shown in the layer dialog like this:
</p>
<p class="images">
<img src="tut-basic-dia-3.gif" alt=""/>
......@@ -95,7 +97,7 @@
</p>
<p>
Now you'll see that the image of the logo isn't very sharp. We'll change this now. Make sure you have selected the plasma
layer's mask and open Image->Adjust->Levels. This tool is one of the most important tools you have! Play with the little
layer's mask and open <span class="filter">&lt;Image&gt;Image-&gt;Adjust-&gt;Levels</span>. This tool is one of the most important tools you have! Play with the little
triangles you'll see in the two grey gradients and watch their effect on the image. For now, try to achieve something like the following:
</p>
<p class="images">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment