<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/"
      xmlns:its="http://www.w3.org/2005/11/its" type="task" style="task"
      id="tools_classic">

  <info>
    <link type="guide" xref="index#tools"/>
    <include xmlns="http://www.w3.org/2001/XInclude" href="legal.xml"/>
    <credit type="author">
      <name>Romain F. T.</name>
      <email its:translate="no">rrroschan@gmail.com</email>
    </credit>
    <desc>Draw with simple tools</desc>
  </info>

  <title>Classic tools</title>

  <p>Draw on the image with the color and options you selected!</p>

  <section>
    <title>Color and size</title>

    <p>The options for the tool you're using are located at the right of the
    bottom bar: there are two colors, the tool size, and a menu (whose content
    changes depending on the tool).</p>
    <p>The color of the left button corresponds to the left click, and is
    labeled "Main color", while the color at the right is the "Secondary color".
    Click on these buttons to change their respective colors:</p>

    <table rules="colgroups">
      <tr>
        <td>
          <media type="image" mime="image/png" width="100%" its:translate="no" />
                 <!-- src="figures/screenshot_prefs_tools.png" /> TODO -->
        </td>
        <td>
          <media type="image" mime="image/png" width="100%" its:translate="no" />
                 <!-- src="figures/screenshot_prefs_tools.png" /> TODO -->
        </td>
      </tr>
    </table>

    <p>At the top of the palette, you can select the way the color will be
    applied to the image:</p>
    <list>
      <item>
        <p>Normal: the selected color is added over the existing image. If your
        color is semi-transparent yellow and your image is opaque blue, the
        resulting pixels would be opaque green.</p>
      </item>
      <item>
        <p>Raw source color: the selected color replaces the pixels where it's
        applied. If your color is semi-transparent yellow, the resulting pixels
        would be semi-transparent yellow.</p>
      </item>
      <item>
        <p>Highlight: ...</p>
        <!-- TODO -->
      </item>
      <item>
        <p>Difference: ...</p>
        <!-- TODO -->
      </item>
      <item>
        <p>Replace hue: ...</p>
        <!-- TODO -->
      </item>
      <item>
        <p>Replace color: ...</p>
        <!-- TODO -->
      </item>
      <item>
        <p>Blur: blurs the hovered pixels regardless of the selected color.</p>
      </item>
      <item>
        <p>Erase: deletes any color where the tool is applied.</p>
      </item>
    </list>
    <p>If the exact color you want isn't listed in the palette, click the
    <gui style="button">+</gui> button to use the color editor.</p>
    <p>An optional <gui style="button">Color Picker</gui> tool can also help you
    to select a color. While the color picker from within the color editor can
    select a RGB color anywhere on the screen, the <gui style="menuitem">Color
    Picker</gui> tool support translucent colors but only works for pixels from
    the image.</p>
  </section>

  <section>
    <title>Draw things</title>

    <p>Most options for these tools concern the ends of the line: it can be
    thin, rounded or square. You can also draw a dashed lines.</p>
    <list>
      <item>
        <p>Pencil: The pencil draws following the pointer, and according to the
        chosen color.</p>
        <p>Don't forget you can use the "eraser" mode from the color menu to
        delete existing colors, or the "blur" mode to blur parts of the image!</p>
      </item>
      <item>
        <p>Eraser: Ignore the current color settings and just erase to get fully
        transparent pixels.</p>
        <p>This tool is disabled by default.</p>
      </item>
      <item>
        <p>Highlighter: Ignore some of the color settings, and draw ("normal"
        mode) with a semi-transparent version of the current color.</p>
        <p>This tool is disabled by default.</p>
      </item>
      <item>
        <p>Line: This tool can draw straight lines. Its options also include
        ending the line with an arrow, and using a gradient from the main color
        to the secondary color.</p>
        <p>Don't forget you can use the "blur" mode from the color menu to hide
        text!</p>
      </item>
      <item>
        <p>Curve: This tool can draw Bézier curves, optionally with an arrow at
        the end. Two clicks are required, if you only click once to draw a
        straight line, that line is drawn temporarily until a second click.</p>
        <media type="image" mime="image/png" width="80%"
               src="figures/screenshot_arc.png" its:translate="no"/>
      </item>
    </list>
  </section>

  <section>
    <title>Insert text</title>

    <p>With the <gui style="menuitem">Text</gui> tool, you can insert text on
    the image. A few formatting options are available in the options menu, such
    as "italic", "bold", or a basic font type option.</p>
    <p>For better contrast, the text can be displayed on a rectangle background,
    or with a shadow, or with an outline. The color of this background is the
    secondary color you chose.</p>
    <p>Don't forget to confirm the insertion using the <gui style="button">
    Insert here</gui> button.</p>
    <!-- TODO illustration -->
  </section>

  <section>
    <title>Fill an area</title>

    <p>......</p>
    <!-- TODO illustration -->

    <list>
      <item>
        <p>Shapes: Available shapes include rectangle, oval, circle, polygon, and
        free shape.</p>
        <p>Polygons and free shapes can be drawn in several clicks. To close them,
        do a last click at the position where you began the line, or use the
        <gui style="menuitem">Close shape</gui> menu item.</p>
        <p>Various filling options are available, with or without an outline,
        using a plain color or a gradient.</p>
        <!-- TODO explain options -->
      </item>
      <item>
        <p>Paint. This tool tries to paint an area with a color, which doesn't
        always work as expected so this tool is disabled by default. It can use
        three possible algorithms: ......</p>
        <!-- TODO -->
      </item>
    </list>
  </section>

  <section>
    <title>See also</title>

    <p>The <link xref="tools_selection">selection tools</link> don't draw, but
    their capabilities are very powerful and useful for any image editing.</p>
    <p><link xref="tools_canvas">Other tools</link> allow you to transform the
    canvas or the selected area.</p>
  </section>

</page>
