Commit cfdcb628 authored by Sven Neumann's avatar Sven Neumann Committed by Sven Neumann

ask the user to merge down the text layer instead of anchoring it.

2005-05-10  Sven Neumann  <sven@gimp.org>

	* tutorials/The_Basics/index.htrw: ask the user to merge down the
	text layer instead of anchoring it.
parent ef1ce78c
2005-05-10 Sven Neumann <sven@gimp.org>
* tutorials/The_Basics/index.htrw: ask the user to merge down the
text layer instead of anchoring it.
2005-05-09 Jakub Friedl <jfriedl@suse.cz>
* links/index.htrw: Added links to Czech and French user sites.
......
......@@ -4,17 +4,23 @@
<!--#include virtual="/includes/wgo-tutorial-init.xhtml" -->
<h1>The Basics Tutorial</h1>
<p>
Text and images Copyright (C) 2002 <a href="mail:People-Lautenbacher_Jens">Jens Lautenbacher</a> and may not be used without permission of the author.
Text and images Copyright (C)
2002 <a href="mail:People-Lautenbacher_Jens">Jens Lautenbacher</a>
and may not be used without permission of the author.
</p>
<h2>Intention</h2>
<p>
On this page, the first section of our ever growing (?) collection of tutorials,
I will demonstrate the basic operation you will need to perform over and over again in your life as a computer artist:
Generate isolated parts of a picture and combine them with a random background.
What we want to achieve in this example is to generate a 3-dimensional text logo flying (and movable) over the background
(a simple uni-color layer in our case, but you will easily see that you could use any other (stack of) layers/images instead.
Start with a plain white picture, black as the foreground color and open the layer dialog!
On this page, the first section of our ever growing (?) collection
of tutorials, I will demonstrate the basic operation you will need
to perform over and over again in your life as a computer artist:
Generate isolated parts of a picture and combine them with a random
background. What we want to achieve in this example is to generate
a 3-dimensional text logo flying (and movable) over the background
(a simple uni-color layer in our case, but you will easily see that
you could use any other (stack of) layers/images instead. Start
with a plain white picture, black as the foreground color and open
the layer dialog!
</p>
<h2>Adding text</h2>
......@@ -22,13 +28,19 @@
<img src="tut-basic-1.gif" alt="" />
</p>
<p>
Use the text tool to add some text. You will get a floating layer which you can also see if you look at the layers dialog.
You can use the move tool to move the selection where you want to have it. You can anchor it at the white layer under it by
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 <span class="filter">&lt;Image&gt; Layer -&gt; Colors -&gt; Invert</span> you
will achieve something like the picture above.
Use the text tool to add some text. You will get a floating layer
which you can also see if you look at the layers dialog. You can
use the move tool to move the selection where you want to have
it. You can anchor it at the white layer under it by 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 <span class="filter">&lt;Image&gt; Layer -&gt;
Colors -&gt; Invert</span> you will achieve something like the
picture above.
</p>
<h2>Adding colors</h2>
......@@ -37,13 +49,18 @@
<img src="tut-basic-3.gif" alt="" />
</p>
<p>
First of all: Blur the image a bit (Gaussian blur at 5 may be a good start). Now add a new layer to the image with the help of
the layers dialog's Ops menu. Choose it to be white. It will be created above the just made text layer effectively hiding it.
It will be active which can be seen from the fact that it has a blue background in the layers dialog. Click some times on the
eye symbol to see how you can make a layer invisible and make the other layer active by clicking on its small preview in the layer
dialog. At the end, leave the new white layer visible and active.
Use the plasma plugin to make this layer a little colorful (Yes, you are invited to experiment with the parameters...).
The layer dialog should look something like this now:
First of all: Blur the image a bit (Gaussian blur at 5 may be a good
start). Now add a new layer to the image with the help of the layers
dialog's Ops menu. Choose it to be white. It will be created above
the just made text layer effectively hiding it. It will be active
which can be seen from the fact that it has a blue background in the
layers dialog. Click some times on the eye symbol to see how you can
make a layer invisible and make the other layer active by clicking
on its small preview in the layer dialog. At the end, leave the new
white layer visible and active. Use the plasma plugin to make this
layer a little colorful (Yes, you are invited to experiment with the
parameters...). The layer dialog should look something like this
now:
</p>
<p class="images">
<img src="tut-basic-dia-1.gif" alt="" />
......@@ -54,17 +71,20 @@
<img src="tut-basic-4.gif" alt="" />
</p>
<p>
It's getting funny now: Use the bumpmap plugin with the blurred text layer as a bumpmap on the plasma layer.
You can play with the other parameters, but they have sensible defaults.
You'll get an image like the one above. Now (still on the plasma layer)
choose Add layer mask from the layer dialog menu. Choose the mask to be white. Nothing will change on the image for now,
but the layer dialog will look like this:
It's getting funny now: Use the bumpmap plugin with the blurred text
layer as a bumpmap on the plasma layer. You can play with the other
parameters, but they have sensible defaults. You'll get an image
like the one above. Now (still on the plasma layer) choose Add layer
mask from the layer dialog menu. Choose the mask to be
white. Nothing will change on the image for now, but the layer
dialog will look like this:
</p>
<p class="images">
<img src="tut-basic-dia-2.gif" alt="" />
</p>
<p>
You can toggle whether a layers mask or the actual picture is active by clicking on their previews in the layers dialog.
You can toggle whether a layers mask or the actual picture is active
by clicking on their previews in the layers dialog.
</p>
<h2>Using the layer mask</h2>
......@@ -72,19 +92,23 @@
<img src="tut-basic-5.gif" alt="" />
</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 <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:
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 <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="" />
</p>
<p>
Use the layer dialog menu to Anchor Layer which will anchor the floating selection into the previous activated layer
(which is the mask of the plasma layer in our case). This will leave you with the following scenario:
Use the layer dialog menu to Merge Down the text layer. This will
combine it with the previously activated layer (which is the mask of
the plasma layer in our case). This will leave you with the
following scenario:
</p>
<p class="images">
<img src="tut-basic-dia-4.gif" alt="" />
......@@ -95,30 +119,34 @@
<img src="tut-basic-6.gif" alt="" />
</p>
<p>
Now add a new layer and fill it with some color (e.g. with the help of the bucket fill tool) and use Raise Layer or
Lower Layer from the layer dialog menu to achieve something like this:
Now add a new layer and fill it with some color (e.g. with the help
of the bucket fill tool) and use Raise Layer or Lower Layer from the
layer dialog menu to achieve something like this:
</p>
<p class="images">
<img src="tut-basic-dia-5.gif" alt="" />
</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 <span class="filter">&lt;Image&gt; Layers -&gt; Colors -&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:
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 <span class="filter">&lt;Image&gt; Layers -&gt; Colors
-&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">
<img src="tut-basic-dia-6.gif" alt="" />
</p>
<p>
What we do here is making the border of the mask sharper, and by that means, sharpening the whole picture
(the area which is neither 100% opaque nor transparent will become smaller).
But we can easily avoid the picture getting pixel-steps by
leaving still a smooth transition between opaque and transparent parts of the layer.
(If you didn't realize it by now - I bet you did - the
layer mask works in such a way that all black parts of
the mask will become transparent parts of the layer and all white parts will stay opaque
What we do here is making the border of the mask sharper, and by
that means, sharpening the whole picture (the area which is neither
100% opaque nor transparent will become smaller). But we can easily
avoid the picture getting pixel-steps by leaving still a smooth
transition between opaque and transparent parts of the layer. (If
you didn't realize it by now - I bet you did - the layer mask works
in such a way that all black parts of the mask will become
transparent parts of the layer and all white parts will stay opaque
(with smooth transitions realized by values of grey).
</p>
......@@ -127,26 +155,28 @@
<img src="tut-basic-7.gif" alt="" />
</p>
<p>
Using the layer menu you will have noticed the entry Duplicate Layer.
Use this now. Then use Apply Layer Mask and Lower Layer which should
leave you with something like this:
Using the layer menu you will have noticed the entry Duplicate
Layer. Use this now. Then use Apply Layer Mask and Lower Layer
which should leave you with something like this:
</p>
<p class="images">
<img src="tut-basic-dia-7.gif" alt="" />
</p>
<p>
Make sure you checked Preserve Transparency (Keep Trans.) and then use the
paint tool to make the copy of the logo black (You don't have to be careful:
The preserve transparency (Keep Trans.) button will let you paint only on opaque parts of the image). This will give you:
Make sure you checked Preserve Transparency (Keep Trans.) and then
use the paint tool to make the copy of the logo black (You don't
have to be careful: The preserve transparency (Keep Trans.) button
will let you paint only on opaque parts of the image). This will
give you:
</p>
<p class="images">
<img src="tut-basic-dia-8.gif" alt="" />
</p>
<p>
Now make sure you unchecked the button again,
blur the layer and move it (with the move tool) some pixels to the right and downwards.
Adjust the transparency with the slider so the background will shine through:
You've just generated a so-called drop shadow, which
Now make sure you unchecked the button again, blur the layer and
move it (with the move tool) some pixels to the right and downwards.
Adjust the transparency with the slider so the background will shine
through: You've just generated a so-called drop shadow, which
greatly enhances the 3d effect and is used in very many places.
</p>
<p class="images">
......@@ -157,7 +187,8 @@
</p>
<p>
The original tutorial can be found <a href="tutorial:The_Basics-Jens_Lautenbacher">here</a>.
The original tutorial can be
found <a href="tutorial:The_Basics-Jens_Lautenbacher">here</a>.
</p>
<!--#include virtual="/includes/wgo-tutorial-fini.xhtml" -->
<div>
......
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