You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
264 lines
7.8 KiB
264 lines
7.8 KiB
<sect1 id="tutorial-select-layer">
|
|
<title>A Small selections and layers tutorial</title>
|
|
|
|
<!-- Does someone know a better way to do this? -->
|
|
<screenshot>
|
|
<screeninfo>The starting image</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="tutorial-select-layer-sample.png" format="PNG" />
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>The starting image</phrase>
|
|
</textobject>
|
|
<caption><para>The starting image</para></caption>
|
|
</mediaobject>
|
|
</screenshot>
|
|
|
|
<para>
|
|
The image above is the image we will work with. Start chalk with this
|
|
image (in the documentation folder
|
|
<filename>$<envar>KDEDIR</envar>/share/doc/HTML/en/chalk/tutorial-select-layer-sample.png</filename>)
|
|
and save it to your Home folder (by choosing <guilabel>Save Image As...</guilabel>).
|
|
|
|
Then open it in &chalk; — your screen will look a bit like this (we have
|
|
zoomed in):
|
|
</para>
|
|
|
|
<screenshot>
|
|
<screeninfo>Chalk with the starting image</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="tutorial-select-layer-1.png" format="PNG" />
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>The starting image</phrase>
|
|
</textobject>
|
|
<caption><para>The starting image</para></caption>
|
|
</mediaobject>
|
|
</screenshot>
|
|
|
|
<para>
|
|
Now try to select the outline of the head with the <guilabel>Select Outline</guilabel> tool:
|
|
</para>
|
|
|
|
<screenshot>
|
|
<screeninfo>The <guilabel>Select Outline</guilabel> tool</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="tutorial-select-layer-2.png" format="PNG" />
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>The <guilabel>Select Outline</guilabel> tool</phrase>
|
|
</textobject>
|
|
<caption><para>The <guilabel>Select Outline</guilabel> tool</para></caption>
|
|
</mediaobject>
|
|
</screenshot>
|
|
|
|
<para>
|
|
After you select it, it should look a bit like this picture:
|
|
</para>
|
|
|
|
<screenshot>
|
|
<screeninfo>The picture after selecting the head</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="tutorial-select-layer-3.png" format="PNG" />
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>The picture after selecting the head</phrase>
|
|
</textobject>
|
|
<caption><para>The picture after selecting the head</para></caption>
|
|
</mediaobject>
|
|
</screenshot>
|
|
|
|
<para>
|
|
If you accidently select too much, you can cut that part easily off by switching the tool to <guilabel>Subtract</guilabel> mode:
|
|
</para>
|
|
|
|
<screenshot>
|
|
<screeninfo>The <guilabel>Subtract</guilabel> mode</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="tutorial-select-layer-4.png" format="PNG" />
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>The <guilabel>Subtract</guilabel> mode</phrase>
|
|
</textobject>
|
|
<caption><para>The <guilabel>Subtract</guilabel> mode</para></caption>
|
|
</mediaobject>
|
|
</screenshot>
|
|
|
|
<para>
|
|
Now it's time to make the edges of the selection a bit fuzzy. This can be done by applying <guilabel>Feather</guilabel> to the selection.
|
|
</para>
|
|
|
|
<screenshot>
|
|
<screeninfo><guilabel>Feather</guilabel> selection</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="tutorial-select-layer-5.png" format="PNG" />
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase><guilabel>Feather</guilabel> selection</phrase>
|
|
</textobject>
|
|
<caption><para><guilabel>Feather</guilabel> selection</para></caption>
|
|
</mediaobject>
|
|
</screenshot>
|
|
|
|
<para>
|
|
Now cut the selection, using
|
|
<menuchoice><guimenu>Edit</guimenu><guimenuitem>Cut</guimenuitem></menuchoice>.
|
|
Delete the current layer with
|
|
<menuchoice><guimenu>Layer</guimenu><guimenuitem>Remove
|
|
Layer</guimenuitem></menuchoice>. Paste your selection, with
|
|
<menuchoice><guimenu>Edit</guimenu><guimenuitem>Paste</guimenuitem></menuchoice>.
|
|
Now we give ourselves a bit more room to work in by resizing the image a bit.
|
|
Use the <menuchoice><guimenu>Image</guimenu><guimenuitem>Change Image
|
|
Size...</guimenuitem></menuchoice> dialog for this.
|
|
</para>
|
|
|
|
<screenshot>
|
|
<screeninfo>The <guilabel>Image Size</guilabel> dialog</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="tutorial-select-layer-6.png" format="PNG" />
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>The <guilabel>Image Size</guilabel> dialog</phrase>
|
|
</textobject>
|
|
<caption><para>The <guilabel>Image Size</guilabel> dialog</para></caption>
|
|
</mediaobject>
|
|
</screenshot>
|
|
|
|
<para>
|
|
Add a new layer, and place it below the old layer. You do this by selecting
|
|
the new layer in the layerbox, and then pressing the little 'down' arrow at the bottom.
|
|
Now we are going to select the area around the head with a contiguous select
|
|
(the tool has a selection-with-bucketfill icon at the border).
|
|
</para>
|
|
|
|
<screenshot>
|
|
<screeninfo>The <guilabel>Select Contiguous</guilabel> tool</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="tutorial-select-layer-7.png" format="PNG" />
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>The <guilabel>Select Contiguous</guilabel> tool</phrase>
|
|
</textobject>
|
|
<caption><para>The <guilabel>Select Contiguous</guilabel> tool</para></caption>
|
|
</mediaobject>
|
|
</screenshot>
|
|
|
|
<para>
|
|
Make sure to select <guilabel>Sample merged</guilabel> in the tool options:
|
|
</para>
|
|
|
|
<screenshot>
|
|
<screeninfo>The <guilabel>Sample merged</guilabel> option</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="tutorial-select-layer-8.png" format="PNG" />
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>The <guilabel>Sample merged</guilabel> option</phrase>
|
|
</textobject>
|
|
<caption><para>The <guilabel>Sample merged</guilabel> option</para></caption>
|
|
</mediaobject>
|
|
</screenshot>
|
|
|
|
<para>
|
|
Feather the selection again, and invert it.
|
|
Select the <guilabel>Contiguous Fill</guilabel> tool (this is a different tool than
|
|
the <guilabel>Contiguous Select</guilabel> tool) and use it on the layer.
|
|
</para>
|
|
|
|
<screenshot>
|
|
<screeninfo>The <guilabel>Contiguous Fill</guilabel> tool</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="tutorial-select-layer-9.png" format="PNG" />
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>The <guilabel>Contiguous Fill</guilabel> tool</phrase>
|
|
</textobject>
|
|
<caption><para>The <guilabel>Contiguous Fill</guilabel> tool</para></caption>
|
|
</mediaobject>
|
|
</screenshot>
|
|
|
|
<para>
|
|
Deselect with <menuchoice><guimenu>Select</guimenu><guimenuitem>Deselect</guimenuitem></menuchoice>.
|
|
You'll notice some artefacts of the feathering at the sides. You can select them easily with a rectangular selection and then cut them.
|
|
</para>
|
|
|
|
<screenshot>
|
|
<screeninfo>The <guilabel>Select Rectangular</guilabel> tool</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="tutorial-select-layer-10.png" format="PNG" />
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>The <guilabel>Select Rectangular</guilabel> tool</phrase>
|
|
</textobject>
|
|
<caption><para>The <guilabel>Select Rectangular</guilabel> tool</para></caption>
|
|
</mediaobject>
|
|
</screenshot>
|
|
|
|
<para>
|
|
Move the shadow layer a bit down and to the right to make it look nice.
|
|
</para>
|
|
|
|
<screenshot>
|
|
<screeninfo>Moving the shadow layer</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="tutorial-select-layer-11.png" format="PNG" />
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>Moving the shadow layer</phrase>
|
|
</textobject>
|
|
<caption><para>Moving the shadow layer</para></caption>
|
|
</mediaobject>
|
|
</screenshot>
|
|
|
|
<para>
|
|
Now you can use the <guilabel>Crop</guilabel> tool to make the image better fit around the head.
|
|
</para>
|
|
|
|
<screenshot>
|
|
<screeninfo>The <guilabel>Crop</guilabel> tool</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="tutorial-select-layer-12.png" format="PNG" />
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>The <guilabel>Crop</guilabel> tool</phrase>
|
|
</textobject>
|
|
<caption><para>The <guilabel>Crop</guilabel> tool</para></caption>
|
|
</mediaobject>
|
|
</screenshot>
|
|
|
|
<para>
|
|
Save the image, and you're done :-)
|
|
</para>
|
|
|
|
<screenshot>
|
|
<screeninfo>The resulting image</screeninfo>
|
|
<mediaobject>
|
|
<imageobject>
|
|
<imagedata fileref="tutorial-select-layer-13.png" format="PNG" />
|
|
</imageobject>
|
|
<textobject>
|
|
<phrase>The resulting image</phrase>
|
|
</textobject>
|
|
<caption><para>The resulting image</para></caption>
|
|
</mediaobject>
|
|
</screenshot>
|
|
|
|
<para>
|
|
Thanks go to Bart Coppens for providing this tutorial. The original is available at <ulink url="http://www.bartcoppens.be/chalk/hackergotchi.html">http://www.bartcoppens.be/chalk/hackergotchi.html</ulink>.
|
|
</para>
|
|
|
|
</sect1>
|