[gimp-help] tutorial: Replace CRLF with LF line endings
- From: Jacob Boerema <jboerema src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gimp-help] tutorial: Replace CRLF with LF line endings
- Date: Thu, 24 Feb 2022 03:14:45 +0000 (UTC)
commit 4362911a9f3f47b8834fda6e98af90211c0111f4
Author: Anders Jonsson <anders jonsson norsjovallen se>
Date: Fri Feb 18 18:10:04 2022 +0100
tutorial: Replace CRLF with LF line endings
src/tutorial/quickies.xml | 1762 ++++++++++++++++++++++-----------------------
1 file changed, 881 insertions(+), 881 deletions(-)
---
diff --git a/src/tutorial/quickies.xml b/src/tutorial/quickies.xml
index 4aec7e153..ba22b39cc 100644
--- a/src/tutorial/quickies.xml
+++ b/src/tutorial/quickies.xml
@@ -1,881 +1,881 @@
-<?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:
- 2019-10-31 Julien: fix issue #187 : rearrange display
- 2015-12-19 Julien: adapted save -> export
- 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 <acronym>GIMP</acronym>
- 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 <guilabel>
- Indexed</guilabel> or <guilabel>Grayscale</guilabel>, 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 <quote>Scale Image</quote> 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 <quote>Scale Image</quote> 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 <quote>Print Size</quote> 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/menus/image/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>
- Since GIMP-2.8, images are loaded and saved as .XCF files. Your JPG
- image has been loaded as XCF. <acronym>GIMP</acronym> offers you to
- <guilabel>Overwrite image-name.jpg</guilabel> or
- <menuchoice moreinfo="none">
- <guimenu moreinfo="none">File</guimenu>
- <guimenuitem moreinfo="none">Export As</guimenuitem>
- </menuchoice> to open the <quote>Export Image</quote> dialog.</para>
-
- <figure float="0">
- <title><quote>Export Image</quote> Dialog</title>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-export-image-dialog-file-type.png" />
- </imageobject>
- </mediaobject>
- </figure>
-
- <para>
- The dialog opens with the file name already typed in the Name box, with
- the default.png extension. 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, red 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 <guibutton>Save</guibutton>. This opens the
- <quote>Export Image as JPEG</quote> dialog that contains the quality
- control.
- </para>
-
- <para>The <quote>Export Image as JPEG</quote> dialog uses default values that
- reduce size in memory while retaining good visual quality; this is the safest
- and quickest thing to do.</para>
-
- <figure float="0">
- <title><quote>Export Image as JPEG</quote> dialog with default quality</title>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-jpeg-dialog.png" />
- </imageobject>
- </mediaobject>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-jpeg-dialog-preview.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. A <guilabel>Quality</guilabel> 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><quote>Export Image as JPEG</quote> dialog with quality 75</title>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-jpeg-dialog2.png" />
- </imageobject>
- </mediaobject>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/tutorials/quickie-jpeg-dialog2-preview.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. Double-click inside the rectangle
- or press <keycap>Enter</keycap> to complete cropping. See
- <xref linkend="gimp-tool-crop" /> for more information on cropping in
- <acronym>GIMP</acronym>.</para>
- <para>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>.</para>
- <para>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="PNG"
- 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><quote>Image Properties</quote> Dialog</title>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/menus/image/properties.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>Convert Image to Indexed Colors</quote> </title>
- <mediaobject>
- <imageobject>
- <imagedata format="PNG"
- fileref="images/dialogs/image-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:
- <itemizedlist>
- <listitem>
- <para>
- <emphasis role = "bold">The <quote>Free Select
- Tool</quote></emphasis> 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.jpg" />
- </imageobject>
- </mediaobject>
- </figure>
- </listitem>
- <listitem>
- <para>
- <emphasis role="bold">The <quote>Intelligent Scissors Select
- tool</quote></emphasis> 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.jpg" />
- </imageobject>
- </mediaobject>
- </figure>
- </listitem>
- <listitem>
- <para>
- <emphasis role="bold">The <quote>Foreground Select
- Tool</quote></emphasis> 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.jpg"/>
- </imageobject>
- </mediaobject>
- </figure>
- </listitem>
- </itemizedlist>
- </para>
- <sect3><title>Once you have selected your subject</title>
- <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:
- <itemizedlist>
- <listitem>
- <para>To fill the background with a single color:</para>
- <para>
- Click the foreground color swatch (the top left of the two
- overlapping colored rectangles) in the toolbox and select the
- desired color. Next,use <xref linkend="gimp-tool-bucket-fill"/>
- 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 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>
- </para>
- </sect3>
- </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:
+ 2019-10-31 Julien: fix issue #187 : rearrange display
+ 2015-12-19 Julien: adapted save -> export
+ 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 <acronym>GIMP</acronym>
+ 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 <guilabel>
+ Indexed</guilabel> or <guilabel>Grayscale</guilabel>, 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 <quote>Scale Image</quote> 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 <quote>Scale Image</quote> 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 <quote>Print Size</quote> 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/menus/image/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>
+ Since GIMP-2.8, images are loaded and saved as .XCF files. Your JPG
+ image has been loaded as XCF. <acronym>GIMP</acronym> offers you to
+ <guilabel>Overwrite image-name.jpg</guilabel> or
+ <menuchoice moreinfo="none">
+ <guimenu moreinfo="none">File</guimenu>
+ <guimenuitem moreinfo="none">Export As</guimenuitem>
+ </menuchoice> to open the <quote>Export Image</quote> dialog.</para>
+
+ <figure float="0">
+ <title><quote>Export Image</quote> Dialog</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-export-image-dialog-file-type.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+
+ <para>
+ The dialog opens with the file name already typed in the Name box, with
+ the default.png extension. 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, red 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 <guibutton>Save</guibutton>. This opens the
+ <quote>Export Image as JPEG</quote> dialog that contains the quality
+ control.
+ </para>
+
+ <para>The <quote>Export Image as JPEG</quote> dialog uses default values that
+ reduce size in memory while retaining good visual quality; this is the safest
+ and quickest thing to do.</para>
+
+ <figure float="0">
+ <title><quote>Export Image as JPEG</quote> dialog with default quality</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-jpeg-dialog.png" />
+ </imageobject>
+ </mediaobject>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-jpeg-dialog-preview.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. A <guilabel>Quality</guilabel> 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><quote>Export Image as JPEG</quote> dialog with quality 75</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-jpeg-dialog2.png" />
+ </imageobject>
+ </mediaobject>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/tutorials/quickie-jpeg-dialog2-preview.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. Double-click inside the rectangle
+ or press <keycap>Enter</keycap> to complete cropping. See
+ <xref linkend="gimp-tool-crop" /> for more information on cropping in
+ <acronym>GIMP</acronym>.</para>
+ <para>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>.</para>
+ <para>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="PNG"
+ 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><quote>Image Properties</quote> Dialog</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/menus/image/properties.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>Convert Image to Indexed Colors</quote> </title>
+ <mediaobject>
+ <imageobject>
+ <imagedata format="PNG"
+ fileref="images/dialogs/image-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:
+ <itemizedlist>
+ <listitem>
+ <para>
+ <emphasis role = "bold">The <quote>Free Select
+ Tool</quote></emphasis> 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.jpg" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ </listitem>
+ <listitem>
+ <para>
+ <emphasis role="bold">The <quote>Intelligent Scissors Select
+ tool</quote></emphasis> 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.jpg" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ </listitem>
+ <listitem>
+ <para>
+ <emphasis role="bold">The <quote>Foreground Select
+ Tool</quote></emphasis> 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.jpg"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+ </listitem>
+ </itemizedlist>
+ </para>
+ <sect3><title>Once you have selected your subject</title>
+ <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:
+ <itemizedlist>
+ <listitem>
+ <para>To fill the background with a single color:</para>
+ <para>
+ Click the foreground color swatch (the top left of the two
+ overlapping colored rectangles) in the toolbox and select the
+ desired color. Next,use <xref linkend="gimp-tool-bucket-fill"/>
+ 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 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>
+ </para>
+ </sect3>
+ </sect2>
+</sect1>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
