home *** CD-ROM | disk | FTP | other *** search
/ Mac Easy 2010 May / Mac Life Ubuntu.iso / casper / filesystem.squashfs / usr / share / gimp / 2.0 / help / en / gimp-concepts-gradients.html < prev    next >
Encoding:
Extensible Markup Language  |  2008-05-03  |  14.1 KB  |  328 lines
  1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.   <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6.     <title>10.¬† Gradients</title>
  7.     <link rel="stylesheet" href="gimp-help-plain.css" type="text/css" />
  8.     <link rel="stylesheet" href="gimp-help-screen.css" type="text/css" />
  9.     <link rel="stylesheet" href="gimp-help-custom.css" type="text/css" />
  10.     <link rel="alternate stylesheet" href="gimp22.css" type="text/css" title="gimp22" />
  11.     <meta name="generator" content="DocBook XSL Stylesheets V1.73.2" />
  12.     <link rel="start" href="index.html" title="GNU Image Manipulation Program" />
  13.     <link rel="up" href="gimp-painting.html" title="Chapter¬†7.¬† Painting with GIMP" />
  14.     <link rel="prev" href="gimp-using-variable-size-brush-creating.html" title="9.2.¬† Creating a brush quickly" />
  15.     <link rel="next" href="gimp-concepts-patterns.html" title="11.¬† Patterns" />
  16.   </head>
  17.   <body>
  18.     <div class="navheader">
  19.       <table width="100%" summary="Navigation header">
  20.         <tr>
  21.           <th colspan="3" align="center">10.¬†
  22.     <span lang="en" xml:lang="en">Gradients</span>
  23.   </th>
  24.         </tr>
  25.         <tr>
  26.           <td width="20%" align="left"><a accesskey="p" href="gimp-using-variable-size-brush-creating.html"><img src="../images/prev.png" alt="Prev" /></a>¬†</td>
  27.           <th width="60%" align="center">Chapter¬†7.¬†
  28.         <span lang="en" xml:lang="en">Painting with GIMP</span>
  29.       </th>
  30.           <td width="20%" align="right">¬†<a accesskey="n" href="gimp-concepts-patterns.html"><img src="../images/next.png" alt="Next" /></a></td>
  31.         </tr>
  32.       </table>
  33.       <hr />
  34.     </div>
  35.     <div class="sect1" lang="en" xml:lang="en">
  36.       <div class="titlepage">
  37.         <div>
  38.           <div>
  39.             <h2 class="title" style="clear: both"><a id="gimp-concepts-gradients"></a>10.¬†
  40.     <span lang="en" xml:lang="en">Gradients</span>
  41.   </h2>
  42.           </div>
  43.         </div>
  44.       </div>
  45.       <a id="id2596903" class="indexterm"></a>
  46.       <div class="figure">
  47.         <a id="id2596915"></a>
  48.         <p class="title">
  49.           <b>Figure¬†7.23.¬†
  50.       <span lang="en" xml:lang="en">Some examples of GIMP gradients.</span>
  51.     </b>
  52.         </p>
  53.         <div class="figure-contents">
  54.           <div class="mediaobject">
  55.             <img src="../images/using/gradient-examples.png" alt="Some examples of GIMP gradients." />
  56.             <div class="caption">
  57.               <p>
  58.           Gradients from top to bottom: FG to BG (RGB); Full saturation
  59.           spectrum; Nauseating headache; Browns; Four bars
  60.         </p>
  61.             </div>
  62.           </div>
  63.         </div>
  64.       </div>
  65.       <br class="figure-break" />
  66.       <p>
  67.     A <span class="emphasis"><em>gradient</em></span>
  68.     is a set of colors arranged in a linear order. The most basic use of
  69.     gradients is by the <a class="link" href="gimp-tool-blend.html" title="3.4.¬† Blend">Blend tool</a>,
  70.     sometimes known as the ‚Äú<span class="quote">gradient tool</span>‚Äù or ‚Äú<span class="quote">gradient
  71.     fill tool</span>‚Äù: it works
  72.     by filling the selection with colors from a gradient. You have many
  73.     options to choose from for controlling the way the gradient colors are
  74.     arranged within the selection. There are also other important ways to use
  75.     gradients, including:
  76.   </p>
  77.       <div class="variablelist">
  78.         <dl>
  79.           <dt>
  80.             <span class="term">Painting with a gradient</span>
  81.           </dt>
  82.           <dd>
  83.             <p>
  84.           Each of GIMP's basic painting tools allows you the option of using
  85.           colors from a gradient. This enables you to create brushstrokes that
  86.           change color from one end to the other.
  87.         </p>
  88.           </dd>
  89.           <dt>
  90.             <span class="term">The Gradient Map filter</span>
  91.           </dt>
  92.           <dd>
  93.             <p>
  94.            This filter is now in the Colors menu, and allows you to
  95.            ‚Äú<span class="quote">colorize</span>‚Äù
  96.            an image, using the color intensity of each point with the
  97.            corresponding color from the active gradient (the intensity 0, very
  98.            dark, is replaced by the color at most left end of the gradient,
  99.            progressively until the intensity is 255, very light, replaced by
  100.            the most right color of the gradient. See
  101.            <a class="xref" href="plug-in-gradmap.html" title="11.25.¬† Gradient Map">Section¬†11.25, ‚Äú
  102.     <span lang="en" xml:lang="en">Gradient Map</span>
  103.   ‚Äù</a> for more information.
  104.          </p>
  105.           </dd>
  106.         </dl>
  107.       </div>
  108.       <p>
  109.     When you install GIMP, it comes presupplied with a large number of
  110.     interesting gradients, and you can add new ones that you create or
  111.     download from other sources. You can access the full set of available
  112.     gradients using the
  113.     <a class="link" href="gimp-gradient-dialog.html" title="3.4.¬† Gradients Dialog">Gradients dialog</a>,
  114.     a dockable dialog that you can either activate when you need it, or keep
  115.     around as a tab in a dock. The ‚Äú<span class="quote">current gradient</span>‚Äù, used in
  116.     most gradient-related operations, is shown in the Brush/Pattern/Gradient
  117.     area of the Toolbox. Clicking on the gradient symbol in the Toolbox is an
  118.     alternative way of bringing up the Gradients dialog.
  119.   </p>
  120.       <p>
  121.     Many quickly examples of working with gradient (for more information
  122.     see <a class="link" href="gimp-tool-blend.html" title="3.4.¬† Blend">Blend Tool</a>):
  123.   </p>
  124.       <div class="itemizedlist">
  125.         <ul type="disc">
  126.           <li>
  127.             <p>Put a gradient in a selection:</p>
  128.             <div class="procedure">
  129.               <ol type="1">
  130.                 <li>
  131.                   <p>Choose a gradient.</p>
  132.                 </li>
  133.                 <li>
  134.                   <p>
  135.             With the Blend Tool click and drag with the mouse between
  136.             two points of a selection.
  137.           </p>
  138.                 </li>
  139.                 <li>
  140.                   <p>
  141.             Colors will distributed perpendicularly to the direction
  142.             of the drag of the mouse and according to the length
  143.             of it.
  144.           </p>
  145.                 </li>
  146.               </ol>
  147.             </div>
  148.             <div class="figure">
  149.               <a id="id2597124"></a>
  150.               <p class="title">
  151.                 <b>Figure¬†7.24.¬†
  152.           <span lang="en" xml:lang="en">
  153.             How to use rapidly a gradient in a selection
  154.           </span>
  155.         </b>
  156.               </p>
  157.               <div class="figure-contents">
  158.                 <div class="mediaobject">
  159.                   <img src="../images/using/gradient-draw.png" alt="How to use rapidly a gradient in a selection" />
  160.                 </div>
  161.               </div>
  162.             </div>
  163.             <br class="figure-break" />
  164.           </li>
  165.           <li>
  166.             <p>Use a gradient with a drawing tool:</p>
  167.             <p>
  168.         You can also use a gradient with pencil, brush or airbrush tools
  169.         if you check <span class="guilabel">Use color from gradient</span>
  170.         In the example below the option is checked for a pencil tool. You
  171.         see in the drawing in the right side the succession of the colors
  172.         of the gradient (to infinity...).
  173.       </p>
  174.             <div class="figure">
  175.               <a id="id2597177"></a>
  176.               <p class="title">
  177.                 <b>Figure¬†7.25.¬†
  178.           <span lang="en" xml:lang="en">
  179.             How to use rapidly a gradient with a drawing tool
  180.           </span>
  181.         </b>
  182.               </p>
  183.               <div class="figure-contents">
  184.                 <div class="mediaobject">
  185.                   <img src="../images/using/color-gradient-pencil.png" alt="How to use rapidly a gradient with a drawing tool" />
  186.                 </div>
  187.               </div>
  188.             </div>
  189.             <br class="figure-break" />
  190.           </li>
  191.           <li>
  192.             <p>Different productions with the same gradient:</p>
  193.             <div class="figure">
  194.               <a id="id2597217"></a>
  195.               <p class="title">
  196.                 <b>Figure¬†7.26.¬†
  197.           <span lang="en" xml:lang="en">Gradient usage</span>
  198.         </b>
  199.               </p>
  200.               <div class="figure-contents">
  201.                 <div class="mediaobject">
  202.                   <img src="../images/using/gradient-usage.png" alt="Gradient usage" />
  203.                   <div class="caption">
  204.                     <p>
  205.               Four ways of using the Tropical Colors gradient: a linear gradient
  206.               fill, a shaped gradient fill, a stroke painted using colors from a
  207.               gradient, and a stroke painted with a fuzzy brush then colored using
  208.               the <a class="link" href="plug-in-gradmap.html" title="11.25.¬† Gradient Map">Gradient Map</a> filter.
  209.             </p>
  210.                   </div>
  211.                 </div>
  212.               </div>
  213.             </div>
  214.             <br class="figure-break" />
  215.           </li>
  216.         </ul>
  217.       </div>
  218.       <p>A few useful things to know about GIMP's gradients:</p>
  219.       <div class="itemizedlist">
  220.         <ul type="disc">
  221.           <li>
  222.             <p>  
  223.         The first four gradients in the list are special:  they use the
  224.         Foreground and Background colors from the Toolbox Color Area,
  225.         instead of being fixed. <span class="guilabel">FG to BG (RGB)</span> is the
  226.         RGB representation of the gradient from the Foreground color to the
  227.         Background color in Toolbox. <span class="guilabel">FG to BG (HSV
  228.         counter-clockwise) </span> represents the hue succession in
  229.         Color Circle from the selected hue to 360¬∞. <span class="guilabel">FG to BG
  230.         (HSV clockwise</span> represents the hue succession in Color
  231.         Circle from the selected hue to 0¬∞. With <span class="guilabel">FG to transparent
  232.         </span>, the selected hue becomes more and more transparent. You
  233.         can modify these colors by using the Color Selector. Thus, by
  234.         altering the foreground and background colors, you can make these
  235.         gradients transition smoothly between any two colors you want.
  236.       </p>
  237.           </li>
  238.           <li>
  239.             <p>
  240.         Gradients can involve not just color changes, but also changes in
  241.         opacity. Some of the gradients are completely opaque; others include
  242.         transparent or translucent parts. When you fill or paint with a
  243.         non-opaque gradient, the existing contents of the layer will show
  244.         through behind it.
  245.       </p>
  246.           </li>
  247.           <li>
  248.             <p>
  249.         You can create new <span class="emphasis"><em>custom</em></span> gradients,
  250.         using the <a class="link" href="gimp-gradient-dialog.html#gimp-gradient-editor-dialog" title="3.4.3.¬† The Gradient Editor">Gradient
  251.         Editor</a>.  You cannot modify the gradients that are
  252.         supplied with GIMP, but you can duplicate them or create new
  253.         ones, and then edit those.
  254.       </p>
  255.           </li>
  256.         </ul>
  257.       </div>
  258.       <p>
  259.     The gradients that are supplied with GIMP are stored in a system
  260.     <code class="filename">gradients</code> folder.  By default, gradients that
  261.     you create are stored in a folder called
  262.     <code class="filename">gradients</code> in your personal GIMP directory.
  263.     Any gradient files (ending with the extension
  264.     <code class="filename">.ggr</code>) found in one of these folders, will
  265.     automatically be loaded when you start GIMP.  You can add more
  266.     directories to the gradient search path, if you want to, in the
  267.     Gradients tab of the <a class="link" href="gimp-pimping.html#gimp-prefs-folders-data" title="1.19.¬† Data Folders">Data
  268.     Folders</a> pages of the Preferences dialog.
  269.   </p>
  270.       <p>
  271.     New in GIMP 2.2 is the ability to load gradient files in SVG format, used
  272.     by many vector graphics programs. To make GIMP load an SVG gradient file,
  273.     all you need to do is place it in the <code class="filename">gradients</code>
  274.     folder of your personal GIMP directory, or any other folder in your
  275.     gradient search path.
  276.   </p>
  277.       <div class="tip" style="margin-left: 0.5in; margin-right: 0.5in;">
  278.         <table border="0" summary="Tip">
  279.           <tr>
  280.             <td rowspan="2" align="center" valign="top" width="25">
  281.               <img alt="[Tip]" src="../images/tip.png" />
  282.             </td>
  283.             <th align="left">Tip</th>
  284.           </tr>
  285.           <tr>
  286.             <td align="left" valign="top">
  287.               <p>
  288.       You can find a large number of interesting SVG gradients on the web, in
  289.       particular at OpenClipArt Gradients
  290.       <a class="xref" href="bibliography.html#bibliography-online-openclipart-gradients" title="Open Clipart - Gradients">[<abbr class="abbrev">OPENCLIPART-GRADIENT</abbr>]</a>.
  291.       You won't be able to see what these gradients look like unless your
  292.       browser supports SVG, but that won't prevent you from downloading them.
  293.     </p>
  294.             </td>
  295.           </tr>
  296.         </table>
  297.       </div>
  298.     </div>
  299.     <div class="navfooter">
  300.       <hr />
  301.       <table width="100%" summary="Navigation footer">
  302.         <tr>
  303.           <td width="40%" align="left"><a accesskey="p" href="gimp-using-variable-size-brush-creating.html"><img src="../images/prev.png" alt="Prev" /></a>¬†</td>
  304.           <td width="20%" align="center">
  305.             <a accesskey="u" href="gimp-painting.html">
  306.               <img src="../images/up.png" alt="Up" />
  307.             </a>
  308.           </td>
  309.           <td width="40%" align="right">¬†<a accesskey="n" href="gimp-concepts-patterns.html"><img src="../images/next.png" alt="Next" /></a></td>
  310.         </tr>
  311.         <tr>
  312.           <td width="40%" align="left" valign="top"><a accesskey="p" href="gimp-using-variable-size-brush-creating.html">9.2.¬†
  313.       <span lang="en" xml:lang="en">Creating a brush quickly</span>
  314.     </a>¬†</td>
  315.           <td width="20%" align="center">
  316.             <a accesskey="h" href="index.html">
  317.               <img src="../images/home.png" alt="Home" />
  318.             </a>
  319.           </td>
  320.           <td width="40%" align="right" valign="top">¬†<a accesskey="n" href="gimp-concepts-patterns.html">11.¬†
  321.     <span lang="en" xml:lang="en">Patterns</span>
  322.   </a></td>
  323.         </tr>
  324.       </table>
  325.     </div>
  326.   </body>
  327. </html>
  328.