diff options
Diffstat (limited to 'doc/chalk/tutorial-select-layer.docbook')
| -rw-r--r-- | doc/chalk/tutorial-select-layer.docbook | 263 |
1 files changed, 263 insertions, 0 deletions
diff --git a/doc/chalk/tutorial-select-layer.docbook b/doc/chalk/tutorial-select-layer.docbook new file mode 100644 index 00000000..65a7b6ee --- /dev/null +++ b/doc/chalk/tutorial-select-layer.docbook @@ -0,0 +1,263 @@ +<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> |