[gimp-help-2] Rewrite quickies.xml
- From: Julien Hardlin <jhardlin src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gimp-help-2] Rewrite quickies.xml
- Date: Wed, 6 Apr 2011 06:36:08 +0000 (UTC)
commit 46c59d7a4c82cef090bb933d0249d435df953038
Author: Michael Grosberg <grosberg michael gmail com>
Date: Wed Apr 6 08:35:11 2011 +0200
Rewrite quickies.xml
images/C/tutorials/quickie-crop-example-result.jpg | Bin 5413 -> 16814 bytes
images/C/tutorials/quickie-crop-example-source.jpg | Bin 12686 -> 29460 bytes
images/C/tutorials/quickie-crop-step1.png | Bin 139303 -> 56570 bytes
images/C/tutorials/quickie-crop-step2.png | Bin 153576 -> 56158 bytes
...uickie-flip-example-horizontal-and-vertical.png | Bin 50129 -> 0 bytes
.../tutorials/quickie-flip-example-horizontal.png | Bin 50258 -> 0 bytes
images/C/tutorials/quickie-flip-example-source.png | Bin 102267 -> 0 bytes
.../C/tutorials/quickie-flip-example-vertical.png | Bin 100187 -> 0 bytes
images/C/tutorials/quickie-flip-menu.png | Bin 457862 -> 37452 bytes
images/C/tutorials/quickie-info-crop.png | Bin 331549 -> 0 bytes
images/C/tutorials/quickie-info-dialog.png | Bin 46792 -> 37651 bytes
images/C/tutorials/quickie-info-menu.png | Bin 322844 -> 62041 bytes
images/C/tutorials/quickie-info-print-emul.jpg | Bin 2852 -> 0 bytes
images/C/tutorials/quickie-info-problem.png | Bin 50843 -> 0 bytes
images/C/tutorials/quickie-jpeg-006.jpg | Bin 2630 -> 0 bytes
images/C/tutorials/quickie-jpeg-042.jpg | Bin 4647 -> 0 bytes
images/C/tutorials/quickie-jpeg-085.jpg | Bin 6837 -> 0 bytes
images/C/tutorials/quickie-jpeg-100.jpg | Bin 6844 -> 74348 bytes
images/C/tutorials/quickie-jpeg-dialog.png | Bin 98506 -> 31084 bytes
images/C/tutorials/quickie-jpeg-dialog2.png | Bin 123546 -> 36628 bytes
images/C/tutorials/quickie-jpeg-example.jpg | Bin 6842 -> 74348 bytes
images/C/tutorials/quickie-mode-alpha.png | Bin 236205 -> 100390 bytes
images/C/tutorials/quickie-mode-indexed.png | Bin 40836 -> 43044 bytes
images/C/tutorials/quickie-mode-menu.png | Bin 210255 -> 88563 bytes
.../C/tutorials/quickie-rotate-example-90-CCW.png | Bin 65162 -> 0 bytes
.../C/tutorials/quickie-rotate-example-source.png | Bin 64503 -> 0 bytes
images/C/tutorials/quickie-rotate-menu.png | Bin 93948 -> 105736 bytes
.../quickie-save-image-dialog-file-type.png | Bin 90204 -> 36775 bytes
images/C/tutorials/quickie-scale-dialog.png | Bin 45765 -> 34656 bytes
images/C/tutorials/quickie-scale-dialog2.png | Bin 43805 -> 0 bytes
images/C/tutorials/quickie-scale-example.jpg | Bin 9520 -> 17403 bytes
images/C/tutorials/quickie-scale-menu.png | Bin 354681 -> 87671 bytes
src/tutorial/quickies.xml | 1570 ++++++++++----------
33 files changed, 805 insertions(+), 765 deletions(-)
---
diff --git a/images/C/tutorials/quickie-crop-example-result.jpg b/images/C/tutorials/quickie-crop-example-result.jpg
index 5908a0a..a85ab7f 100644
Binary files a/images/C/tutorials/quickie-crop-example-result.jpg and b/images/C/tutorials/quickie-crop-example-result.jpg differ
diff --git a/images/C/tutorials/quickie-crop-example-source.jpg b/images/C/tutorials/quickie-crop-example-source.jpg
index ef70382..0011b4f 100644
Binary files a/images/C/tutorials/quickie-crop-example-source.jpg and b/images/C/tutorials/quickie-crop-example-source.jpg differ
diff --git a/images/C/tutorials/quickie-crop-step1.png b/images/C/tutorials/quickie-crop-step1.png
index ab0f082..be21ee8 100644
Binary files a/images/C/tutorials/quickie-crop-step1.png and b/images/C/tutorials/quickie-crop-step1.png differ
diff --git a/images/C/tutorials/quickie-crop-step2.png b/images/C/tutorials/quickie-crop-step2.png
index 8c7ad0e..b687139 100644
Binary files a/images/C/tutorials/quickie-crop-step2.png and b/images/C/tutorials/quickie-crop-step2.png differ
diff --git a/images/C/tutorials/quickie-flip-menu.png b/images/C/tutorials/quickie-flip-menu.png
index d1e9bfb..3fa58e6 100644
Binary files a/images/C/tutorials/quickie-flip-menu.png and b/images/C/tutorials/quickie-flip-menu.png differ
diff --git a/images/C/tutorials/quickie-info-dialog.png b/images/C/tutorials/quickie-info-dialog.png
index fa63b7d..7e158f2 100644
Binary files a/images/C/tutorials/quickie-info-dialog.png and b/images/C/tutorials/quickie-info-dialog.png differ
diff --git a/images/C/tutorials/quickie-info-menu.png b/images/C/tutorials/quickie-info-menu.png
index be1f946..35c8e99 100644
Binary files a/images/C/tutorials/quickie-info-menu.png and b/images/C/tutorials/quickie-info-menu.png differ
diff --git a/images/C/tutorials/quickie-jpeg-100.jpg b/images/C/tutorials/quickie-jpeg-100.jpg
index 02d825c..c544532 100644
Binary files a/images/C/tutorials/quickie-jpeg-100.jpg and b/images/C/tutorials/quickie-jpeg-100.jpg differ
diff --git a/images/C/tutorials/quickie-jpeg-dialog.png b/images/C/tutorials/quickie-jpeg-dialog.png
index af2c6db..6328a45 100644
Binary files a/images/C/tutorials/quickie-jpeg-dialog.png and b/images/C/tutorials/quickie-jpeg-dialog.png differ
diff --git a/images/C/tutorials/quickie-jpeg-dialog2.png b/images/C/tutorials/quickie-jpeg-dialog2.png
index c334211..5e51081 100644
Binary files a/images/C/tutorials/quickie-jpeg-dialog2.png and b/images/C/tutorials/quickie-jpeg-dialog2.png differ
diff --git a/images/C/tutorials/quickie-jpeg-example.jpg b/images/C/tutorials/quickie-jpeg-example.jpg
index 9e05876..c544532 100644
Binary files a/images/C/tutorials/quickie-jpeg-example.jpg and b/images/C/tutorials/quickie-jpeg-example.jpg differ
diff --git a/images/C/tutorials/quickie-mode-alpha.png b/images/C/tutorials/quickie-mode-alpha.png
index 90dfa00..520e24d 100644
Binary files a/images/C/tutorials/quickie-mode-alpha.png and b/images/C/tutorials/quickie-mode-alpha.png differ
diff --git a/images/C/tutorials/quickie-mode-indexed.png b/images/C/tutorials/quickie-mode-indexed.png
index ad2e969..aaa857c 100644
Binary files a/images/C/tutorials/quickie-mode-indexed.png and b/images/C/tutorials/quickie-mode-indexed.png differ
diff --git a/images/C/tutorials/quickie-mode-menu.png b/images/C/tutorials/quickie-mode-menu.png
index 73eb1bb..245df6b 100644
Binary files a/images/C/tutorials/quickie-mode-menu.png and b/images/C/tutorials/quickie-mode-menu.png differ
diff --git a/images/C/tutorials/quickie-rotate-menu.png b/images/C/tutorials/quickie-rotate-menu.png
index 7d90309..23271f5 100644
Binary files a/images/C/tutorials/quickie-rotate-menu.png and b/images/C/tutorials/quickie-rotate-menu.png differ
diff --git a/images/C/tutorials/quickie-save-image-dialog-file-type.png b/images/C/tutorials/quickie-save-image-dialog-file-type.png
index c1f6a34..000ad0e 100644
Binary files a/images/C/tutorials/quickie-save-image-dialog-file-type.png and b/images/C/tutorials/quickie-save-image-dialog-file-type.png differ
diff --git a/images/C/tutorials/quickie-scale-dialog.png b/images/C/tutorials/quickie-scale-dialog.png
index a23ea28..9b368de 100644
Binary files a/images/C/tutorials/quickie-scale-dialog.png and b/images/C/tutorials/quickie-scale-dialog.png differ
diff --git a/images/C/tutorials/quickie-scale-example.jpg b/images/C/tutorials/quickie-scale-example.jpg
index da34d8f..63d2702 100644
Binary files a/images/C/tutorials/quickie-scale-example.jpg and b/images/C/tutorials/quickie-scale-example.jpg differ
diff --git a/images/C/tutorials/quickie-scale-menu.png b/images/C/tutorials/quickie-scale-menu.png
index e45b0e4..2b24069 100644
Binary files a/images/C/tutorials/quickie-scale-menu.png and b/images/C/tutorials/quickie-scale-menu.png differ
diff --git a/src/tutorial/quickies.xml b/src/tutorial/quickies.xml
index 88341af..7c19107 100644
--- a/src/tutorial/quickies.xml
+++ b/src/tutorial/quickies.xml
@@ -1,765 +1,805 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE sect1 PUBLIC "-//OASIS//DTD DocBook XML V4.3//EN"
- "http://www.docbook.org/xml/4.3/docbookx.dtd";>
-<!-- section history:
- 2008-03-23 Added Korean translation by Mr.Dust
- 2007-06-22 Added Spanish translation by AntI
- 2007-06-06 alex falappa: added 'it' translation
- 2007-05-28 KoSt: added 'no'
- 2007-05-11 lexa: initial version
--->
-<sect1 id="gimp-tutorial-quickies">
- <title>GIMPLite Quickies</title>
-
- <indexterm>
- <primary>Tutorial</primary>
- </indexterm>
-
- <para>
- This tutorial is based on text and images Copyright © 2004 Carol Spears.
- The original tutorial can be found in the Internet
- <xref linkend="bibliography-online-tutorial02"/>.
- </para>
-
- <sect2>
- <title>Intention</title>
- <para>
- So, <acronym>GIMP</acronym> is 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 just to change an image; totally understandable.
- <acronym>GIMP</acronym> 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
- <acronym>GIMP</acronym>;
- and ready for the more complex tools and methods later, when you have
- the time and inspiration.
- </para>
- <para>
- A couple of words about the images used here. The images came from APOD
- <xref linkend="bibliography-online-apod01"/>,
- Astronomy Picture of the Day. The screenshots were taken on my desktop
- which is sporting this APOD
- <xref linkend="bibliography-online-apod02"/> image.
- </para>
- <para>
- All you need to know to start this tutorial, is how to find and open
- your image.
- (<menuchoice><guimenu>File</guimenu>
- <guimenuitem>Open</guimenuitem></menuchoice> from the Image window).
- </para>
- </sect2>
-
- <sect2 id="gimp-tutorial-quickie-scale">
- <title>Change the Size of an Image (Scale)</title>
- <indexterm>
- <primary>Tutorial</primary>
- </indexterm>
- <indexterm>
- <primary>Image</primary>
- <secondary>scale</secondary>
- </indexterm>
- <para>
- Problem: you have a huge image and you want to resize the is so
- that it will display nicely on a web page. The example image is this
- beauty m51_hallas_big.jpg from APOD
- <xref linkend="bibliography-online-apod03"/>.
- </para>
- <figure>
- <title>Example Image for Scaling</title>
- <mediaobject>
- <imageobject>
- <imagedata format="JPG"
- fileref="images/tutorials/quickie-scale-example.jpg"/>
- </imageobject>
- </mediaobject>
- </figure>
- <para>
- The first thing that you might notice, is that
- <acronym>GIMP</acronym> opens the image at a logical size for
- viewing. If your image is really big like the sample image,
- <acronym>GIMP</acronym> will set the zoom so that
- it will display nicely on the screen. The zoom level is shown in the
- status area at the bottom of the Image window.
- </para>
- <para>
- The other thing to look at in the title-bar is the mode.
- If the mode shows as RGB in the title bar, you are fine.
- If the mode says Indexed or grayscale,
- read the <xref linkend="gimp-tutorial-quickie-change-mode"/>.
- </para>
- <figure>
- <title>GIMP Used for Image Scaling</title>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-scale-menu.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- <para>
- Use
- <menuchoice>
- <guimenu>Image</guimenu>
- <guimenuitem>Scale Image</guimenuitem>
- </menuchoice>
- to open the Scale Image dialog. You can right click on the image to open
- the menu, or use the menu along the top of the Image window.
- Notice that the Scale Image menu item contains three dots,
- which is a hint that a dialog will be opened.
- </para>
- <figure>
- <title>Dialog for Image Scaling in Pixels</title>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-scale-dialog.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- <para>
- If you have a desired width, put it in the dialog at the top where it
- says <guilabel>Width</guilabel>. If you don't have such a number in
- mind, you can steal the width of <acronym>GIMP</acronym>'s default image
- size, which is 256 pixels.
- This is shown in the figure above.
- </para>
- <figure>
- <title>Dialog for Image Scaling in Inches</title>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-scale-dialog2.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- <para>
- Perhaps you want your image to look more like a 4x6 inch photo on most
- image rendering web browsers. Switch the units to
- <quote>inches</quote> and enter 4 inches in the height box (opting for
- smaller than 4x6 rather than bigger). You can see this dialog above.
- </para>
- <para>
- Let <acronym>GIMP</acronym> choose the other dimension length for you.
- Meaning, it requires
- more image knowledge to change both width and height and have it
- look correct. So change only one item and let <acronym>GIMP</acronym>
- change the rest. To change
- the other dimension, see <xref linkend="gimp-tutorial-quickie-crop"/>.
- </para>
- </sect2>
-
- <sect2 id="gimp-tutorial-quickie-jpeg">
- <title>Make JPEGs Smaller</title>
- <indexterm>
- <primary>Tutorial</primary>
- </indexterm>
- <indexterm>
- <primary>Image</primary>
- <secondary>save</secondary>
- </indexterm>
- <figure>
- <title>Example Image for JPEG Saving</title>
- <mediaobject>
- <imageobject>
- <imagedata format="JPG"
- fileref="images/tutorials/quickie-jpeg-example.jpg"/>
- </imageobject>
- </mediaobject>
- </figure>
- <para>
- You can make your jpegs smaller (use less space on disk) without
- changing the image dimensions. The image for this example is also
- take from APOD <xref linkend="bibliography-online-apod04"/>.
- The original image is huge (3000 pixels wide) so first I reduced
- the width and height for better use on the web (see
- <xref linkend="gimp-tutorial-quickie-scale"/>).
- Use
- <menuchoice>
- <guimenu>File</guimenu>
- <guimenuitem>Save As</guimenuitem>
- </menuchoice>
- to open the Save Image dialog.
- </para>
- <figure>
- <title>Save Image Dialog</title>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-save-image-dialog-file-type.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- <para>
- I usually type the full filename with extension into Name text box,
- and <acronym>GIMP</acronym> determines the file type from the
- file extension; for example, .jpg. Use the file extension list,
- circled in the figure above, to see the types supported by
- <acronym>GIMP</acronym>. The supported extensions change depending
- on your installed libraries.
- If <acronym>GIMP</acronym> complains, or if
- <quote>JPEG</quote> is grayed out in the Extensions menu,
- cancel out of everything and step through the
- <xref linkend="gimp-tutorial-quickie-change-mode"/>.
- </para>
- <para>
- The Save as JPEG dialog uses default values that reduce size while
- retaining good visual quality; this is the safest and quickest
- thing to do.
- </para>
- <figure>
- <title>Save as JEPG dialog with poor quality. </title>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-jpeg-dialog.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- <para>
- Reduce the image Quality to make the image even smaller.
- Reduced quality degrades the image, so be certain to check
- <quote>Show preview in image window</quote>. As shown in the figure
- above, a Quality of 6 produces a very poor quality image that uses very
- little disk space.
- The figure below shows a more reasonable image. A quality of 42
- produces a reasonable image using much less disk space, which will,
- in turn, load much faster on a web page. Although the image is degraded,
- it is acceptable for the intended purpose.
- </para>
- <figure>
- <title>Dialog for Image Saving as JPEG</title>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-jpeg-dialog2.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- <para>
- I have not been showing the actual jpegs I created so that we could end
- this quickie with a race.
- </para>
- <figure>
- <title>Example for High JPEG Compression</title>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-jpeg-006.jpg"/>
- </imageobject>
- <caption>
- <para>Quality: 6; Size: 1361 Bytes</para>
- </caption>
- </mediaobject>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-jpeg-042.jpg"/>
- </imageobject>
- <caption>
- <para>Quality: 42; Size: 3549 Bytes</para>
- </caption>
- </mediaobject>
- </figure>
- <figure>
- <title>Example for Moderate JPEG Compression</title>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-jpeg-085.jpg"/>
- </imageobject>
- <caption>
- <para>
- Quality: 85 (<acronym>GIMP</acronym>s default); Size: 6837 Bytes
- </para>
- </caption>
- </mediaobject>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-jpeg-100.jpg"/>
- </imageobject>
- <caption>
- <para>Quality: 100; Size: 20,971 Bytes</para>
- </caption>
- </mediaobject>
- </figure>
- </sect2>
-
- <sect2 id="gimp-tutorial-quickie-crop">
- <title>Crop An Image</title>
- <indexterm>
- <primary>Tutorial</primary>
- </indexterm>
- <indexterm>
- <primary>Image</primary>
- <secondary>crop</secondary>
- </indexterm>
- <figure>
- <title>Example Image for Cropping</title>
- <mediaobject>
- <imageobject>
- <imagedata format="JPG"
- fileref="images/tutorials/quickie-crop-example-source.jpg"/>
- </imageobject>
- <caption>
- <para>Source image</para>
- </caption>
- </mediaobject>
- <mediaobject>
- <imageobject>
- <imagedata format="JPG"
- fileref="images/tutorials/quickie-crop-example-result.jpg"/>
- </imageobject>
- <caption>
- <para>Image after cropping</para>
- </caption>
- </mediaobject>
- </figure>
- <para>
- There are many reasons to crop an image; for example, fitting an image
- to fill a frame, removing a portion of the background to emphasize the
- subject, etc. There are two methods to activate the crop tool.
- Click the
- <guiicon>
- <inlinemediaobject>
- <imageobject>
- <imagedata fileref="images/toolbox/stock-tool-crop-22.png"/>
- </imageobject>
- </inlinemediaobject>
- </guiicon>
- button in the Toolbox, or use
- <menuchoice>
- <guimenu>Tools</guimenu>
- <guisubmenu>Transform Tools</guisubmenu>
- <guimenuitem>Crop</guimenuitem>
- </menuchoice>
- in the image window. This will change the cursor and allow you to click
- and drag a rectangular shape. The
- button in the toolbox is the nicest way to get to any of the tools. I
- have chosen one of the huge and beautiful APOD images
- <xref linkend="bibliography-online-apod05"/>.
- </para>
- <figure>
- <title>Select a Region to Crop</title>
- <mediaobject>
- <imageobject>
- <imagedata format="JPG"
- fileref="images/tutorials/quickie-crop-step1.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- <para>
- I always click on the approximate upper left corner and drag to the
- lower right corner; the approximate path is shown in red.
- You don't need to worry about being accurate on this
- first swipe with the crop tool.
- </para>
- <figure>
- <title>Dialog for Cropping</title>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-crop-step2.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- <para>
- After completing the click and drag motion, a rectangle with special
- regions show the selected area. As the cursor is moved over the
- different areas of the selected crop area, the cursor changes.
- You can then drag the cursor to change the dimensions of the selected
- area. As shown in the figure above, as the crop area is resized,
- the dimensions and ratio are shown in the status bar.
- See <xref linkend="gimp-tool-crop"/> for more information on cropping
- in <acronym>GIMP</acronym>.
- If you would like to make
- this rectangular image square, you should find the width and height from
- the Get Image Information Quickie (see
- <xref linkend="gimp-tutorial-quickie-info"/>. Use the smallest of the
- two lengths to determine the size of the square. In my 300 x 225 pixel
- image, the largest square I can get is 225 x 225 pixels.
- Use the image and the
- squares to get the best part of the image for the area.
- Use any of the areas to move the edges and change the dimensions
- to achieve the image that you prefer. Double click in the area
- to crop the image.
- </para>
- </sect2>
-
- <sect2 id="gimp-tutorial-quickie-info">
- <title>Find Info About Your Image</title>
- <indexterm>
- <primary>Tutorial</primary>
- </indexterm>
- <indexterm>
- <primary>Image</primary>
- <secondary>information</secondary>
- </indexterm>
- <figure>
- <title>Finding Info</title>
- <mediaobject>
- <imageobject>
- <imagedata format="JPG"
- fileref="images/tutorials/quickie-info-menu.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- <para>
- This example uses another image image from APOD
- <xref linkend="bibliography-online-apod06"/>.
- Much information is available directly from the Image Window; for
- example, the image dimensions.Use
- <menuchoice>
- <guimenu>Image</guimenu>
- <guimenuitem>Image Properties</guimenuitem></menuchoice>
- to open the Image Properties dialog, which contains even more
- information.
- </para>
- <figure>
- <title>Image Properties Dialog</title>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-info-dialog.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- <para>
- If you are just making a square out of a rectangle, like in the
- <xref linkend="gimp-tutorial-quickie-crop"/>,
- it is fast and easy to find the smallest dimension.
- you need only to open the dialog and find the lesser length and use
- that as described. Since this is very little information, and definitely
- not enough to fill the space between the menu thumbnail and the dialog
- screenshot in my layout, I thought I would run through some calculator
- exercises that might help you to meet your image needs.
- </para>
- <figure>
- <title>Scale Problem</title>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-info-problem.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- <para>
- It is nice to have images appear on a browser window as a photo would.
- Photos online appear to be 4x6 inches when scaled to 288x432 pixels (72
- dpi for many monitors). There is a problem, however, if you try to scale
- this image. The ratio of width to length of the original does not match
- the ratio of the photo. So, to make the scaled image the correct size
- some pixels must be cropped from the height. The final image will
- <quote>appear</quote> as a 6x4 inch photo on many monitors.
- </para>
- <figure>
- <title>Problem Solved by Cropping</title>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-info-crop.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- <para>
- There are problems when mixing scanned photos, digital
- photos, and scanned negatives. Many film developing machines
- automatically crop portions of the image so that they will match
- the printing size, or a certain style.
- If you are preparing an image to be printed on a machine like
- this; or if you are planning on a gallery where the images are from
- different sources, some intelligent cropping to fit the best size for
- the medium you have chosen will be a plus. If this is confusing; please
- blame the photo printing industry and not <acronym>GIMP</acronym>.
- </para>
- <para>
- You can change the Resolution of your image as well, using the same
- methods we used to Scale the image, although, in my somewhat limited
- use,
- the issue is more about how many pixels. Let's say you want to print an
- image at a photo lab. 300 pixels for every inch is preferred.
- An image that is 2241x1548 pixels will easily print as
- a 7 x 5 photo. 2241px/300ppi =
- 7.47 in. Get your calculator for the short side. 1548/300 = _.
- </para>
- <para>
- There is another brutal fact you should come to terms with if you are
- new to graphics and computers. Just because it looks good on the screen
- doesn't mean that it will print nicely. I tried to emulate how this
- image would appear printed at 300dpi. Sorry. There are some options, for
- instance my friend printed images and then scanned them back in.
- Terrible business!
- </para>
- <figure>
- <title>Actual printing result of example image</title>
- <mediaobject>
- <imageobject>
- <imagedata format="JPG"
- fileref="images/tutorials/quickie-info-print-emul.jpg"/>
- </imageobject>
- </mediaobject>
- </figure>
- </sect2>
-
- <sect2 id="gimp-tutorial-quickie-change-mode">
- <title>Change the Mode</title>
- <indexterm>
- <primary>Tutorial</primary>
- </indexterm>
- <indexterm>
- <primary>Image</primary>
- <secondary>change Mode</secondary>
- </indexterm>
- <para>
- As with anything else, images come in different kinds and serve
- different purposes. Sometimes, a small size is important (for web sites)
- and at other times, retaining a high color depth in all its glory (a
- family portrait) is what you want. <acronym>GIMP</acronym> can handle
- all of this, and
- more, primarily by converting between three fundamental modes, as seen
- in this menu. In order to switch your image to one of these modes, you
- open it and follow that menu and click the mode you want.
- </para>
- <figure>
- <title>Dialog for changing the mode</title>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-mode-menu.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- <para>
- <emphasis>RGB</emphasis>
- - This is the default mode, used for high quality rich color images.
- This is also the mode for most of your image work including
- scaling, cropping, and even flipping, as it gives the computer more
- information to work with. The extra information also makes RGB Mode the
- largest to store as a result.
- </para>
- <para>
- A little bit of detail if you are interested. Each pixel or point when
- in this mode consists of three different components. R->Red, G->Green,
- B->Blue. Each of these in turn can have an intensity value of 0-255. So,
- at every pixel, what you see is an additive combination of these three
- components. All these combinations result in a way to represent millions
- of colors.
- </para>
-<!--
- <para>
- As an example to practice with images have been provided in various
- sizes and formats. Indexed images of different sizes: from a very old
- APOD a small gif and a larger gif of the same image from a later APOD.
- Also the same image in RGB as provided by Earth Observatory a smaller
- version and a huge version.
- </para>
--->
- <para>
- <emphasis>Indexed</emphasis>
- - This is the mode usually used when file size is of concern, or when
- you are working with images with few colors. It involves using a fixed
- number of colors, 256 or less, at each point to represent the color at
- that point. The defaults to attempting to figure out an "optimum
- palette" to best represent your image. Try it, you can undo it if you
- don't like the results, or use a custom palette or more colors.
- </para>
- <figure>
- <title>Dialog <quote>Change to Indexed Colors</quote></title>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-mode-indexed.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- <para>
- As you might expect, since the information needed to represent the
- color at each pixel is less, the file size is smaller. However,
- sometimes, there are options in the various menus that are
- "greyed" out for no apparent reason. This usually means that the filter
- or option cannot be applied when your image is in its current mode.
- Changing the mode to RGB, as outlined above, should solve this issue. If
- RGB mode
- doesn't work either, perhaps the option you're trying requires your
- layer to have the ability to be transparent. This can be done just as
- easily via
- <menuchoice>
- <guimenu>Layer</guimenu>
- <guimenuitem>Transparency</guimenuitem>
- <guimenuitem>Add Alpha Channel</guimenuitem>
- </menuchoice>.
- </para>
- <figure>
- <title>Add Alpha Channel</title>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-mode-alpha.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- <para>
- <emphasis>Grayscale</emphasis>
- - In case you want to convert your brilliant color image to something
- that's black and white (with a lot of shades of grey), this is one of
- the easiest ways in which to do it. Some photos do look a lot fancier
- when displayed in grayscale. Again, if you're interested in some detail,
- this is achieved by taking the RGB values at the pixels in your image,
- and suitably weighted averaging them to get an intensity at that point.
- </para>
- <para>
- There is no need to convert an image to a specific mode before saving it
- in your favourite format, as <acronym>GIMP</acronym> is smart enough to
- properly export the image.
- </para>
- </sect2>
-
- <sect2 id="gimp-tutorial-quickie-flip">
- <title>Flip An Image</title>
- <indexterm>
- <primary>Tutorial</primary>
- </indexterm>
- <indexterm>
- <primary>Image</primary>
- <secondary>Flip</secondary>
- </indexterm>
- <para>
- When you need the person in the photo looking in the other direction, or
- you need the top of the image to be the bottom. Mirroring the image (sort
- of). Use
- <menuchoice>
- <guimenu>Tools</guimenu>
- <guisubmenu>Transform Tools</guisubmenu>
- <guimenuitem>Flip</guimenuitem>
- </menuchoice>,
- or use the
- <guiicon>
- <inlinemediaobject>
- <imageobject>
- <imagedata fileref="images/toolbox/stock-tool-flip-22.png"/>
- </imageobject>
- </inlinemediaobject>
- </guiicon>
- button on the toolbox.
- </para>
- <figure>
- <title>Dialog <quote>Flip an Image</quote></title>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-flip-menu.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- <para>
- Using another APOD image <xref linkend="bibliography-online-apod07"/>
- I demonstrated all of the flips on this image.<!-- You might get bored
- before it is over ....-->
- </para>
- <para><!-- Changed 2008-08-26 by ciampix -->
- The tool used as is (the default) will simply flip the image at its
- vertical axis. If you double click on the button,the tool options dialog
- will open, if it is not already displayed in the dock under the toolbox.
- Use the options dialog to switch between horizontal and vertical. You
- can also use the
- <keycap>Ctrl</keycap> key to switch between horizontal and vertical.
- All possible flips are displayed in this page.
- </para>
- <figure id="quickie-flip-images">
- <title>Example Image to Flip</title>
- <informalfigure>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-flip-example-source.png"/>
- </imageobject>
- <caption>
- <para>Source image</para>
- </caption>
- </mediaobject>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-flip-example-horizontal.png"/>
- </imageobject>
- <caption>
- <para>Horizontal flipped image</para>
- </caption>
- </mediaobject>
- </informalfigure>
- <informalfigure>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-flip-example-vertical.png"/>
- </imageobject>
- <caption>
- <para>Vertical flipped image</para>
- </caption>
- </mediaobject>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-flip-example-horizontal-and-vertical.png"/>
- </imageobject>
- <caption>
- <para>Horizontal and vertical flipped image</para>
- </caption>
- </mediaobject>
- </informalfigure>
- </figure>
- </sect2>
-
- <sect2 id="gimp-tutorial-quickie-rotate">
- <title>Rotate An Image</title>
- <indexterm>
- <primary>Tutorial</primary>
- </indexterm>
- <indexterm>
- <primary>Image</primary>
- <secondary>Rotate</secondary>
- </indexterm>
- <figure>
- <title>Menu for <quote>Rotate An Image</quote></title>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-rotate-menu.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- <para>
- Let's say you turned your brand new digital camera to get a vertical shot,
- now some of your images are on their sides. Use
- <menuchoice>
- <guimenu>Image</guimenu>
- <guisubmenu>Transform</guisubmenu>
- <guimenuitem>Rotate 90° clockwise</guimenuitem>
- </menuchoice>.
- Using an APOD image. I rotated it once to demonstrate 90 degrees CCW.
- </para>
- <figure>
- <title>Example for <quote>Rotate An Image</quote></title>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-rotate-example-source.png"/>
- </imageobject>
- <caption>
- <para>Source Image</para>
- </caption>
- </mediaobject>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-rotate-example-90-CCW.png"/>
- </imageobject>
- <caption>
- <para>Rotated image 90 degree CCW</para>
- </caption>
- </mediaobject>
- </figure>
- </sect2>
-</sect1>
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE sect1 PUBLIC "-//OASIS//DTD DocBook XML V4.3//EN"
+"http://www.docbook.org/xml/4.3/docbookx.dtd";
+[]>
+<!-- section history:
+ 2011-04-02 Michael: rewrote tutorial
+ 2007-05-11 lexa: initial version
+-->
+<sect1 id="gimp-tutorial-quickies">
+ <title>Common Tasks</title>
+ <indexterm significance="normal">
+ <primary>Tutorial</primary>
+ </indexterm>
+ <para>This tutorial is based on text Copyright © 2004
+ Carol Spears. The original tutorial can be found online:
+ <xref linkend="bibliography-online-tutorial02" />.</para>
+ <sect2>
+ <title>Intention</title>
+ <para>
+ <acronym>GIMP</acronym> is a powerful image editing program with many
+ options and tools. However, it is also well suited for smaller tasks. The
+ following tutorials are meant for those who want to achieve these common
+ tasks without having to learn all the intricacies of GIMP and computer
+ graphics in general.</para>
+ <para>Hopefully, these tutorials will not only help you with your current
+ task, but also get you ready to learn more complex tools and methods later,
+ when you have the time and inspiration.</para>
+ <para>All you need to know to start this tutorial, is how to find and open
+ your image. (
+ <menuchoice moreinfo="none">
+ <guimenu moreinfo="none">File</guimenu>
+ <guimenuitem moreinfo="none">Open</guimenuitem>
+ </menuchoice> from the Image window).</para>
+ </sect2>
+ <sect2 id="gimp-tutorial-quickie-scale">
+ <title>Change the Size of an Image for the screen</title>
+ <indexterm significance="normal">
+ <primary>Tutorial</primary>
+ </indexterm>
+ <indexterm significance="normal">
+ <primary>Image</primary>
+ <secondary>scale</secondary>
+ </indexterm>
+ <para>You have a huge image, possibly from a digital camera, and you want
+ to resize it so that it displays nicely on a web page, online board or
+ email message.</para>
+ <figure float="0">
+ <title>Example Image for Scaling</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="JPG"
+ fileref="images/tutorials/quickie-scale-example.jpg" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>The first thing that you might notice after opening the image, is
+ that
+ <acronym>GIMP</acronym> opens the image at a logical size for viewing. If
+ your image is very large, like the sample image,
+ <acronym>GIMP</acronym> sets the zoom so that it displays nicely on the
+ screen. The zoom level is shown in the status area at the bottom of the
+ Image window. This does not change the actual image.</para>
+ <para>The other thing to look at in the title-bar is the mode. If the mode
+ shows as RGB in the title bar, you are fine. If the mode says Indexed or
+ grayscale, read the
+ <xref linkend="gimp-tutorial-quickie-change-mode" />.</para>
+ <figure float="0">
+ <title>GIMP Used for Image Scaling</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-scale-menu.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>Use
+ <menuchoice moreinfo="none">
+ <guimenu moreinfo="none">Image</guimenu>
+ <guimenuitem moreinfo="none">Scale Image</guimenuitem>
+ </menuchoice> to open the Scale Image dialog. You can right click on the
+ image to open the menu, or use the menu along the top of the Image window.
+ Notice that the Scale Image menu item contains three dots, which is a hint
+ that a dialog will be opened.</para>
+ <figure float="0">
+ <title>Dialog for Image Scaling in Pixels</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-scale-dialog.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>The unit of size for the purpose of displaying an image on a screen
+ is the pixel. You can see the dialog has two sections: one for
+ <guilabel moreinfo="none">width</guilabel> and
+ <guilabel moreinfo="none">height</guilabel> and another for
+ <guilabel moreinfo="none">resolution</guilabel>. Resolution applies to
+ printing only and has no effect on the image's size when it is displayed on
+ a monitor or a mobile device. The reason is that different devices have
+ different pixels sizes and so, an image that displays on one device (such
+ as a smartphone) with a certain physical size, might display on other
+ devices (such as an LCD projector) in another size altogether. For the
+ purpose of displaying an image on a screen, you can ignore the resolution
+ parameter. For the same reason, do not use any size unit other than the
+ pixel in the height / width fields.</para>
+ <para>If you know the desired width, enter it in the dialog at the top
+ where it says
+ <guilabel moreinfo="none">Width</guilabel>. This is shown in the figure
+ above. If you don't have such a number in mind, choose an appropriate width
+ for the desired use. Common screen sizes range between 320 pixels for
+ simpler phones, 1024 pixels for a netbook, 1440 for a wide-screen PC
+ display and 1920 pixels for an HD screen. for the purpose of displaying an
+ image on-line, a width of 600 to 800 pixels offers a good
+ compromise.</para>
+ <para>When you change one of the image's dimensions,
+ <acronym>GIMP</acronym> changes the other dimension proportionally. To
+ change the other dimension, see
+ <xref linkend="gimp-tutorial-quickie-crop" />. Bear in mind that when you
+ change the two dimensions arbitrarily, the image might become stretched or
+ squashed.</para>
+ </sect2>
+ <sect2 id="gimp-tutorial-quickie-scale-print">
+ <title>Change the Size of an Image for print</title>
+ <indexterm significance="normal">
+ <primary>Tutorial</primary>
+ </indexterm>
+ <indexterm significance="normal">
+ <primary>Image</primary>
+ <secondary>scale</secondary>
+ </indexterm>
+ <para>As discussed before, pixels don't have a set size in the real world.
+ When you set out to print an image on paper,
+ <acronym>GIMP</acronym> needs to know how big each pixels is. We use a
+ parameter called resolution to set the ratio between pixels and real-world
+ units such as inches.</para>
+ <para>By default, most images open with the resolution set to 72. This
+ number was chosen for historical reasons as it was the resolution of
+ screens in the past, and means that when printed, every pixel is 1/72 of an
+ inch wide. When printing images are taken with modern digital cameras, this
+ produces very large but chunky images with visible pixels. What we want to
+ do is tell
+ <acronym>GIMP</acronym> to print it with the size we have in mind, but not
+ alter the pixel data so as not to lose quality.</para>
+ <para>To change the print size use
+ <menuchoice moreinfo="none">
+ <guimenu moreinfo="none">Image</guimenu>
+ <guimenuitem moreinfo="none">Print Size</guimenuitem>
+ </menuchoice> to open the Print Size dialog. Select a size unit you are
+ comfortable with, such as <quote>inches</quote>. Set one dimension, and let
+ <acronym>GIMP</acronym> change the other one proportionally. Now examine the
+ change in resolution. If the resolution is 300 pixels per Inch or over, the
+ printed image's quality will be very high and pixels will not be
+ noticeable. With a resolution of between 200 and 150 ppi, pixels will be
+ somewhat noticeable, but the image will be fine as long as its not
+ inspected too closely. Values lower than 100 are visibly coarse and should
+ only be used for material that is seen from a distance, such as signs or
+ large posters.</para>
+ <figure float="0">
+ <title>Dialog for Setting Print Size</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-print-size.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ </sect2>
+ <sect2 id="gimp-tutorial-quickie-jpeg">
+ <title>Compressing Images</title>
+ <indexterm significance="normal">
+ <primary>Tutorial</primary>
+ </indexterm>
+ <indexterm significance="normal">
+ <primary>Image</primary>
+ <secondary>save</secondary>
+ </indexterm>
+ <figure float="0">
+ <title>Example Image for JPEG Saving</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="JPG"
+ fileref="images/tutorials/quickie-jpeg-example.jpg" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>If you have images that take up a large space on disk, you can reduce
+ that space even without changing the image dimensions. The best image
+ compression is achieved by using the
+ <acronym>JPG</acronym> format, but even if the image is already in this
+ format, you can usually still make it take up less space, as the JPG format
+ has an adaptive compression scheme that allows saving in varying levels of
+ compression. The trade-off is that the less space an image takes, the more
+ detail from the original image you lose. You should also be aware that
+ repeated saving in the JPG format causes more and more image degradation.
+ </para>
+ <para>To save you image as a JPG file, therefore, use
+ <menuchoice moreinfo="none">
+ <guimenu moreinfo="none">File</guimenu>
+ <guimenuitem moreinfo="none">Save As</guimenuitem>
+ </menuchoice> to open the Save As dialog.</para>
+ <figure float="0">
+ <title>Save As Dialog</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-save-image-dialog-file-type.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>The dialog opens with the file name already typed in the Name box.
+ If the image is not a
+ <acronym>JPG</acronym> image, delete the existing extension and type JPG
+ instead, and
+ <acronym>GIMP</acronym> will determine the file type from the file
+ extension. Use the file extension list, circled in the figure above, to see
+ the types supported by
+ <acronym>GIMP</acronym>. The supported extensions change depending on your
+ installed libraries. If
+ <acronym>GIMP</acronym> complains, or if
+ <quote>JPEG</quote> is grayed out in the Extensions menu, cancel out of
+ everything and step through the
+ <xref linkend="gimp-tutorial-quickie-change-mode" />. Once you have done
+ this, click Save. This opens the Save as JPEG dialog that contains the
+ quality control.</para>
+ <para>The <quote>Save as JPEG</quote> dialog uses default values that
+ reduce size while retaining good visual quality; this is the safest and
+ quickest thing to do.</para>
+ <figure float="0">
+ <title><quote>Save as JPEG</quote> dialog with poor quality.</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-jpeg-dialog.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>Reduce the image <guilabel>Quality</guilabel> to make the image even
+ smaller. Reduced quality degrades the image, so be certain to check
+ <quote>Show preview in image window</quote> to visually gauge the
+ degradation. As shown in the figure above, a Quality setting of 10 produces
+ a very poor quality image that uses very little disk space. The figure
+ below shows a more reasonable image. A quality of 75 produces a reasonable
+ image using much less disk space, which will, in turn, load much faster on
+ a web page. Although the image is somewhat degraded, it is acceptable for
+ the intended purpose.</para>
+ <figure float="0">
+ <title>Dialog for Image Saving as JPEG</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-jpeg-dialog2.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>Finally, here is a comparison of the same picture with varying
+ degrees of compression:</para>
+ <figure float="0">
+ <title>Example for High JPEG Compression</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-jpeg-010.jpg" />
+ </imageobject>
+ <caption>
+ <para>Quality: 10; Size: 3.4 KiloBytes</para>
+ </caption>
+ </mediaobject>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-jpeg-040.jpg" />
+ </imageobject>
+ <caption>
+ <para>Quality: 40; Size: 9.3 KiloBytes</para>
+ </caption>
+ </mediaobject>
+ </figure>
+ <figure float="0">
+ <title>Example for Moderate JPEG Compression</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-jpeg-070.jpg" />
+ </imageobject>
+ <caption>
+ <para>Quality: 70; Size: 15.2 KiloBytes</para>
+ </caption>
+ </mediaobject>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-jpeg-100.jpg" />
+ </imageobject>
+ <caption>
+ <para>Quality: 100; Size: 72.6 KiloBytes</para>
+ </caption>
+ </mediaobject>
+ </figure>
+ </sect2>
+ <sect2 id="gimp-tutorial-quickie-crop">
+ <title>Crop An Image</title>
+ <indexterm significance="normal">
+ <primary>Tutorial</primary>
+ </indexterm>
+ <indexterm significance="normal">
+ <primary>Image</primary>
+ <secondary>crop</secondary>
+ </indexterm>
+ <figure float="0">
+ <title>Example Image for Cropping</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="JPG"
+ fileref="images/tutorials/quickie-crop-example-source.jpg" />
+ </imageobject>
+ <caption>
+ <para>Source image</para>
+ </caption>
+ </mediaobject>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="JPG"
+ fileref="images/tutorials/quickie-crop-example-result.jpg" />
+ </imageobject>
+ <caption>
+ <para>Image after cropping</para>
+ </caption>
+ </mediaobject>
+ </figure>
+ <para>There are many reasons to crop an image; for example, fitting an
+ image to fill a frame, removing a portion of the background to emphasize
+ the subject, etc. There are two methods to activate the crop tool. Click
+ the
+ <guiicon moreinfo="none">
+ <inlinemediaobject>
+ <imageobject>
+ <imagedata fileref="images/toolbox/stock-tool-crop-22.png" />
+ </imageobject>
+ </inlinemediaobject>
+ </guiicon> button in the Toolbox, or use
+ <menuchoice moreinfo="none">
+ <guimenu moreinfo="none">Tools</guimenu>
+ <guisubmenu moreinfo="none">Transform Tools</guisubmenu>
+ <guimenuitem moreinfo="none">Crop</guimenuitem>
+ </menuchoice> in the image window. This changes the cursor and allow you to
+ click and drag a rectangular shape. The button in the toolbox is the
+ easiest way to get to any of the tools.</para>
+ <figure float="0">
+ <title>Select a Region to Crop</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="JPG"
+ fileref="images/tutorials/quickie-crop-step1.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>Click on one corner of the desired crop area and drag your mouse to
+ create the crop rectangle. You don't have to be accurate as you can change
+ the exact shape of the rectangle later.</para>
+ <figure float="0">
+ <title>Dialog for Cropping</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-crop-options.png" />
+ </imageobject>
+ </mediaobject>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-crop-step2.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>After completing the click and drag motion, a rectangle with special
+ regions is shown on the canvas. As the cursor is moved over the different
+ areas of the selected crop area, the cursor changes. You can then drag the
+ rectangle's corners or edges to change the dimensions of the selected area.
+ As shown in the figure above, as the crop area is resized, the dimensions
+ and ratio are shown in the status bar. See
+ <xref linkend="gimp-tool-crop" /> for more information on cropping in
+ <acronym>GIMP</acronym>. If you would like to crop the image in a specific
+ aspect ratio, such as a square, make sure the tool options are visible (
+ <menuchoice moreinfo="none">
+ <guimenu moreinfo="none">Windows</guimenu>
+ <guisubmenu moreinfo="none">Dockable Dialogs</guisubmenu>
+ <guimenuitem moreinfo="none">Tool Options</guimenuitem>
+ </menuchoice>). In the Tool Options dockable, check the mark next to
+ <guilabel>Fixed</guilabel> and make sure the drop-down box next to it is
+ set to <guilabel>Aspect Ratio</guilabel>. You can now type the desired
+ aspect ratio on the text box below, such as
+ <quote>1:1</quote>. You also have controls to change the aspect from
+ landscape to portrait. After you set the aspect ratio, drag one of the
+ corners of the crop rectangle to update it. The rectangle changes to the
+ chosen ratio, and when you drag it should maintain that ratio.</para>
+ </sect2>
+ <sect2 id="gimp-tutorial-quickie-info">
+ <title>Find Info About Your Image</title>
+ <indexterm significance="normal">
+ <primary>Tutorial</primary>
+ </indexterm>
+ <indexterm significance="normal">
+ <primary>Image</primary>
+ <secondary>information</secondary>
+ </indexterm>
+ <figure float="0">
+ <title>Finding Info</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="JPG"
+ fileref="images/tutorials/quickie-info-menu.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>When you need to find out information about your image, Use
+ <menuchoice moreinfo="none">
+ <guimenu moreinfo="none">Image</guimenu>
+ <guimenuitem moreinfo="none">Image Properties</guimenuitem>
+ </menuchoice> to open the <quote>Image Properties</quote> dialog,
+ which contains information about the image size, resolution, mode
+ and much more.</para>
+ <figure float="0">
+ <title>Image Properties Dialog</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-info-dialog.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ </sect2>
+ <sect2 id="gimp-tutorial-quickie-change-mode">
+ <title>Change the Mode</title>
+ <indexterm significance="normal">
+ <primary>Tutorial</primary>
+ </indexterm>
+ <indexterm significance="normal">
+ <primary>Image</primary>
+ <secondary>change Mode</secondary>
+ </indexterm>
+ <para>As with anything else, images come in different kinds and serve
+ different purposes. Sometimes, a small size is important (for web sites)
+ and at other times, retaining a high color depth (e.g., a family portrait)
+ is what you want.
+ <acronym>GIMP</acronym> can handle all of this, and more, primarily by
+ converting between three fundamental modes, as seen in this menu. In order
+ to switch your image to one of these modes, you open it and follow that
+ menu and click the mode you want.</para>
+ <figure float="0">
+ <title>Dialog for changing the mode</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-mode-menu.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>
+ <emphasis>RGB</emphasis>- This is the default mode, used for high-quality
+ images, and able to display millions of colors. This is also the mode for
+ most of your image work including scaling, cropping, and even flipping. In
+ RGB mode, each pixel consists of three different components: R->Red,
+ G->Green, B->Blue. Each of these in turn can have an intensity value
+ of 0-255. What you see at every pixel is an additive combination of these
+ three components.</para>
+ <para>
+ <emphasis>Indexed</emphasis>- This is the mode usually used when file size
+ is of concern, or when you are working with images with few colors. It
+ involves using a fixed number of colors (256 or less) for the entire image
+ to represent colors. By default, when you change an image to a palleted
+ image,
+ <acronym>GIMP</acronym> generates an
+ <quote>optimum palette</quote> to best represent your image.</para>
+ <figure float="0">
+ <title>Dialog
+ <quote>Change to Indexed Colors</quote> </title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-mode-indexed.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>As you might expect, since the information needed to represent the
+ color at each pixel is less, the file size is smaller. However, sometimes,
+ there are options in the various menus that are grayed-out for no apparent
+ reason. This usually means that the filter or option cannot be applied when
+ your image is in its current mode. Changing the mode to RGB, as outlined
+ above, should solve this issue. If RGB mode doesn't work either, perhaps
+ the option you're trying requires your layer to have the ability to be
+ transparent. This can be done just as easily via
+ <menuchoice moreinfo="none">
+ <guimenu moreinfo="none">Layer</guimenu>
+ <guimenuitem moreinfo="none">Transparency</guimenuitem>
+ <guimenuitem moreinfo="none">Add Alpha Channel</guimenuitem>
+ </menuchoice>.</para>
+ <figure float="0">
+ <title>Add Alpha Channel</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-mode-alpha.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>
+ <emphasis>Grayscale</emphasis>- Grayscale images have only shades of gray.
+ This mode has some specific uses and takes less space on the hard drive in
+ some formats, but is not recommended for general use as reading it is not
+ supported by many applications.</para>
+ <para>There is no need to convert an image to a specific mode before saving
+ it in your favorite format, as
+ <acronym>GIMP</acronym> is smart enough to properly export the image.</para>
+ </sect2>
+ <sect2 id="gimp-tutorial-quickie-flip">
+ <title>Flip An Image</title>
+ <indexterm significance="normal">
+ <primary>Tutorial</primary>
+ </indexterm>
+ <indexterm significance="normal">
+ <primary>Image</primary>
+ <secondary>Flip</secondary>
+ </indexterm>
+ <para>Use this option when you need the person in the photo looking in the
+ other direction, or you need the top of the image to be the bottom. Use
+ <menuchoice moreinfo="none">
+ <guimenu moreinfo="none">Tools</guimenu>
+ <guisubmenu moreinfo="none">Transform Tools</guisubmenu>
+ <guimenuitem moreinfo="none">Flip</guimenuitem>
+ </menuchoice> , or use the
+ <guiicon moreinfo="none">
+ <inlinemediaobject>
+ <imageobject>
+ <imagedata fileref="images/toolbox/stock-tool-flip-22.png" />
+ </imageobject>
+ </inlinemediaobject>
+ </guiicon> button on the toolbox. After selecting the flip tool from the
+ toolbox, click inside the canvas. Controls in the Tool Options dockable let
+ you switch between Horizontal and Vertical modes.</para>
+ <figure float="0">
+ <title>Dialog
+ <quote>Flip an Image</quote> </title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-flip-menu.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>After selecting the flip tool from the toolbox, click inside the
+ canvas. The tool flips the image horizontally. Use the options dialog to
+ switch between horizontal and vertical. If it is not already displayed in
+ the dock under the toolbox, double click the toolbox button. You can also
+ use the
+ <keycap moreinfo="none">Ctrl</keycap> key to switch between horizontal and
+ vertical.</para>
+ <para>In the images below, all possible flips are demonstrated:</para>
+ <figure id="quickie-flip-images" float="0">
+ <title>Example Image to Flip</title>
+ <informalfigure float="0">
+ <mediaobject>
+ <imageobject>
+ <imagedata format="JPG"
+ fileref="images/tutorials/quickie-flip-example-source.jpg" />
+ </imageobject>
+ <caption>
+ <para>Source image</para>
+ </caption>
+ </mediaobject>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="JPG"
+ fileref="images/tutorials/quickie-flip-example-horizontal.jpg" />
+ </imageobject>
+ <caption>
+ <para>Horizontal flipped image</para>
+ </caption>
+ </mediaobject>
+ </informalfigure>
+ <informalfigure float="0">
+ <mediaobject>
+ <imageobject>
+ <imagedata format="JPG"
+ fileref="images/tutorials/quickie-flip-example-vertical.jpg" />
+ </imageobject>
+ <caption>
+ <para>Vertical flipped image</para>
+ </caption>
+ </mediaobject>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="JPG"
+ fileref="images/tutorials/quickie-flip-example-horizontal-and-vertical.jpg" />
+ </imageobject>
+ <caption>
+ <para>Horizontal and vertical flipped image</para>
+ </caption>
+ </mediaobject>
+ </informalfigure>
+ </figure>
+ </sect2>
+ <sect2 id="gimp-tutorial-quickie-rotate">
+ <title>Rotate An Image</title>
+ <indexterm significance="normal">
+ <primary>Tutorial</primary>
+ </indexterm>
+ <indexterm significance="normal">
+ <primary>Image</primary>
+ <secondary>Rotate</secondary>
+ </indexterm>
+ <figure float="0">
+ <title>Menu for
+ <quote>Rotate An Image</quote> </title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-rotate-menu.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>Images that are taken with digital cameras sometimes need to be
+ rotated. To do this, use
+ <menuchoice moreinfo="none">
+ <guimenu moreinfo="none">Image</guimenu>
+ <guisubmenu moreinfo="none">Transform</guisubmenu>
+ <guimenuitem moreinfo="none">Rotate 90° clockwise</guimenuitem>
+ </menuchoice> (or counter-clockwise). The images below demonstrate a 90
+ degrees CCW rotation.</para>
+ <figure float="0">
+ <title>Example for
+ <quote>Rotate An Image</quote> </title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="JPG"
+ fileref="images/tutorials/quickie-rotate-example-source.jpg" />
+ </imageobject>
+ <caption>
+ <para>Source Image</para>
+ </caption>
+ </mediaobject>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="JPG"
+ fileref="images/tutorials/quickie-rotate-example-90-CCW.jpg" />
+ </imageobject>
+ <caption>
+ <para>Rotated image 90 degree CCW</para>
+ </caption>
+ </mediaobject>
+ </figure>
+ </sect2>
+ <sect2 id="gimp-tutorial-quickie-separate">
+ <title>Separating an Object From Its Background</title>
+ <indexterm significance="normal">
+ <primary>Tutorial</primary>
+ </indexterm>
+ <figure float="0">
+ <title>Object with Background</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="JPG"
+ fileref="images/tutorials/quickie-remove-background-source.jpg" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>Sometimes you need to separate the subject of an image from its
+ background. You may want to have the subject on a flat color, or keep the
+ background transparent so you can use it on an existing background, or any
+ other thing you have in mind. To do this, you must first use
+ <acronym>GIMP</acronym>'s selection tools to draw a selection around your
+ subject. This is not an easy task, and selecting the correct tool is
+ crucial. You have several tools to accomplish this.</para>
+ <para>The <quote>Free Select Tool</quote> allows you to draw a border
+ using either freehand or straight lines. Use this when the subject has a
+ relatively simple shape. Read more about this tool here:
+ <xref linkend="gimp-tool-free-select" /></para>
+ <figure float="0">
+ <title>Free Select Tool</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="JPG" fileref="images/toolbox/toolbox-lasso.png" />
+ </imageobject>
+ </mediaobject>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="JPG"
+ fileref="images/tutorials/quickie-background-free-select.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>The <quote>Intelligent Scissors Select Tool</quote> lets you select
+ a freehand border and uses edge-recognition algorithms to better fit the
+ border around the object. Use this when the subject is complex but
+ distinct enough against its current background. Read more about this tool
+ here:
+ <xref linkend="gimp-tool-iscissors" /></para>
+ <figure float="0">
+ <title>Intelligent Scissors Select Tool</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="JPG"
+ fileref="images/toolbox/toolbox-scissor.png" />
+ </imageobject>
+ </mediaobject>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="JPG"
+ fileref="images/tutorials/quickie-background-scissors.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>The <quote>Foreground Select Tool</quote> lets you mark areas as
+ <quote>Foreground</quote> or
+ <quote>Background</quote> and refines the selection automatically. Read more
+ about this tool here:
+ <xref linkend="gimp-tool-foreground-select" /></para>
+ <figure float="0">
+ <title>Foreground Select Tool</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="JPG"
+ fileref="images/toolbox/FG-select-toolbox.png" />
+ </imageobject>
+ </mediaobject>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="JPG"
+ fileref="images/tutorials/quickie-background-foreground-select.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>Once you have selected your subject successfully, use
+ <menuchoice moreinfo="none">
+ <guimenu moreinfo="none">Select</guimenu>
+ <guimenuitem moreinfo="none">Invert</guimenuitem>
+ </menuchoice>. Now, instead of the subject, the background is selected.
+ What you do now depends on what you intended to do with the
+ background.</para>
+ <itemizedlist>
+ <listitem>
+ <para>To fill the background with a single color:</para>
+ <para>Click the background color picker in the toolbox and select the
+ desired color. Next, use
+ <menuchoice moreinfo="none">
+ <guimenu moreinfo="none">Edit</guimenu>
+ <guimenuitem moreinfo="none">Clear</guimenuitem>
+ </menuchoice> or hit the
+ <keycap moreinfo="none">Del</keycap> key on the keyboard to replace the
+ background with your chosen color.</para>
+ <figure float="0">
+ <title>Result of Adding a Plain Color Background</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-background-color-result.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ </listitem>
+ <listitem>
+ <para>To make a transparent background:</para>
+ <para>Use
+ <menuchoice moreinfo="none">
+ <guimenu moreinfo="none">Image</guimenu>
+ <guisubmenu moreinfo="none">Transform</guisubmenu>
+ <guimenuitem moreinfo="none">Add Alpha Channel</guimenuitem>
+ </menuchoice> to add an alpha channel. Next, use
+ <guimenu moreinfo="none">Edit</guimenu>
+ <guimenuitem moreinfo="none">Clear</guimenuitem> or hit the
+ <keycap moreinfo="none">Del</keycap> key on the keyboard to remove the
+ background. Please note that only a small subset of file formats
+ support transparent areas. Your best bet is to save your image as
+ PNG.</para>
+ <figure float="0">
+ <title>Result of Adding a Transparent Background</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-background-alpha-result.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ </listitem>
+ <listitem>
+ <para>To make a black-and-white background while keeping the subject in
+ color:</para>
+ <para>Use
+ <menuchoice moreinfo="none">
+ <guimenu moreinfo="none">Colors</guimenu>
+ <guimenuitem moreinfo="none">Desaturate</guimenuitem>
+ </menuchoice>. In the dialog that opens, cycle between the modes and
+ select the best-looking one, then click OK.</para>
+ <figure float="0">
+ <title>Result of Desaturating the Background</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-background-desaturate-result.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ </listitem>
+ </itemizedlist>
+ </sect2>
+</sect1>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
