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-gradient-dialog.html < prev    next >
Encoding:
Extensible Markup Language  |  2008-05-03  |  45.9 KB  |  1,188 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>3.4.¬† Gradients Dialog</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-dialogs-content.html" title="3.¬† Image-content Related Dialogs" />
  14.     <link rel="prev" href="gimp-pattern-dialog.html" title="3.3.¬† Patterns Dialog" />
  15.     <link rel="next" href="gimp-palette-dialog.html" title="3.5.¬† Palettes Dialog" />
  16.   </head>
  17.   <body>
  18.     <div class="navheader">
  19.       <table width="100%" summary="Navigation header">
  20.         <tr>
  21.           <th colspan="3" align="center">3.4.¬†
  22.     <span lang="en" xml:lang="en">Gradients Dialog</span>
  23.   </th>
  24.         </tr>
  25.         <tr>
  26.           <td width="20%" align="left"><a accesskey="p" href="gimp-pattern-dialog.html"><img src="../images/prev.png" alt="Prev" /></a>¬†</td>
  27.           <th width="60%" align="center">3.¬†
  28.     <span lang="en" xml:lang="en">Image-content Related Dialogs</span>
  29.   </th>
  30.           <td width="20%" align="right">¬†<a accesskey="n" href="gimp-palette-dialog.html"><img src="../images/next.png" alt="Next" /></a></td>
  31.         </tr>
  32.       </table>
  33.       <hr />
  34.     </div>
  35.     <div class="sect2" lang="en" xml:lang="en">
  36.       <div class="titlepage">
  37.         <div>
  38.           <div>
  39.             <h3 class="title"><a id="gimp-gradient-dialog"></a>3.4.¬†
  40.     <span lang="en" xml:lang="en">Gradients Dialog</span>
  41.   </h3>
  42.           </div>
  43.           <div>
  44.             <div class="revhistory">
  45.               <table border="1" width="100%" summary="Revision history">
  46.                 <tr>
  47.                   <th align="left" valign="top" colspan="3">
  48.                     <b>Revision History</b>
  49.                   </th>
  50.                 </tr>
  51.                 <tr>
  52.                   <td align="left">Revision $Revision: 2409 $</td>
  53.                   <td align="left">2008-02-22</td>
  54.                   <td align="left">j.h</td>
  55.                 </tr>
  56.               </table>
  57.             </div>
  58.           </div>
  59.         </div>
  60.       </div>
  61.       <a id="id2663608" class="indexterm"></a>
  62.       <a id="id2663621" class="indexterm"></a>
  63.       <div class="figure">
  64.         <a id="id2663635"></a>
  65.         <p class="title">
  66.           <b>Figure¬†14.34.¬†
  67.       <span lang="en" xml:lang="en">
  68.         The screenshot illustrates the Gradients dialog
  69.       </span>
  70.     </b>
  71.         </p>
  72.         <div class="figure-contents">
  73.           <div class="mediaobject">
  74.             <img src="../images/dialogs/dialogs-gradient.png" alt="The screenshot illustrates the Gradients dialog" />
  75.           </div>
  76.         </div>
  77.       </div>
  78.       <br class="figure-break" />
  79.       <p>
  80.     The Gradients dialog offers a gradient palette which is used to select
  81.     a gradient -- a set of colors arranged in a linear scale -- for use
  82.     with the <a class="link" href="gimp-tool-blend.html" title="3.4.¬† Blend">Blend tool</a> and numerous
  83.     other operations. It also gives you access to several functions for
  84.     manipulating gradients.  You can select a gradient by clicking on it in
  85.     the list: it will then be shown in the Brush/Pattern/Gradient area of
  86.     the Toolbox.  A few dozen nice gradients come pre-installed with GIMP.
  87.     You can create more using the <a class="link" href="gimp-gradient-dialog.html#gimp-gradient-editor-dialog" title="3.4.3.¬† The Gradient Editor">Gradient Editor</a>.  General
  88.     information about gradients and how they are used in GIMP can be found
  89.     in the <a class="link" href="gimp-concepts-gradients.html" title="10.¬† Gradients">Gradients</a>
  90.     section.
  91.   </p>
  92.       <div class="itemizedlist">
  93.         <p>
  94.       The first four gradients are particular: they reproduce the gradient
  95.       between Foreground and background colors of toolbox in different ways.
  96.     </p>
  97.         <ul type="disc">
  98.           <li>
  99.             <p>
  100.         <span class="guilabel">FG to BG (RGB)</span>: default gradient, between the
  101.         Foreground and the background colors of the Toolbox, in the RGB mode.
  102.       </p>
  103.           </li>
  104.           <li>
  105.             <p>
  106.         <span class="guilabel">FG to BG (HSV clock-wise/counter-clockwise Hue)</span>:
  107.         all hues in the color circle between the Foreground and the
  108.         background color, clockwise or counter-clockwise.
  109.       </p>
  110.           </li>
  111.           <li>
  112.             <p>
  113.         <span class="guilabel">FG to Transparent</span>: only uses one color (the
  114.         Foreground color) from complete opacity to complete transparency.
  115.         This gradient is very useful when you work with softly blended
  116.         collages or fog effects.
  117.       </p>
  118.           </li>
  119.         </ul>
  120.       </div>
  121.       <div class="sect3" lang="en" xml:lang="en">
  122.         <div class="titlepage">
  123.           <div>
  124.             <div>
  125.               <h4 class="title"><a id="gimp-gradient-dialog-activate"></a>3.4.1.¬†
  126.       <span lang="en" xml:lang="en">Activate Dialog</span>
  127.     </h4>
  128.             </div>
  129.           </div>
  130.         </div>
  131.         <p>
  132.       The Gradients dialog is a dockable dialog; see the section on <a class="link" href="gimp-concepts-docks.html" title="2.3.¬† Dialogs and Docking">Dialogs and Docking</a> for help on
  133.       manipulating it.  It can be activated in several ways:
  134.     </p>
  135.         <div class="itemizedlist">
  136.           <ul type="disc">
  137.             <li>
  138.               <p>
  139.           From the Toolbox menu:
  140.           <span class="guimenu">File</span> ‚Üí <span class="guisubmenu">Dialogs</span> ‚Üí <span class="guimenuitem"><span class="accel">G</span>radients</span>.
  141.         </p>
  142.             </li>
  143.             <li>
  144.               <p>
  145.           From the Toolbox menu:
  146.           <span class="guimenu">File</span> ‚Üí <span class="guisubmenu">Dialogs</span> ‚Üí <span class="guisubmenu">Create New Dock</span> ‚Üí <span class="guimenuitem">Brushes, Patterns, and Gradients</span>.
  147.           This gives you a new window with several dialog docks, one of them opens the
  148.               Gradients dialog.
  149.         </p>
  150.             </li>
  151.             <li>
  152.               <p>
  153.           From the Toolbox, by clicking on the current gradient in the
  154.           Brush/Pattern/Gradient area.
  155.         </p>
  156.             </li>
  157.             <li>
  158.               <p>
  159.           From an image menu:
  160.           <span class="guimenu">Dialogs</span> ‚Üí <span class="guimenuitem"><span class="accel">G</span>radients</span>.
  161.         </p>
  162.             </li>
  163.             <li>
  164.               <p>
  165.           From the Tab menu in any dockable dialog:
  166.           <span class="guimenu">Add Tab</span> ‚Üí <span class="guimenuitem"><span class="accel">G</span>radients</span>.
  167.         </p>
  168.             </li>
  169.             <li>
  170.               <p>
  171.           From the image by using the <span class="keycap"><strong>Ctrl+G</strong></span> shortcut.
  172.         </p>
  173.             </li>
  174.           </ul>
  175.         </div>
  176.       </div>
  177.       <div class="sect3" lang="en" xml:lang="en">
  178.         <div class="titlepage">
  179.           <div>
  180.             <div>
  181.               <h4 class="title"><a id="gimp-gradient-dialog-using"></a>3.4.2.¬†
  182.       <span lang="en" xml:lang="en">Using the Gradients dialog</span>
  183.     </h4>
  184.             </div>
  185.           </div>
  186.         </div>
  187.         <p>
  188.       The most basic, and most commonly used, operation with the dialog is
  189.       simply to click on one of the gradients in the scrollable list, in order
  190.       to make it GIMP's current gradient, which will then be used by any
  191.       operation that involves a gradient.
  192.     </p>
  193.         <p>
  194.       If you <span class="emphasis"><em>double-click</em></span>
  195.       on a gradient, you open the Gradient Editor where you will be able to
  196.       edit its name. Note, however, that you are only allowed to change the
  197.       names of gradients that you have created yourself, not the ones that
  198.       come pre-installed with GIMP. If you try to rename a pre-installed
  199.       gradient, you will be able to edit the name, but as soon as you hit
  200.       return or click somewhere else, the name will revert to its original
  201.       value. It is a general rule that you cannot alter the resources that
  202.       GIMP pre-installs for you: brushes, patterns, gradients, etc; only ones
  203.       that you create yourself.
  204.     </p>
  205.         <div class="variablelist">
  206.           <dl>
  207.             <dt>
  208.               <span class="term">Grid/List modes</span>
  209.             </dt>
  210.             <dd>
  211.               <p>
  212.             In the Tab menu, you can choose between <span class="guimenuitem">View as
  213.             Grid</span> and <span class="guimenuitem">View as List</span>.
  214.             In Grid mode, the gradients are laid out in a rectangular
  215.             array.  They look quite dazzling when viewed this way, but it is
  216.             not very easy to pick the one you want, because of visual
  217.             interference from the neighboring ones.  In List mode, the
  218.             more usable default, the gradients are lined up vertically, with
  219.             each row showing its name.
  220.           </p>
  221.               <p>
  222.             In the Tab menu, the option <span class="guilabel">Preview Size</span>
  223.             allows you to adapt the size of gradient previews to your
  224.             liking.
  225.           </p>
  226.             </dd>
  227.           </dl>
  228.         </div>
  229.         <p>
  230.       The buttons at the bottom of the dialog allow you to operate on
  231.       gradients in several ways:
  232.     </p>
  233.         <div class="variablelist">
  234.           <dl>
  235.             <dt>
  236.               <span class="term">Edit Gradient</span>
  237.             </dt>
  238.             <dd>
  239.               <p>
  240.             This button activates the
  241.             <a class="link" href="gimp-gradient-dialog.html#gimp-gradient-editor-dialog" title="3.4.3.¬† The Gradient Editor">Gradient Editor</a>.
  242.           </p>
  243.             </dd>
  244.             <dt>
  245.               <span class="term">New Gradient</span>
  246.             </dt>
  247.             <dd>
  248.               <a id="gimp-gradient-new"></a>
  249.               <p>
  250.             This creates a new gradient, initialized as a simple grayscale,
  251.             and activates the Gradient Editor so that you can alter it.
  252.             Gradients that you create are automatically saved in the
  253.             <code class="filename">gradients</code>
  254.             folder of your personal GIMP directory, from which they are
  255.             automatically loaded when GIMP starts. (You can change this
  256.             folder, or add new ones, using the Preferences dialog.)
  257.           </p>
  258.             </dd>
  259.             <dt>
  260.               <span class="term">Duplicate Gradient</span>
  261.             </dt>
  262.             <dd>
  263.               <a id="gimp-gradient-duplicate"></a>
  264.               <p>
  265.             This creates a copy of the currently selected gradient. You will
  266.             be able to edit the copy even if you cannot edit the original.
  267.           </p>
  268.             </dd>
  269.             <dt>
  270.               <span class="term">Delete Gradient</span>
  271.             </dt>
  272.             <dd>
  273.               <a id="gimp-gradient-delete"></a>
  274.               <p>
  275.             This removes all traces of the gradient, if you have permission to
  276.             do so. It asks for confirmation before doing anything.
  277.           </p>
  278.             </dd>
  279.             <dt>
  280.               <span class="term">Refresh Gradients</span>
  281.             </dt>
  282.             <dd>
  283.               <a id="gimp-gradient-refresh"></a>
  284.               <p>
  285.             If you add gradients to your personal
  286.             <code class="filename">gradients</code>
  287.             folder by some means other than this dialog, this button causes
  288.             the list to be reloaded, so that the new entries will be
  289.             available.
  290.           </p>
  291.             </dd>
  292.           </dl>
  293.         </div>
  294.         <p>
  295.       The functions performed by these buttons can also be accessed from the
  296.       dialog pop-up menu, activated by right-clicking anywhere in the
  297.       gradient list, or via <span class="guisubmenu">Gradient Menu</span> in the
  298.       Tab menu:
  299.     </p>
  300.         <div class="figure">
  301.           <a id="id2664239"></a>
  302.           <p class="title">
  303.             <b>Figure¬†14.35.¬†
  304.         <span lang="en" xml:lang="en">The Gradients Menu</span>
  305.       </b>
  306.           </p>
  307.           <div class="figure-contents">
  308.             <div class="mediaobject">
  309.               <img src="../images/dialogs/gradient-menu.png" alt="The Gradients Menu" />
  310.             </div>
  311.           </div>
  312.         </div>
  313.         <br class="figure-break" />
  314.         <p>
  315.       The gradient menu also gives you some additional functions:
  316.     </p>
  317.         <div class="variablelist">
  318.           <dl>
  319.             <dt>
  320.               <a id="gimp-gradient-save-as-pov"></a>
  321.               <span class="term">Save as POV-Ray...</span>
  322.             </dt>
  323.             <dd>
  324.               <p>
  325.             This allows you to save the gradient in the format used by
  326.             the <span class="application">POV-Ray</span> 3D ray-tracing
  327.             program.
  328.           </p>
  329.             </dd>
  330.             <dt>
  331.               <a id="gimp-gradient-copy-location"></a>
  332.               <span class="term">
  333.           <span lang="en" xml:lang="en">Copy Gradient Location</span>
  334.         </span>
  335.             </dt>
  336.             <dd>
  337.               <p>
  338.             This command allows you to copy the gradient file location to
  339.             the clipboard. You can then use it in a text editor.
  340.           </p>
  341.             </dd>
  342.             <dt>
  343.               <a id="script-fu-gradient-example"></a>
  344.               <span class="term">
  345.           <span lang="en" xml:lang="en">Custom Gradient...</span>
  346.         </span>
  347.             </dt>
  348.             <dd>
  349.               <p>
  350.             This command creates a sample image filled with the selected
  351.             gradient. You can select width and height of the image as well as
  352.             the gradient direction in the dialog window.
  353.           </p>
  354.             </dd>
  355.           </dl>
  356.         </div>
  357.       </div>
  358.       <div class="sect3" lang="en" xml:lang="en">
  359.         <div class="titlepage">
  360.           <div>
  361.             <div>
  362.               <h4 class="title"><a id="gimp-gradient-editor-dialog"></a>3.4.3.¬†
  363.     <span lang="en" xml:lang="en">The Gradient Editor</span>
  364.   </h4>
  365.             </div>
  366.             <div>
  367.               <div class="revhistory">
  368.                 <table border="1" width="100%" summary="Revision history">
  369.                   <tr>
  370.                     <th align="left" valign="top" colspan="3">
  371.                       <b>Revision History</b>
  372.                     </th>
  373.                   </tr>
  374.                   <tr>
  375.                     <td align="left">Revision $Revision: 2409 $</td>
  376.                     <td align="left">2007-09-27</td>
  377.                     <td align="left">ude</td>
  378.                   </tr>
  379.                 </table>
  380.               </div>
  381.             </div>
  382.           </div>
  383.         </div>
  384.         <a id="gimp-gradient-edit"></a>
  385.         <a id="id2664420" class="indexterm"></a>
  386.         <div class="figure">
  387.           <a id="id2664433"></a>
  388.           <p class="title">
  389.             <b>Figure¬†14.36.¬†
  390.       <span lang="en" xml:lang="en">The gradient editor</span>
  391.     </b>
  392.           </p>
  393.           <div class="figure-contents">
  394.             <div class="mediaobject">
  395.               <img src="../images/dialogs/gradient-editor-dialog.png" alt="The gradient editor" />
  396.             </div>
  397.           </div>
  398.         </div>
  399.         <br class="figure-break" />
  400.         <p>
  401.     The Gradient Editor allows you to edit the colors in a gradient. It can
  402.     only be used on gradients you have created yourself (or on a copy of a
  403.     system gradient), not on system gradients that come pre-installed with
  404.     GIMP. This is a sophisticated tool that may take a bit of effort to
  405.     understand. The concept behind it is that a gradient can be decomposed
  406.     into a series of adjoining <span class="emphasis"><em>segments</em></span>,
  407.     with each segment consisting of a smooth transition from the color on
  408.     the left edge to the color on the right edge. The Gradient Editor allows
  409.     you to pack together any number of segments, with any colors you want for
  410.     the left and right edges of each segment, and with several options for the
  411.     shape of the transition from left to right.
  412.   </p>
  413.         <div class="sect4" lang="en" xml:lang="en">
  414.           <div class="titlepage">
  415.             <div>
  416.               <div>
  417.                 <h5 class="title"><a id="gimp-gradient-editor-dialog-activate"></a>3.4.3.1.¬†
  418.       <span lang="en" xml:lang="en">How to Activate the Gradient Editor</span>
  419.     </h5>
  420.               </div>
  421.             </div>
  422.           </div>
  423.           <p>
  424.       You can activate the Gradient Editor in several ways:
  425.     </p>
  426.           <div class="itemizedlist">
  427.             <ul type="disc">
  428.               <li>
  429.                 <p>
  430.           By double-clicking on the gradient stripe in the Gradient dialog.
  431.         </p>
  432.               </li>
  433.               <li>
  434.                 <p>
  435.           From the context menu you get by right clicking on the selected
  436.           gradient name.
  437.         </p>
  438.               </li>
  439.               <li>
  440.                 <p>
  441.           By clicking on the <span class="guibutton">Edit gradient</span>
  442.           button in the Gradient Dialog.
  443.         </p>
  444.               </li>
  445.               <li>
  446.                 <p>
  447.           From the Gradient Menu you get by clicking on the small triangle
  448.           representing the Tab Menu in the Gradient Dialog.
  449.         </p>
  450.               </li>
  451.             </ul>
  452.           </div>
  453.         </div>
  454.         <div class="sect4" lang="en" xml:lang="en">
  455.           <div class="titlepage">
  456.             <div>
  457.               <div>
  458.                 <h5 class="title"><a id="gimp-gradient-editor-dialog-using"></a>3.4.3.2.¬†
  459.       <span lang="en" xml:lang="en">Display</span>
  460.     </h5>
  461.               </div>
  462.             </div>
  463.           </div>
  464.           <div class="variablelist">
  465.             <dl>
  466.               <dt>
  467.                 <span class="term">Name</span>
  468.               </dt>
  469.               <dd>
  470.                 <p>
  471.             In the name area, you have the tab menu button (the small
  472.             triangle).
  473.           </p>
  474.               </dd>
  475.               <dt>
  476.                 <span class="term">The Gradient Preview Window </span>
  477.               </dt>
  478.               <dd>
  479.                 <p>
  480.             Below the name, you see the current result of your work if the
  481.             <span class="guilabel">Instant update</span> option is checked; else,
  482.             changes will appear only when you release the mouse button.
  483.           </p>
  484.                 <p>
  485.             If you simply move the mouse pointer on this display, it works
  486.             somewhat as a color-picker. Values of the pointed pixel are
  487.             displayed in a rather odd way. <span class="emphasis"><em>Position</em></span>
  488.             is a number given to 3 decimal places, from 0.000 on the left to
  489.             1.000 on the right of the whole gradient.
  490.             <span class="emphasis"><em>RGB, HSV, Intensity and Opacity</em></span>
  491.             are also a ratio...
  492.           </p>
  493.                 <p>
  494.             If you click-n-drag on display, then only position and RGB data
  495.             are displayed. But they are passed on to the Foreground color in
  496.             the Toolbox and to the four first gradients of the list (by
  497.             pressing the <span class="keycap"><strong>Ctrl</strong></span> key, the Color is sent to the
  498.             Background color of the Toolbox).
  499.           </p>
  500.               </dd>
  501.               <dt>
  502.                 <span class="term">Range Selection/Control Sliders</span>
  503.               </dt>
  504.               <dd>
  505.                 <p>
  506.             Below the gradient display, you see a set of black and white
  507.             triangles lined up in row which allow you to adjust endpoints
  508.             and midpoints in the gradient preview. A
  509.             <span class="emphasis"><em>segment</em></span> is the space between two consecutive
  510.             <span class="emphasis"><em>black</em></span> triangles. Inside each segment is a
  511.             white triangle, which is used to ‚Äú<span class="quote">warp</span>‚Äù the colors
  512.             in the segment, in the same way that the middle slider
  513.             in the Levels tool warps the colors there. You can select a
  514.             segment by clicking between the two black triangles that define
  515.             it. It turns from white to blue. You can select a range of
  516.             segments by shift-clicking on them.
  517.             The selected range always consists of a set of
  518.             <span class="emphasis"><em>consecutive</em></span>
  519.             segments, so if you skip over any when shift-clicking, they will
  520.             be included automatically. If ‚Äú<span class="quote">Instant update</span>‚Äù
  521.             is checked, the display is updated immediately after any slider
  522.             movement; if it is unchecked, updates only occur when you release
  523.             the mouse button.
  524.           </p>
  525.                 <p>
  526.             You can move sliders, segments and selections. If you simply
  527.             <span class="emphasis"><em>click-n-drag a slider</em></span>,
  528.             you only move the corresponding transition. By
  529.             <span class="emphasis"><em>click-n-drag on a segment</em></span>
  530.             you can move this segment up to the next triangle. By
  531.             <span class="emphasis"><em>Shift+click-n-drag on a segment/selection</em></span>,
  532.             you can move this segment/selection and compress/ dilate next
  533.             segments.
  534.           </p>
  535.               </dd>
  536.               <dt>
  537.                 <span class="term">Scrollbar</span>
  538.               </dt>
  539.               <dd>
  540.                 <p>
  541.             Below the sliders is a scrollbar. This only comes into play if you
  542.             zoom in using the buttons at the bottom.
  543.           </p>
  544.               </dd>
  545.               <dt>
  546.                 <span class="term">Feedback Area</span>
  547.               </dt>
  548.               <dd>
  549.                 <p>
  550.             Below, a color swatch shows the color pointed by the mouse
  551.             cursor. Informations about this color and helpful hints or
  552.             feedback messages may appear here.
  553.           </p>
  554.               </dd>
  555.               <dt>
  556.                 <span class="term">Buttons</span>
  557.               </dt>
  558.               <dd>
  559.                 <p>
  560.             At the bottom of the dialog appear five buttons:
  561.           </p>
  562.                 <div class="variablelist">
  563.                   <dl>
  564.                     <dt>
  565.                       <span class="term">Save</span>
  566.                     </dt>
  567.                     <dd>
  568.                       <p>
  569.                   Clicking this button causes the gradient, in its current
  570.                   state, to be saved in your personal
  571.                   <code class="filename">gradients</code>
  572.                   folder, so that it will automatically be loaded the next
  573.                   time you start GIMP.
  574.                 </p>
  575.                     </dd>
  576.                     <dt>
  577.                       <span class="term">Revert</span>
  578.                     </dt>
  579.                     <dd>
  580.                       <p>
  581.                   Clicking this button undoes all of your editing. (However,
  582.                   at the time this is being written, this function is not yet
  583.                   implemented.)
  584.                 </p>
  585.                     </dd>
  586.                     <dt>
  587.                       <span class="term">Zoom Out</span>
  588.                     </dt>
  589.                     <dd>
  590.                       <a id="gimp-gradient-editor-zoom-out"></a>
  591.                       <p>
  592.                   Clicking this button shrinks the gradient display
  593.                   horizontally.
  594.                 </p>
  595.                     </dd>
  596.                     <dt>
  597.                       <span class="term">Zoom In</span>
  598.                     </dt>
  599.                     <dd>
  600.                       <a id="gimp-gradient-editor-zoom-in"></a>
  601.                       <p>
  602.                   Clicking this button expands the gradient display
  603.                   horizontally. You can then use the scrollbar to pan the
  604.                   display left or right.
  605.                 </p>
  606.                     </dd>
  607.                     <dt>
  608.                       <span class="term">Zoom All</span>
  609.                     </dt>
  610.                     <dd>
  611.                       <a id="gimp-gradient-editor-zoom-all"></a>
  612.                       <p>
  613.                   Clicking this button resizes the display horizontally so
  614.                   that it fits precisely into the window.
  615.                 </p>
  616.                     </dd>
  617.                   </dl>
  618.                 </div>
  619.               </dd>
  620.             </dl>
  621.           </div>
  622.         </div>
  623.         <div class="sect4" lang="en" xml:lang="en">
  624.           <div class="titlepage">
  625.             <div>
  626.               <div>
  627.                 <h5 class="title"><a id="gimp-gradient-editor-dialog-menu"></a>3.4.3.3.¬†
  628.       <span lang="en" xml:lang="en">The Gradient Editor pop-up Menu</span>
  629.     </h5>
  630.               </div>
  631.             </div>
  632.           </div>
  633.           <div class="figure">
  634.             <a id="id2664945"></a>
  635.             <p class="title">
  636.               <b>Figure¬†14.37.¬†
  637.         <span lang="en" xml:lang="en">The Gradient Editor pop-up menu</span>
  638.       </b>
  639.             </p>
  640.             <div class="figure-contents">
  641.               <div class="mediaobject">
  642.                 <img src="../images/dialogs/gradient-editor-popup-menu.png" alt="The Gradient Editor pop-up menu" />
  643.               </div>
  644.             </div>
  645.           </div>
  646.           <br class="figure-break" />
  647.           <p>
  648.       You can access the Gradient Editor menu either by right-clicking on the
  649.       gradient display, or by choosing the top item in the dialog's tab menu.
  650.       The menu allows you to edit endpoint's color (set the left and right
  651.       edge colors for each segment), blend colors, select a color model and
  652.       edit segments. This editor works only with custom gradients or a copy
  653.       of a system gradient.
  654.     </p>
  655.           <p>The following commands can be found in the menu:</p>
  656.           <div class="variablelist">
  657.             <p class="title">
  658.               <b>
  659.         <span lang="en" xml:lang="en">Editing endpoint's color</span>
  660.       </b>
  661.             </p>
  662.             <dl>
  663.               <dt>
  664.                 <span class="term">Left/Right color type</span>
  665.               </dt>
  666.               <dd>
  667.                 <p>This command opens a submenu:</p>
  668.                 <div class="figure">
  669.                   <a id="id2665022"></a>
  670.                   <p class="title">
  671.                     <b>Figure¬†14.38.¬†
  672.               <span lang="en" xml:lang="en">The Left/Right color type sub-menu</span>
  673.             </b>
  674.                   </p>
  675.                   <div class="figure-contents">
  676.                     <div class="mediaobject">
  677.                       <img src="../images/dialogs/gradient-editor-colortype-submenu.png" alt="The Left/Right color type sub-menu" />
  678.                     </div>
  679.                   </div>
  680.                 </div>
  681.                 <br class="figure-break" />
  682.                 <p>
  683.             This submenu allows you to select the endpoint color from the
  684.             toolbox foreground and background colors.
  685.             Whenever you change the foreground or background color, this
  686.             endpoint color may be changed as well. The alternative is to
  687.             select a <span class="guilabel">Fixed</span> endpoint color.
  688.           </p>
  689.               </dd>
  690.               <dt>
  691.                 <span class="term">Left [Right] Endpoint's Color</span>
  692.               </dt>
  693.               <dd>
  694.                 <a id="gimp-gradient-editor-left-color"></a>
  695.                 <a id="gimp-gradient-editor-right-color"></a>
  696.                 <p>
  697.             These options allow you to choose a color for the respective
  698.             endpoint using a Color Editor.
  699.           </p>
  700.                 <div class="note" style="margin-left: 0.5in; margin-right: 0.5in;">
  701.                   <table border="0" summary="Note">
  702.                     <tr>
  703.                       <td rowspan="2" align="center" valign="top" width="25">
  704.                         <img alt="[Note]" src="../images/note.png" />
  705.                       </td>
  706.                       <th align="left">Note</th>
  707.                     </tr>
  708.                     <tr>
  709.                       <td align="left" valign="top">
  710.                         <p>
  711.               This command is related to the previous one and becomes inactive
  712.               if you have selected a color yet.
  713.             </p>
  714.                       </td>
  715.                     </tr>
  716.                   </table>
  717.                 </div>
  718.               </dd>
  719.               <dt>
  720.                 <span class="term">Load Left [Right] Color From</span>
  721.               </dt>
  722.               <dd>
  723.                 <a id="gimp-gradient-editor-left-load"></a>
  724.                 <a id="gimp-gradient-editor-right-load"></a>
  725.                 <div class="figure">
  726.                   <a id="id2665141"></a>
  727.                   <p class="title">
  728.                     <b>Figure¬†14.39.¬†
  729.               <span lang="en" xml:lang="en">The "Load Color From" submenu</span>
  730.             </b>
  731.                   </p>
  732.                   <div class="figure-contents">
  733.                     <div class="mediaobject">
  734.                       <img src="../images/dialogs/gradient-editor-colorfrom.png" alt="The "Load Color From" submenu" />
  735.                     </div>
  736.                   </div>
  737.                 </div>
  738.                 <br class="figure-break" />
  739.                 <p>
  740.             These options give you a number of alternative ways of assigning
  741.             colors to the endpoints. From the submenu you can choose (assuming
  742.             we're dealing with the left endpoint):
  743.           </p>
  744.                 <div class="variablelist">
  745.                   <dl>
  746.                     <dt>
  747.                       <span class="term">Left Neighbor's Right Endpoint</span>
  748.                     </dt>
  749.                     <dd>
  750.                       <p>
  751.                   This choice will cause the color of the right endpoint of
  752.                   the segment neighboring on the left to be assigned to the
  753.                   left endpoint of the selected range.
  754.                 </p>
  755.                     </dd>
  756.                     <dt>
  757.                       <span class="term">Right Endpoint</span>
  758.                     </dt>
  759.                     <dd>
  760.                       <p>
  761.                   This choice will cause the color of the right endpoint of
  762.                   the selected range to be assigned to the left endpoint.
  763.                 </p>
  764.                     </dd>
  765.                     <dt>
  766.                       <span class="term">FG/BG color</span>
  767.                     </dt>
  768.                     <dd>
  769.                       <p>
  770.                   This choice causes GIMP's current foreground or background
  771.                   color, as shown in the Toolbox, to be assigned to the
  772.                   endpoint. Note that changing foreground or background color
  773.                   later will not change the endpoint's color.
  774.                 </p>
  775.                     </dd>
  776.                     <dt>
  777.                       <span class="term">RGBA slots</span>
  778.                     </dt>
  779.                     <dd>
  780.                       <p>
  781.                   At the bottom of the menu are 10 "memory slots". You can
  782.                   assign colors to them using the "Save" menu option described
  783.                   below. If you choose one of the slots, the color in it will
  784.                   be assigned to the endpoint.
  785.                 </p>
  786.                     </dd>
  787.                   </dl>
  788.                 </div>
  789.               </dd>
  790.               <dt>
  791.                 <span class="term">Save Left [Right] Color To</span>
  792.               </dt>
  793.               <dd>
  794.                 <a id="gimp-gradient-editor-left-save"></a>
  795.                 <a id="gimp-gradient-editor-right-save"></a>
  796.                 <p>
  797.             These options cause the color of the endpoint in question to be
  798.             assigned to the "memory slot" selected from the submenu.
  799.           </p>
  800.               </dd>
  801.             </dl>
  802.           </div>
  803.           <div class="variablelist">
  804.             <p class="title">
  805.               <b>
  806.         <span lang="en" xml:lang="en">
  807.           Blending and coloring functions for segment
  808.         </span>
  809.       </b>
  810.             </p>
  811.             <dl>
  812.               <dt>
  813.                 <span class="term">Blending Function for Segment</span>
  814.               </dt>
  815.               <dd>
  816.                 <a id="gimp-gradient-editor-blending"></a>
  817.                 <div class="figure">
  818.                   <a id="id2665337"></a>
  819.                   <p class="title">
  820.                     <b>Figure¬†14.40.¬†
  821.               <span lang="en" xml:lang="en">The Blending Function submenu</span>
  822.             </b>
  823.                   </p>
  824.                   <div class="figure-contents">
  825.                     <div class="mediaobject">
  826.                       <img src="../images/dialogs/gradient-editor-blend.png" alt="The Blending Function submenu" />
  827.                     </div>
  828.                   </div>
  829.                 </div>
  830.                 <br class="figure-break" />
  831.                 <p>
  832.             This option determines the course of the transition from one
  833.             endpoint of the range (segment or selection) to the other, by
  834.             fitting the specified type of function to the endpoints and
  835.             midpoint of the range:
  836.           </p>
  837.                 <div class="variablelist">
  838.                   <dl>
  839.                     <dt>
  840.                       <span class="term">Linear</span>
  841.                     </dt>
  842.                     <dd>
  843.                       <p>
  844.                   Default option. Color varies linearly from one endpoint of
  845.                   the range to the other.
  846.                 </p>
  847.                     </dd>
  848.                     <dt>
  849.                       <span class="term">Curved</span>
  850.                     </dt>
  851.                     <dd>
  852.                       <p>
  853.                   Gradient varies more quickly on ends of the range than on
  854.                   its middle.
  855.                 </p>
  856.                     </dd>
  857.                     <dt>
  858.                       <span class="term">Sinusoidal</span>
  859.                     </dt>
  860.                     <dd>
  861.                       <p>
  862.                   The opposite of the curved type. Gradients varies more
  863.                   quickly on center of the range than on its ends.
  864.                 </p>
  865.                     </dd>
  866.                     <dt>
  867.                       <span class="term">Spherical (increasing)</span>
  868.                     </dt>
  869.                     <dd>
  870.                       <p>
  871.                   Gradient varies more quickly on the left of the range than
  872.                   on its right.
  873.                 </p>
  874.                     </dd>
  875.                     <dt>
  876.                       <span class="term">Spherical (decreasing)</span>
  877.                     </dt>
  878.                     <dd>
  879.                       <p>
  880.                   Gradient varies more quickly on the right than on the left.
  881.                 </p>
  882.                     </dd>
  883.                   </dl>
  884.                 </div>
  885.               </dd>
  886.               <dt>
  887.                 <span class="term">Coloring Type for Segment</span>
  888.               </dt>
  889.               <dd>
  890.                 <a id="gimp-gradient-editor-coloring"></a>
  891.                 <div class="figure">
  892.                   <a id="id2665498"></a>
  893.                   <p class="title">
  894.                     <b>Figure¬†14.41.¬†
  895.               <span lang="en" xml:lang="en">The Coloring Type submenu</span>
  896.             </b>
  897.                   </p>
  898.                   <div class="figure-contents">
  899.                     <div class="mediaobject">
  900.                       <img src="../images/dialogs/gradient-editor-color.png" alt="The Coloring Type submenu" />
  901.                     </div>
  902.                   </div>
  903.                 </div>
  904.                 <br class="figure-break" />
  905.                 <p>
  906.             This option gives you additional control of the type of transition
  907.             from one endpoint to the other: as a line either in RGB space or
  908.             in HSV space.
  909.           </p>
  910.               </dd>
  911.             </dl>
  912.           </div>
  913.           <div class="variablelist">
  914.             <p class="title">
  915.               <b>
  916.         <span lang="en" xml:lang="en">Modifying segments</span>
  917.       </b>
  918.             </p>
  919.             <dl>
  920.               <dt>
  921.                 <span class="term">Flip Segment</span>
  922.               </dt>
  923.               <dd>
  924.                 <a id="gimp-gradient-editor-flip"></a>
  925.                 <p>
  926.             This option does a right-to-left flip of the selected range
  927.             (segment or selection), flipping all colors and endpoint
  928.             locations.
  929.           </p>
  930.               </dd>
  931.               <dt>
  932.                 <span class="term">Replicate Segment</span>
  933.               </dt>
  934.               <dd>
  935.                 <a id="gimp-gradient-editor-replicate"></a>
  936.                 <p>
  937.             This option splits the selected range (segment or selection) into
  938.             two parts, each of which is a perfect compressed copy of the
  939.             original range.
  940.           </p>
  941.               </dd>
  942.               <dt>
  943.                 <span class="term">Split Segment at Midpoint</span>
  944.               </dt>
  945.               <dd>
  946.                 <a id="gimp-gradient-editor-split-midpoint"></a>
  947.                 <p>
  948.             This option splits each segment in the selected range in into two
  949.             segments, splitting at the location of the white triangle.
  950.           </p>
  951.               </dd>
  952.               <dt>
  953.                 <span class="term">Split Segment Uniformly</span>
  954.               </dt>
  955.               <dd>
  956.                 <a id="gimp-gradient-editor-split-uniform"></a>
  957.                 <p>
  958.             This option is similar to the previous one, but it splits each
  959.             segment halfway between the endpoints, instead of at the white
  960.             triangle.
  961.           </p>
  962.               </dd>
  963.               <dt>
  964.                 <span class="term">Delete Segment</span>
  965.               </dt>
  966.               <dd>
  967.                 <a id="gimp-gradient-editor-delete"></a>
  968.                 <p>
  969.             This option deletes all segments in the selected range, (segment
  970.             or selection) replacing them with a single black triangle at the
  971.             center, and enlarging the segments on both sides to fill the void.
  972.           </p>
  973.               </dd>
  974.               <dt>
  975.                 <span class="term">Re-center Segment's midpoint</span>
  976.               </dt>
  977.               <dd>
  978.                 <a id="gimp-gradient-editor-recenter"></a>
  979.                 <p>
  980.             This option moves the white triangle for each segment in the
  981.             selected range to a point halfway between the neighboring black
  982.             triangles.
  983.           </p>
  984.               </dd>
  985.               <dt>
  986.                 <span class="term">Re-distribute Handles in Segment</span>
  987.               </dt>
  988.               <dd>
  989.                 <a id="gimp-gradient-editor-redistribute"></a>
  990.                 <p>
  991.             This option causes the black and white triangles in the selected
  992.             range to be shifted so that the distances from one to the next are
  993.             all equal.
  994.           </p>
  995.               </dd>
  996.             </dl>
  997.           </div>
  998.           <div class="variablelist">
  999.             <p class="title">
  1000.               <b>
  1001.         <span lang="en" xml:lang="en">Blending colors</span>
  1002.       </b>
  1003.             </p>
  1004.             <p>
  1005.         These options are available only if more than one segment are
  1006.         selected.
  1007.       </p>
  1008.             <dl>
  1009.               <dt>
  1010.                 <span class="term">Blend Endpoints' Colors</span>
  1011.               </dt>
  1012.               <dd>
  1013.                 <a id="gimp-gradient-editor-blend-color"></a>
  1014.                 <p>
  1015.             This option causes the colors at interior endpoints in the range
  1016.             to be averaged, so that the transition from each segment to the
  1017.             next is smooth.
  1018.           </p>
  1019.               </dd>
  1020.               <dt>
  1021.                 <span class="term">Blend Endpoints' Opacity</span>
  1022.               </dt>
  1023.               <dd>
  1024.                 <a id="gimp-gradient-editor-blend-opacity"></a>
  1025.                 <p>
  1026.             This option does the same thing as the previous option, but with
  1027.             opacity instead of color.
  1028.           </p>
  1029.               </dd>
  1030.             </dl>
  1031.           </div>
  1032.           <div class="caution" style="margin-left: 0.5in; margin-right: 0.5in;">
  1033.             <table border="0" summary="Caution">
  1034.               <tr>
  1035.                 <td rowspan="2" align="center" valign="top" width="25">
  1036.                   <img alt="[Caution]" src="../images/caution.png" />
  1037.                 </td>
  1038.                 <th align="left">Caution</th>
  1039.               </tr>
  1040.               <tr>
  1041.                 <td align="left" valign="top">
  1042.                   <p>
  1043.         There is no "undo" available within the Gradient Editor, so be
  1044.         careful!
  1045.       </p>
  1046.                 </td>
  1047.               </tr>
  1048.             </table>
  1049.           </div>
  1050.         </div>
  1051.         <div class="sect4" lang="en" xml:lang="en">
  1052.           <div class="titlepage">
  1053.             <div>
  1054.               <div>
  1055.                 <h5 class="title"><a id="id2665830"></a>3.4.3.4.¬†
  1056.       <span lang="en" xml:lang="en">Using example for the Gradient Editor</span>
  1057.     </h5>
  1058.               </div>
  1059.             </div>
  1060.           </div>
  1061.           <a id="id2665843" class="indexterm"></a>
  1062.           <a id="id2665857" class="indexterm"></a>
  1063.           <p>
  1064.       All these options can seem somewhat boring. Here is an example to clear
  1065.       ideas:
  1066.     </p>
  1067.           <div class="orderedlist">
  1068.             <ol type="1">
  1069.               <li>
  1070.                 <p>
  1071.           Open the Gradient Dialog. Click the
  1072.           <span class="guibutton">New Gradient</span>. The Gradient Editor is opened
  1073.           and shows a gradient from black to white.
  1074.         </p>
  1075.                 <div class="figure">
  1076.                   <a id="id2665902"></a>
  1077.                   <p class="title">
  1078.                     <b>Figure¬†14.42.¬†
  1079.             <span lang="en" xml:lang="en">New gradient</span>
  1080.           </b>
  1081.                   </p>
  1082.                   <div class="figure-contents">
  1083.                     <div class="mediaobject">
  1084.                       <img src="../images/dialogs/examples/new-gradient-1.png" alt="New gradient" />
  1085.                     </div>
  1086.                   </div>
  1087.                 </div>
  1088.                 <br class="figure-break" />
  1089.               </li>
  1090.               <li>
  1091.                 <p>
  1092.           Right click in this new gradient and click the
  1093.           <span class="guilabel">Split Segment Uniformly</span>. Fix the number of
  1094.           segments you want.
  1095.         </p>
  1096.                 <div class="figure">
  1097.                   <a id="id2665946"></a>
  1098.                   <p class="title">
  1099.                     <b>Figure¬†14.43.¬†
  1100.             <span lang="en" xml:lang="en">Gradient with three segments</span>
  1101.           </b>
  1102.                   </p>
  1103.                   <div class="figure-contents">
  1104.                     <div class="mediaobject">
  1105.                       <img src="../images/dialogs/examples/new-gradient-2.png" alt="Gradient with three segments" />
  1106.                       <div class="caption">
  1107.                         <p>
  1108.                 Every segment is limited with two black triangular sliders.
  1109.                 Click a segment to activate it. By pressing the
  1110.                 <span class="keycap"><strong>Shift</strong></span> key, you can select several contiguous
  1111.                 segments.
  1112.               </p>
  1113.                       </div>
  1114.                     </div>
  1115.                   </div>
  1116.                 </div>
  1117.                 <br class="figure-break" />
  1118.               </li>
  1119.               <li>
  1120.                 <p>
  1121.           In the context menu you get by right-clicking in the gradient, set
  1122.           <span class="guilabel">Left Endpoint Color</span> and
  1123.           <span class="guilabel">Right Endpoint Color</span> for the selected segment
  1124.           or segment group.
  1125.         </p>
  1126.                 <div class="figure">
  1127.                   <a id="id2666015"></a>
  1128.                   <p class="title">
  1129.                     <b>Figure¬†14.44.¬†
  1130.             <span lang="en" xml:lang="en">First segment colored</span>
  1131.           </b>
  1132.                   </p>
  1133.                   <div class="figure-contents">
  1134.                     <div class="mediaobject">
  1135.                       <img src="../images/dialogs/examples/new-gradient-3.png" alt="First segment colored" />
  1136.                       <div class="caption">
  1137.                         <p>
  1138.                 Red has been chosen for left endpoint and yellow for the right
  1139.                 enpoint.
  1140.               </p>
  1141.                       </div>
  1142.                     </div>
  1143.                   </div>
  1144.                 </div>
  1145.                 <br class="figure-break" />
  1146.               </li>
  1147.               <li>
  1148.                 <p>
  1149.           Go on the same way for other segments. Then use the
  1150.           <span class="guilabel">Blending functions for segment</span> to achieve
  1151.           various effects.
  1152.         </p>
  1153.               </li>
  1154.             </ol>
  1155.           </div>
  1156.         </div>
  1157.       </div>
  1158.     </div>
  1159.     <div class="navfooter">
  1160.       <hr />
  1161.       <table width="100%" summary="Navigation footer">
  1162.         <tr>
  1163.           <td width="40%" align="left"><a accesskey="p" href="gimp-pattern-dialog.html"><img src="../images/prev.png" alt="Prev" /></a>¬†</td>
  1164.           <td width="20%" align="center">
  1165.             <a accesskey="u" href="gimp-dialogs-content.html">
  1166.               <img src="../images/up.png" alt="Up" />
  1167.             </a>
  1168.           </td>
  1169.           <td width="40%" align="right">¬†<a accesskey="n" href="gimp-palette-dialog.html"><img src="../images/next.png" alt="Next" /></a></td>
  1170.         </tr>
  1171.         <tr>
  1172.           <td width="40%" align="left" valign="top"><a accesskey="p" href="gimp-pattern-dialog.html">3.3.¬†
  1173.     <span lang="en" xml:lang="en">Patterns Dialog</span>
  1174.   </a>¬†</td>
  1175.           <td width="20%" align="center">
  1176.             <a accesskey="h" href="index.html">
  1177.               <img src="../images/home.png" alt="Home" />
  1178.             </a>
  1179.           </td>
  1180.           <td width="40%" align="right" valign="top">¬†<a accesskey="n" href="gimp-palette-dialog.html">3.5.¬†
  1181.     <span lang="en" xml:lang="en">Palettes Dialog</span>
  1182.   </a></td>
  1183.         </tr>
  1184.       </table>
  1185.     </div>
  1186.   </body>
  1187. </html>
  1188.