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-layer-modes.html < prev    next >
Encoding:
Extensible Markup Language  |  2008-05-03  |  62.6 KB  |  1,596 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>2.¬† Layer Modes</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-image-combining.html" title="Chapter¬†8.¬† Combining Images" />
  14.     <link rel="prev" href="gimp-image-combining.html" title="Chapter¬†8.¬† Combining Images" />
  15.     <link rel="next" href="gimp-using-layers.html" title="3.¬† Creating New Layers" />
  16.   </head>
  17.   <body>
  18.     <div class="navheader">
  19.       <table width="100%" summary="Navigation header">
  20.         <tr>
  21.           <th colspan="3" align="center">2.¬†
  22.     <span lang="en" xml:lang="en">Layer Modes</span>
  23.   </th>
  24.         </tr>
  25.         <tr>
  26.           <td width="20%" align="left"><a accesskey="p" href="gimp-image-combining.html"><img src="../images/prev.png" alt="Prev" /></a>¬†</td>
  27.           <th width="60%" align="center">Chapter¬†8.¬†
  28.         <span lang="en" xml:lang="en">Combining Images</span>
  29.       </th>
  30.           <td width="20%" align="right">¬†<a accesskey="n" href="gimp-using-layers.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-layer-modes"></a>2.¬†
  40.     <span lang="en" xml:lang="en">Layer Modes</span>
  41.   </h2>
  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: 2406 $</td>
  53.                   <td align="left">2008-01-05</td>
  54.                   <td align="left">jpl</td>
  55.                 </tr>
  56.               </table>
  57.             </div>
  58.           </div>
  59.         </div>
  60.       </div>
  61.       <a id="id2600092" class="indexterm"></a>
  62.       <a id="id2600105" class="indexterm"></a>
  63.       <a id="id2600113" class="indexterm"></a>
  64.       <p>
  65.     <acronym class="acronym">GIMP</acronym> has twenty-one layer modes. Layer modes are also
  66.     sometimes called ‚Äú<span class="quote">blending modes</span>‚Äù.
  67.     Selecting a layer mode changes the appearance of the layer or image,
  68.     based on the layer or layers beneath it. If there is only one layer, the
  69.     layer mode has no effect. There must therefore be at least two layers in
  70.     the image to be able to use layer modes.
  71.   </p>
  72.       <p>
  73.     You can set the layer mode in the <span class="guilabel">Mode</span>
  74.     menu in the Layers dialog. <acronym class="acronym">GIMP</acronym>
  75.     uses the layer mode to determine how to combine each pixel in the top
  76.     layer with the pixel in the same location in the layer below it.
  77.   </p>
  78.       <div class="note" style="margin-left: 0.5in; margin-right: 0.5in;">
  79.         <table border="0" summary="Note">
  80.           <tr>
  81.             <td rowspan="2" align="center" valign="top" width="25">
  82.               <img alt="[Note]" src="../images/note.png" />
  83.             </td>
  84.             <th align="left">Note</th>
  85.           </tr>
  86.           <tr>
  87.             <td align="left" valign="top">
  88.               <p>
  89.       There is a drop-down list in the Toolbox options box which contains
  90.       modes that affect the painting tools in a similar way to the layer
  91.       modes. You can use all of the same modes for painting that are available
  92.       for layers, and there are two additional modes just for the painting
  93.       tools. See <a class="xref" href="gimp-tool-painting.html" title="3.2.¬† Painting Tools (Pencil, Paintbrush, Airbrush)">Section¬†3.2, ‚Äú
  94.     <span lang="en" xml:lang="en">Painting Tools (Pencil, Paintbrush, Airbrush)</span>
  95.   ‚Äù</a>.
  96.     </p>
  97.             </td>
  98.           </tr>
  99.         </table>
  100.       </div>
  101.       <p>
  102.     Layer modes permit complex color changes in the image. They are often used
  103.     with a new layer which acts as a kind of mask. For example, if you put a
  104.     solid white layer over an image and set the layer mode of the new layer to
  105.     ‚Äú<span class="quote">Saturation</span>‚Äù, the underlying visible layers will appear in
  106.     shades of gray.
  107.   </p>
  108.       <div class="figure">
  109.         <a id="id2600194"></a>
  110.         <p class="title">
  111.           <b>Figure¬†8.8.¬†
  112.       <span lang="en" xml:lang="en">Images (masks) for layer mode examples</span>
  113.     </b>
  114.         </p>
  115.         <div class="figure-contents">
  116.           <div class="mediaobject">
  117.             <img src="../images/using/layer-mode-mask1.jpg" alt="Images (masks) for layer mode examples" />
  118.             <div class="caption">
  119.               <p>Mask 1</p>
  120.             </div>
  121.           </div>
  122.           <div class="mediaobject">
  123.             <img src="../images/using/layer-mode-mask2.jpg" alt="Images (masks) for layer mode examples" />
  124.             <div class="caption">
  125.               <p>Mask 2</p>
  126.             </div>
  127.           </div>
  128.         </div>
  129.       </div>
  130.       <br class="figure-break" />
  131.       <div class="figure">
  132.         <a id="id2600252"></a>
  133.         <p class="title">
  134.           <b>Figure¬†8.9.¬†
  135.       <span lang="en" xml:lang="en">Images (backgrounds) for layer mode examples</span>
  136.     </b>
  137.         </p>
  138.         <div class="figure-contents">
  139.           <div class="mediaobject">
  140.             <img src="../images/using/keyfob_orig.png" alt="Images (backgrounds) for layer mode examples" />
  141.             <div class="caption">
  142.               <p>Key fob</p>
  143.             </div>
  144.           </div>
  145.           <div class="mediaobject">
  146.             <img src="../images/using/duck_orig.png" alt="Images (backgrounds) for layer mode examples" />
  147.             <div class="caption">
  148.               <p>Ducks</p>
  149.             </div>
  150.           </div>
  151.         </div>
  152.       </div>
  153.       <br class="figure-break" />
  154.       <p>
  155.     In the descriptions of the layer modes below, the equations are also
  156.     shown. This is for those who are curious about the mathematics of the
  157.     layer modes. You do not need to understand the equations in order to use
  158.     the layer modes effectively, however.
  159.   </p>
  160.       <p>
  161.     The equations are in a shorthand notation. For example, the equation
  162.   </p>
  163.       <div class="equation">
  164.         <a id="id2600326"></a>
  165.         <p class="title">
  166.           <b>Equation¬†8.1.¬†
  167.       <span lang="en" xml:lang="en">Example</span>
  168.     </b>
  169.         </p>
  170.         <div class="equation-contents">
  171.           <div>
  172.             <img src="../images/math/layer-mode-example.png" />
  173.           </div>
  174.         </div>
  175.       </div>
  176.       <br class="equation-break" />
  177.       <p>
  178.     means,
  179.     ‚Äú<span class="quote">
  180.       For each pixel in the upper (<span class="emphasis"><em>M</em></span>ask)and lower
  181.       (<span class="emphasis"><em>I</em></span>mage) layer, add each of the
  182.       corresponding color components together to form the
  183.       <span class="emphasis"><em>E</em></span> resulting pixel's color.
  184.     </span>‚Äù
  185.     Pixel color components must always be between 0 and 255. Unless the
  186.     description below says otherwise, a negative color component is set to 0
  187.     and a color component larger than 255 is set to 255.
  188.   </p>
  189.       <p>
  190.     The examples below show the effects of each of the modes. The image on the
  191.     left is the normal state and the image on the right shows the results of
  192.     the layer mode.
  193.   </p>
  194.       <p>
  195.     Since the results of each mode vary greatly depending upon the colors on
  196.     the layers, these images can only give you a general idea of how the modes
  197.     work. You are encouraged to try them out yourself. You might start with
  198.     two similar layers, where one is a copy of the other, but slightly
  199.     modified (by being blurred, moved, rotated, scaled, color-inverted, etc.)
  200.     and seeing what happens with the layer modes.
  201.   </p>
  202.       <div class="variablelist">
  203.         <dl>
  204.           <dt>
  205.             <span class="term">Normal</span>
  206.           </dt>
  207.           <dd>
  208.             <a id="id2600407" class="indexterm"></a>
  209.             <div class="figure">
  210.               <a id="id2600421"></a>
  211.               <p class="title">
  212.                 <b>Figure¬†8.10.¬†
  213.             <span lang="en" xml:lang="en">
  214.               Example for layer mode ‚Äú<span class="quote">Normal</span>‚Äù
  215.             </span>
  216.           </b>
  217.               </p>
  218.               <div class="figure-contents">
  219.                 <div class="mediaobject">
  220.                   <img src="../images/using/layer-mode-normal-50.jpg" alt="Example for layer mode Normal" />
  221.                   <div class="caption">
  222.                     <p>
  223.                 Both images are blended into each other with the same
  224.                 intensity.
  225.               </p>
  226.                   </div>
  227.                 </div>
  228.                 <div class="mediaobject">
  229.                   <img src="../images/using/layer-mode-normal-100.jpg" alt="Example for layer mode Normal" />
  230.                   <div class="caption">
  231.                     <p>
  232.                 With 100% opacity only the upper layer is shown when blending
  233.                 with ‚Äú<span class="quote">Normal</span>‚Äù.
  234.               </p>
  235.                   </div>
  236.                 </div>
  237.               </div>
  238.             </div>
  239.             <br class="figure-break" />
  240.             <p>
  241.           <span class="guilabel">Normal</span>
  242.           mode is the default layer mode. The layer on top covers the layers
  243.           below it. If you want to see anything below the top layer when you
  244.           use this mode, the layer must have some transparent areas.
  245.         </p>
  246.             <p>The equation is:</p>
  247.             <div class="equation">
  248.               <a id="id2600508"></a>
  249.               <p class="title">
  250.                 <b>Equation¬†8.2.¬†
  251.             <span lang="en" xml:lang="en">
  252.               Equation for layer mode ‚Äú<span class="quote">Normal</span>‚Äù
  253.             </span>
  254.           </b>
  255.               </p>
  256.               <div class="equation-contents">
  257.                 <div>
  258.                   <img src="../images/math/layer-mode-normal.png" />
  259.                 </div>
  260.               </div>
  261.             </div>
  262.             <br class="equation-break" />
  263.           </dd>
  264.           <dt>
  265.             <span class="term">Dissolve</span>
  266.           </dt>
  267.           <dd>
  268.             <a id="id2600548" class="indexterm"></a>
  269.             <a id="id2600560" class="indexterm"></a>
  270.             <div class="figure">
  271.               <a id="id2600568"></a>
  272.               <p class="title">
  273.                 <b>Figure¬†8.11.¬†
  274.             <span lang="en" xml:lang="en">
  275.               Example for layer mode ‚Äú<span class="quote">Dissolve</span>‚Äù
  276.             </span>
  277.           </b>
  278.               </p>
  279.               <div class="figure-contents">
  280.                 <div class="mediaobject">
  281.                   <img src="../images/using/layer-mode-dissolve-50.jpg" alt="Example for layer mode Dissolve" />
  282.                   <div class="caption">
  283.                     <p>
  284.                 Both images are blended into each
  285.                 other with the same
  286.                 intensity.
  287.               </p>
  288.                   </div>
  289.                 </div>
  290.                 <div class="mediaobject">
  291.                   <img src="../images/using/layer-mode-dissolve-100.jpg" alt="Example for layer mode Dissolve" />
  292.                   <div class="caption">
  293.                     <p>
  294.                 With 100% opacity only the upper layer is shown when blending
  295.                 with ‚Äú<span class="quote">dissolve</span>‚Äù.
  296.               </p>
  297.                   </div>
  298.                 </div>
  299.               </div>
  300.             </div>
  301.             <br class="figure-break" />
  302.             <p>
  303.           <span class="guilabel">Dissolve</span>
  304.           mode dissolves the upper layer into the layer beneath it by drawing
  305.           a random pattern of pixels in areas of partial transparency. It is
  306.           useful as a layer mode, but it is also often useful as a painting
  307.           mode.
  308.         </p>
  309.             <p>
  310.           This is especially visible along the edges within an image. It is
  311.           easiest to see in an enlarged screenshot. The image on the left
  312.           illustrates ‚Äú<span class="quote">Normal</span>‚Äù layer mode (enlarged) and the
  313.           image on the right shows the same two layers in
  314.           ‚Äú<span class="quote">Dissolve</span>‚Äù
  315.           mode, where it can be clearly seen how the pixels are dispersed.
  316.         </p>
  317.             <div class="figure">
  318.               <a id="id2600672"></a>
  319.               <p class="title">
  320.                 <b>Figure¬†8.12.¬†
  321.             <span lang="en" xml:lang="en">Enlarged screenshots</span>
  322.           </b>
  323.               </p>
  324.               <div class="figure-contents">
  325.                 <div class="mediaobject">
  326.                   <img src="../images/using/layer-mode-dissolve-nbig.jpg" alt="Enlarged screenshots" />
  327.                   <div class="caption">
  328.                     <p>Normal mode.</p>
  329.                   </div>
  330.                 </div>
  331.                 <div class="mediaobject">
  332.                   <img src="../images/using/layer-mode-dissolve-dbig.jpg" alt="Enlarged screenshots" />
  333.                   <div class="caption">
  334.                     <p>Dissolve mode.</p>
  335.                   </div>
  336.                 </div>
  337.               </div>
  338.             </div>
  339.             <br class="figure-break" />
  340.           </dd>
  341.           <dt>
  342.             <span class="term">Multiply</span>
  343.           </dt>
  344.           <dd>
  345.             <a id="id2600743" class="indexterm"></a>
  346.             <a id="id2600755" class="indexterm"></a>
  347.             <div class="figure">
  348.               <a id="id2600763"></a>
  349.               <p class="title">
  350.                 <b>Figure¬†8.13.¬†
  351.             <span lang="en" xml:lang="en">
  352.               Example for layer mode ‚Äú<span class="quote">Multiply</span>‚Äù
  353.             </span>
  354.           </b>
  355.               </p>
  356.               <div class="figure-contents">
  357.                 <div class="mediaobject">
  358.                   <img src="../images/using/layer-mode-multiply-mask1.jpg" alt="Example for layer mode Multiply" />
  359.                   <div class="caption">
  360.                     <p>
  361.                 Mask 1 is used as upper layer with 100% opacity.
  362.               </p>
  363.                   </div>
  364.                 </div>
  365.                 <div class="mediaobject">
  366.                   <img src="../images/using/layer-mode-multiply-mask2.jpg" alt="Example for layer mode Multiply" />
  367.                   <div class="caption">
  368.                     <p>
  369.                 Mask 2 is used as upper layer with 100% opacity.
  370.               </p>
  371.                   </div>
  372.                 </div>
  373.               </div>
  374.             </div>
  375.             <br class="figure-break" />
  376.             <p>
  377.           <span class="guilabel">Multiply</span>
  378.           mode multiplies the pixel values of the upper layer with those of
  379.           the layer below it and then divides the result by 255. The result is
  380.           usually a darker image. If either layer is white, the resulting
  381.           image is the same as the other layer (1 * I = I). If either layer
  382.           is black, the resulting image is completely black (0 * I = 0).
  383.         </p>
  384.             <p>The equation is:</p>
  385.             <div class="equation">
  386.               <a id="id2600850"></a>
  387.               <p class="title">
  388.                 <b>Equation¬†8.3.¬†
  389.             <span lang="en" xml:lang="en">
  390.               Equation for layer mode ‚Äú<span class="quote">Multiply</span>‚Äù
  391.             </span>
  392.           </b>
  393.               </p>
  394.               <div class="equation-contents">
  395.                 <div>
  396.                   <img src="../images/math/layer-mode-multiply.png" />
  397.                 </div>
  398.               </div>
  399.             </div>
  400.             <br class="equation-break" />
  401.             <p>
  402.           The mode is commutative; the order of the two layers doesn't matter.
  403.         </p>
  404.           </dd>
  405.           <dt>
  406.             <span class="term">Divide</span>
  407.           </dt>
  408.           <dd>
  409.             <a id="id2600897" class="indexterm"></a>
  410.             <a id="id2600910" class="indexterm"></a>
  411.             <div class="figure">
  412.               <a id="id2600918"></a>
  413.               <p class="title">
  414.                 <b>Figure¬†8.14.¬†
  415.             <span lang="en" xml:lang="en">
  416.               Example for layer mode ‚Äú<span class="quote">Divide</span>‚Äù
  417.             </span>
  418.           </b>
  419.               </p>
  420.               <div class="figure-contents">
  421.                 <div class="mediaobject">
  422.                   <img src="../images/using/layer-mode-divide-mask1.jpg" alt="Example for layer mode Divide" />
  423.                   <div class="caption">
  424.                     <p>
  425.                 Mask 1 is used as upper layer with 100% opacity.
  426.               </p>
  427.                   </div>
  428.                 </div>
  429.                 <div class="mediaobject">
  430.                   <img src="../images/using/layer-mode-divide-mask2.jpg" alt="Example for layer mode Divide" />
  431.                   <div class="caption">
  432.                     <p>
  433.                 Mask 2 is used as upper layer with 100% opacity.
  434.               </p>
  435.                   </div>
  436.                 </div>
  437.               </div>
  438.             </div>
  439.             <br class="figure-break" />
  440.             <p>
  441.           <span class="guilabel">Divide</span>
  442.           mode multiplies each pixel value in the lower layer by 256 and then
  443.           divides that by the corresponding pixel value of the upper layer
  444.           plus one. (Adding one to the denominator avoids dividing by zero.)
  445.           The resulting image is often lighter, and sometimes looks
  446.           ‚Äú<span class="quote">burned out</span>‚Äù.
  447.         </p>
  448.             <p>The equation is:</p>
  449.             <div class="equation">
  450.               <a id="id2601007"></a>
  451.               <p class="title">
  452.                 <b>Equation¬†8.4.¬†
  453.             <span lang="en" xml:lang="en">
  454.               Equation for layer mode ‚Äú<span class="quote">Divide</span>‚Äù
  455.             </span>
  456.           </b>
  457.               </p>
  458.               <div class="equation-contents">
  459.                 <div>
  460.                   <img src="../images/math/layer-mode-divide.png" />
  461.                 </div>
  462.               </div>
  463.             </div>
  464.             <br class="equation-break" />
  465.           </dd>
  466.           <dt>
  467.             <span class="term">Screen</span>
  468.           </dt>
  469.           <dd>
  470.             <a id="id2601046" class="indexterm"></a>
  471.             <a id="id2601058" class="indexterm"></a>
  472.             <div class="figure">
  473.               <a id="id2601067"></a>
  474.               <p class="title">
  475.                 <b>Figure¬†8.15.¬†
  476.             <span lang="en" xml:lang="en">
  477.               Example for layer mode ‚Äú<span class="quote">Screen</span>‚Äù
  478.             </span>
  479.           </b>
  480.               </p>
  481.               <div class="figure-contents">
  482.                 <div class="mediaobject">
  483.                   <img src="../images/using/layer-mode-screen-mask1.jpg" alt="Example for layer mode Screen" />
  484.                   <div class="caption">
  485.                     <p>
  486.                 Mask 1 is used as upper layer with 100% opacity.
  487.               </p>
  488.                   </div>
  489.                 </div>
  490.                 <div class="mediaobject">
  491.                   <img src="../images/using/layer-mode-screen-mask2.jpg" alt="Example for layer mode Screen" />
  492.                   <div class="caption">
  493.                     <p>
  494.                 Mask 2 is used as upper layer with 100% opacity.
  495.               </p>
  496.                   </div>
  497.                 </div>
  498.               </div>
  499.             </div>
  500.             <br class="figure-break" />
  501.             <p>
  502.           <span class="guilabel">Screen</span>
  503.           mode inverts the values of each of the visible pixels in the two
  504.           layers of the image. (That is, it subtracts each of them from 255.)
  505.           Then it multiplies them together, divides by 255 and inverts
  506.           this value again. The resulting image is usually brighter, and
  507.           sometimes ‚Äú<span class="quote">washed out</span>‚Äù
  508.           in appearance. The exceptions to this are a black layer, which does
  509.           not change the other layer, and a white layer, which results in a
  510.           white image. Darker colors in the image appear to be more
  511.           transparent.
  512.         </p>
  513.             <p>The equation is:</p>
  514.             <div class="equation">
  515.               <a id="id2601159"></a>
  516.               <p class="title">
  517.                 <b>Equation¬†8.5.¬†
  518.             <span lang="en" xml:lang="en">
  519.               Equation for layer mode ‚Äú<span class="quote">Screen</span>‚Äù
  520.             </span>
  521.           </b>
  522.               </p>
  523.               <div class="equation-contents">
  524.                 <div>
  525.                   <img src="../images/math/layer-mode-screen.png" />
  526.                 </div>
  527.               </div>
  528.             </div>
  529.             <br class="equation-break" />
  530.             <p>
  531.           The mode is commutative; the order of the two layers doesn't matter.
  532.         </p>
  533.           </dd>
  534.           <dt>
  535.             <span class="term">Overlay</span>
  536.           </dt>
  537.           <dd>
  538.             <a id="id2601205" class="indexterm"></a>
  539.             <a id="id2601217" class="indexterm"></a>
  540.             <div class="figure">
  541.               <a id="id2601226"></a>
  542.               <p class="title">
  543.                 <b>Figure¬†8.16.¬†
  544.             <span lang="en" xml:lang="en">
  545.               Example for layer mode ‚Äú<span class="quote">Overlay</span>‚Äù
  546.             </span>
  547.           </b>
  548.               </p>
  549.               <div class="figure-contents">
  550.                 <div class="mediaobject">
  551.                   <img src="../images/using/layer-mode-overlay-mask1.jpg" alt="Example for layer mode Overlay" />
  552.                   <div class="caption">
  553.                     <p>
  554.                 Mask 1 is used as upper layer with 100% opacity.
  555.               </p>
  556.                   </div>
  557.                 </div>
  558.                 <div class="mediaobject">
  559.                   <img src="../images/using/layer-mode-overlay-mask2.jpg" alt="Example for layer mode Overlay" />
  560.                   <div class="caption">
  561.                     <p>
  562.                 Mask 2 is used as upper layer with 100% opacity.
  563.               </p>
  564.                   </div>
  565.                 </div>
  566.               </div>
  567.             </div>
  568.             <br class="figure-break" />
  569.             <p>
  570.           <span class="guilabel">Overlay</span>
  571.           mode inverts the pixel value of the lower layer, multiplies it by
  572.           two times the pixel value of the upper layer, adds that to the
  573.           original pixel value of the lower layer, divides by 255, and then
  574.           multiplies by the pixel value of the original lower layer and
  575.           divides by 255 again. It darkens the image, but not as much as with
  576.           ‚Äú<span class="quote">Multiply</span>‚Äù mode.
  577.         </p>
  578.             <p>
  579.           <span lang="en" xml:lang="en">The equation is:</span>
  580.           <sup>[<a id="gimp-layer-mode-bug162395" href="#ftn.gimp-layer-mode-bug162395" class="footnote">2</a>]</sup>
  581.         </p>
  582.             <div class="equation">
  583.               <a id="id2601341"></a>
  584.               <p class="title">
  585.                 <b>Equation¬†8.6.¬†
  586.             <span lang="en" xml:lang="en">
  587.               Equation for layer mode ‚Äú<span class="quote">Overlay</span>‚Äù
  588.             </span>
  589.           </b>
  590.               </p>
  591.               <div class="equation-contents">
  592.                 <div>
  593.                   <img src="../images/math/layer-mode-overlay.png" />
  594.                 </div>
  595.               </div>
  596.             </div>
  597.             <br class="equation-break" />
  598.           </dd>
  599.           <dt>
  600.             <span class="term">Dodge</span>
  601.           </dt>
  602.           <dd>
  603.             <a id="id2601380" class="indexterm"></a>
  604.             <a id="id2601392" class="indexterm"></a>
  605.             <div class="figure">
  606.               <a id="id2601401"></a>
  607.               <p class="title">
  608.                 <b>Figure¬†8.17.¬†
  609.             <span lang="en" xml:lang="en">
  610.               Example for layer mode ‚Äú<span class="quote">Dodge</span>‚Äù
  611.             </span>
  612.           </b>
  613.               </p>
  614.               <div class="figure-contents">
  615.                 <div class="mediaobject">
  616.                   <img src="../images/using/layer-mode-dodge-mask1.jpg" alt="Example for layer mode Dodge" />
  617.                   <div class="caption">
  618.                     <p>
  619.                 Mask 1 is used as upper layer with 100% opacity.
  620.               </p>
  621.                   </div>
  622.                 </div>
  623.                 <div class="mediaobject">
  624.                   <img src="../images/using/layer-mode-dodge-mask2.jpg" alt="Example for layer mode Dodge" />
  625.                   <div class="caption">
  626.                     <p>
  627.                 Mask 2 is used as upper layer with 100% opacity.
  628.               </p>
  629.                   </div>
  630.                 </div>
  631.               </div>
  632.             </div>
  633.             <br class="figure-break" />
  634.             <p>
  635.           <span class="guilabel">Dodge</span>
  636.           mode multiplies the pixel value of the lower layer by 256, then
  637.           divides that by the inverse of the pixel value of the top layer. The
  638.           resulting image is usually lighter, but some colors may be inverted.
  639.         </p>
  640.             <p>
  641.           In photography, dodging is a technique used in a darkroom to
  642.           increase the exposure in particular areas of the image. This brings
  643.           out details in the shadows. When used for this purpose, dodge may
  644.           work best on Grayscale images and with a painting tool, rather than
  645.           as a layer mode.
  646.         </p>
  647.             <p>The equation is:</p>
  648.             <div class="equation">
  649.               <a id="id2601495"></a>
  650.               <p class="title">
  651.                 <b>Equation¬†8.7.¬†
  652.             <span lang="en" xml:lang="en">
  653.               Equation for layer mode ‚Äú<span class="quote">Dodge</span>‚Äù
  654.             </span>
  655.           </b>
  656.               </p>
  657.               <div class="equation-contents">
  658.                 <div>
  659.                   <img src="../images/math/layer-mode-dodge.png" />
  660.                 </div>
  661.               </div>
  662.             </div>
  663.             <br class="equation-break" />
  664.           </dd>
  665.           <dt>
  666.             <span class="term">Burn</span>
  667.           </dt>
  668.           <dd>
  669.             <a id="id2601533" class="indexterm"></a>
  670.             <a id="id2601546" class="indexterm"></a>
  671.             <div class="figure">
  672.               <a id="id2601554"></a>
  673.               <p class="title">
  674.                 <b>Figure¬†8.18.¬†
  675.             <span lang="en" xml:lang="en">
  676.               Example for layer mode ‚Äú<span class="quote">Burn</span>‚Äù
  677.             </span>
  678.           </b>
  679.               </p>
  680.               <div class="figure-contents">
  681.                 <div class="mediaobject">
  682.                   <img src="../images/using/layer-mode-burn-mask1.jpg" alt="Example for layer mode Burn" />
  683.                   <div class="caption">
  684.                     <p>
  685.                 Mask 1 is used as upper layer with 100% opacity.
  686.               </p>
  687.                   </div>
  688.                 </div>
  689.                 <div class="mediaobject">
  690.                   <img src="../images/using/layer-mode-burn-mask2.jpg" alt="Example for layer mode Burn" />
  691.                   <div class="caption">
  692.                     <p>
  693.                 Mask 2 is used as upper layer with 100% opacity.
  694.               </p>
  695.                   </div>
  696.                 </div>
  697.               </div>
  698.             </div>
  699.             <br class="figure-break" />
  700.             <p>
  701.           <span class="guilabel">Burn</span>
  702.           mode inverts the pixel value of the lower layer, multiplies it by
  703.           256, divides that by one plus the pixel value of the upper layer,
  704.           then inverts the result. It tends to make the image darker, somewhat
  705.           similar to ‚Äú<span class="quote">Multiply</span>‚Äù mode.
  706.         </p>
  707.             <p>
  708.           In photography, burning is a technique used in a darkroom to
  709.           decrease the exposure in particular areas of the image. This brings
  710.           out details in the highlights. When used for this purpose, burn may
  711.           work best on Grayscale images and with a painting tool, rather than
  712.           as a layer mode.
  713.         </p>
  714.             <p>The equation is:</p>
  715.             <div class="equation">
  716.               <a id="id2601652"></a>
  717.               <p class="title">
  718.                 <b>Equation¬†8.8.¬†
  719.             <span lang="en" xml:lang="en">
  720.               Equation for layer mode ‚Äú<span class="quote">Burn</span>‚Äù
  721.             </span>
  722.           </b>
  723.               </p>
  724.               <div class="equation-contents">
  725.                 <div>
  726.                   <img src="../images/math/layer-mode-burn.png" />
  727.                 </div>
  728.               </div>
  729.             </div>
  730.             <br class="equation-break" />
  731.           </dd>
  732.           <dt>
  733.             <span class="term">Hard light</span>
  734.           </dt>
  735.           <dd>
  736.             <a id="id2601690" class="indexterm"></a>
  737.             <a id="id2601703" class="indexterm"></a>
  738.             <div class="figure">
  739.               <a id="id2601711"></a>
  740.               <p class="title">
  741.                 <b>Figure¬†8.19.¬†
  742.             <span lang="en" xml:lang="en">
  743.               Example for layer mode ‚Äú<span class="quote">Hard light</span>‚Äù
  744.             </span>
  745.           </b>
  746.               </p>
  747.               <div class="figure-contents">
  748.                 <div class="mediaobject">
  749.                   <img src="../images/using/layer-mode-hard-light-mask1.jpg" alt="Example for layer mode Hard light" />
  750.                   <div class="caption">
  751.                     <p>
  752.                 Mask 1 is used as upper layer with 100% opacity.
  753.               </p>
  754.                   </div>
  755.                 </div>
  756.                 <div class="mediaobject">
  757.                   <img src="../images/using/layer-mode-hard-light-mask2.jpg" alt="Example for layer mode Hard light" />
  758.                   <div class="caption">
  759.                     <p>
  760.                 Mask 2 is used as upper layer with 100% opacity.
  761.               </p>
  762.                   </div>
  763.                 </div>
  764.               </div>
  765.             </div>
  766.             <br class="figure-break" />
  767.             <p>
  768.           <span class="guilabel">Hard light</span>
  769.           mode is rather complicated because the equation consists of two
  770.           parts, one for darker colors and one for brighter colors. If the
  771.           pixel color of the upper layer is greater than 128, the layers are
  772.           combined according to the first formula shown below. Otherwise, the
  773.           pixel values of the upper and lower layers are multiplied together
  774.           and multiplied by two, then divided by 256. You might use this mode
  775.           to combine two photographs and obtain bright colors and sharp edges.
  776.         </p>
  777.             <p>The equation is complex and different according to
  778.           the value >128 or ‚â§128 :</p>
  779.             <div class="equation">
  780.               <a id="id2601803"></a>
  781.               <p class="title">
  782.                 <b>Equation¬†8.9.¬†
  783.             <span lang="en" xml:lang="en">
  784.               Equation for layer mode ‚Äú<span class="quote">Hard light</span>‚Äù, M > 128
  785.             </span>
  786.           </b>
  787.               </p>
  788.               <div class="equation-contents">
  789.                 <div>
  790.                   <img src="../images/math/layer-mode-hard-light1.png" />
  791.                 </div>
  792.               </div>
  793.             </div>
  794.             <br class="equation-break" />
  795.             <div class="equation">
  796.               <a id="id2601833"></a>
  797.               <p class="title">
  798.                 <b>Equation¬†8.10.¬†
  799.             <span lang="en" xml:lang="en">
  800.               Equation for layer mode ‚Äú<span class="quote">Hard light</span>‚Äù, M ‚⧠128
  801.             </span>
  802.           </b>
  803.               </p>
  804.               <div class="equation-contents">
  805.                 <div>
  806.                   <img src="../images/math/layer-mode-hard-light2.png" />
  807.                 </div>
  808.               </div>
  809.             </div>
  810.             <br class="equation-break" />
  811.           </dd>
  812.           <dt>
  813.             <span class="term">Soft light</span>
  814.           </dt>
  815.           <dd>
  816.             <a id="id2601872" class="indexterm"></a>
  817.             <a id="id2601885" class="indexterm"></a>
  818.             <div class="figure">
  819.               <a id="id2601893"></a>
  820.               <p class="title">
  821.                 <b>Figure¬†8.20.¬†
  822.             <span lang="en" xml:lang="en">
  823.               Example for layer mode ‚Äú<span class="quote">Soft light</span>‚Äù
  824.             </span>
  825.           </b>
  826.               </p>
  827.               <div class="figure-contents">
  828.                 <div class="mediaobject">
  829.                   <img src="../images/using/layer-mode-soft-light-mask1.jpg" alt="Example for layer mode Soft light" />
  830.                   <div class="caption">
  831.                     <p>
  832.                 Mask 1 is used as upper layer with 100% opacity.
  833.               </p>
  834.                   </div>
  835.                 </div>
  836.                 <div class="mediaobject">
  837.                   <img src="../images/using/layer-mode-soft-light-mask2.jpg" alt="Example for layer mode Soft light" />
  838.                   <div class="caption">
  839.                     <p>
  840.                 Mask 2 is used as upper layer with 100% opacity.
  841.               </p>
  842.                   </div>
  843.                 </div>
  844.               </div>
  845.             </div>
  846.             <br class="figure-break" />
  847.             <p>
  848.           <span class="guilabel">Soft light</span> is not related to
  849.           ‚Äú<span class="quote">Hard light</span>‚Äù in anything but the name, but it
  850.           does tend to make the edges softer and the colors not so
  851.           bright. It is similar to ‚Äú<span class="quote">Overlay</span>‚Äù mode. In some
  852.           versions of <acronym class="acronym">GIMP</acronym>, ‚Äú<span class="quote">Overlay</span>‚Äù
  853.           mode and ‚Äú<span class="quote">Soft light</span>‚Äù mode are identical.
  854.         </p>
  855.             <p>The equation is complicated. It needs Rs, the
  856.           result of Screen mode :
  857.         </p>
  858.             <div class="equation">
  859.               <a id="id2601995"></a>
  860.               <p class="title">
  861.                 <b>Equation¬†8.11.¬†
  862.               <span lang="en" xml:lang="en">
  863.                 Equation for layer mode ‚Äú<span class="quote">Screen</span>‚Äù
  864.               </span>
  865.             </b>
  866.               </p>
  867.               <div class="equation-contents">
  868.                 <div>
  869.                   <img src="../images/math/layer-mode-soft-light1.png" />
  870.                 </div>
  871.               </div>
  872.             </div>
  873.             <br class="equation-break" />
  874.             <div class="equation">
  875.               <a id="id2602022"></a>
  876.               <p class="title">
  877.                 <b>Equation¬†8.12.¬†
  878.               <span lang="en" xml:lang="en">
  879.                 Equation for layer mode ‚Äú<span class="quote">Soft light</span>‚Äù
  880.               </span>
  881.             </b>
  882.               </p>
  883.               <div class="equation-contents">
  884.                 <div>
  885.                   <img src="../images/math/layer-mode-soft-light2.png" />
  886.                 </div>
  887.               </div>
  888.             </div>
  889.             <br class="equation-break" />
  890.           </dd>
  891.           <dt>
  892.             <span class="term">Grain extract</span>
  893.           </dt>
  894.           <dd>
  895.             <a id="id2602061" class="indexterm"></a>
  896.             <a id="id2602074" class="indexterm"></a>
  897.             <div class="figure">
  898.               <a id="id2602082"></a>
  899.               <p class="title">
  900.                 <b>Figure¬†8.21.¬†
  901.             <span lang="en" xml:lang="en">
  902.               Example for layer mode ‚Äú<span class="quote">Grain extract</span>‚Äù
  903.             </span>
  904.           </b>
  905.               </p>
  906.               <div class="figure-contents">
  907.                 <div class="mediaobject">
  908.                   <img src="../images/using/layer-mode-grain-extract-mask1.jpg" alt="Example for layer mode Grain extract" />
  909.                   <div class="caption">
  910.                     <p>
  911.                 Mask 1 is used as upper layer with 100% opacity.
  912.               </p>
  913.                   </div>
  914.                 </div>
  915.                 <div class="mediaobject">
  916.                   <img src="../images/using/layer-mode-grain-extract-mask2.jpg" alt="Example for layer mode Grain extract" />
  917.                   <div class="caption">
  918.                     <p>
  919.                 Mask 2 is used as upper layer with 100% opacity.
  920.               </p>
  921.                   </div>
  922.                 </div>
  923.               </div>
  924.             </div>
  925.             <br class="figure-break" />
  926.             <p>
  927.           <span class="guilabel">Grain extract</span>
  928.           mode is supposed to extract the ‚Äú<span class="quote">film grain</span>‚Äù
  929.           from a layer to produce a new layer that is pure grain, but it can
  930.           also be useful for giving images an embossed appearance. It
  931.           subtracts the pixel value of the upper layer from that of the lower
  932.           layer and adds 128.
  933.         </p>
  934.             <p>The equation is:</p>
  935.             <div class="equation">
  936.               <a id="id2602170"></a>
  937.               <p class="title">
  938.                 <b>Equation¬†8.13.¬†
  939.             <span lang="en" xml:lang="en">
  940.               Equation for layer mode ‚Äú<span class="quote">Grain extract</span>‚Äù
  941.             </span>
  942.           </b>
  943.               </p>
  944.               <div class="equation-contents">
  945.                 <div>
  946.                   <img src="../images/math/layer-mode-grainextract.png" />
  947.                 </div>
  948.               </div>
  949.             </div>
  950.             <br class="equation-break" />
  951.           </dd>
  952.           <dt>
  953.             <span class="term">Grain merge</span>
  954.           </dt>
  955.           <dd>
  956.             <a id="id2602208" class="indexterm"></a>
  957.             <a id="id2602220" class="indexterm"></a>
  958.             <div class="figure">
  959.               <a id="id2602228"></a>
  960.               <p class="title">
  961.                 <b>Figure¬†8.22.¬†
  962.             <span lang="en" xml:lang="en">
  963.               Example for layer mode ‚Äú<span class="quote">Grain merge</span>‚Äù
  964.             </span>
  965.           </b>
  966.               </p>
  967.               <div class="figure-contents">
  968.                 <div class="mediaobject">
  969.                   <img src="../images/using/layer-mode-grain-merge-mask1.jpg" alt="Example for layer mode Grain merge" />
  970.                   <div class="caption">
  971.                     <p>
  972.                 Mask 1 is used as upper layer with 100% opacity.
  973.               </p>
  974.                   </div>
  975.                 </div>
  976.                 <div class="mediaobject">
  977.                   <img src="../images/using/layer-mode-grain-merge-mask2.jpg" alt="Example for layer mode Grain merge" />
  978.                   <div class="caption">
  979.                     <p>
  980.                 Mask 2 is used as upper layer with 100% opacity.
  981.               </p>
  982.                   </div>
  983.                 </div>
  984.               </div>
  985.             </div>
  986.             <br class="figure-break" />
  987.             <p>
  988.           <span class="guilabel">Grain merge</span> mode merges a grain layer
  989.           (possibly one created from the ‚Äú<span class="quote">Grain extract</span>‚Äù
  990.           mode) into the current layer, leaving a grainy version of the
  991.           original layer. It does just the opposite of
  992.           ‚Äú<span class="quote">Grain extract</span>‚Äù. It adds the pixel values of the
  993.           upper and lower layers together and subtracts 128.
  994.         </p>
  995.             <p>The equation is:</p>
  996.             <div class="equation">
  997.               <a id="id2602320"></a>
  998.               <p class="title">
  999.                 <b>Equation¬†8.14.¬†
  1000.             <span lang="en" xml:lang="en">
  1001.               Equation for layer mode ‚Äú<span class="quote">Grain merge</span>‚Äù
  1002.             </span>
  1003.           </b>
  1004.               </p>
  1005.               <div class="equation-contents">
  1006.                 <div>
  1007.                   <img src="../images/math/layer-mode-grainmerge.png" />
  1008.                 </div>
  1009.               </div>
  1010.             </div>
  1011.             <br class="equation-break" />
  1012.           </dd>
  1013.           <dt>
  1014.             <span class="term">Difference</span>
  1015.           </dt>
  1016.           <dd>
  1017.             <a id="id2602358" class="indexterm"></a>
  1018.             <a id="id2602370" class="indexterm"></a>
  1019.             <div class="figure">
  1020.               <a id="id2602378"></a>
  1021.               <p class="title">
  1022.                 <b>Figure¬†8.23.¬†
  1023.             <span lang="en" xml:lang="en">
  1024.               Example for layer mode ‚Äú<span class="quote">Difference</span>‚Äù
  1025.             </span>
  1026.           </b>
  1027.               </p>
  1028.               <div class="figure-contents">
  1029.                 <div class="mediaobject">
  1030.                   <img src="../images/using/layer-mode-difference-mask1.jpg" alt="Example for layer mode Difference" />
  1031.                   <div class="caption">
  1032.                     <p>
  1033.                 Mask 1 is used as upper layer with 100% opacity.
  1034.               </p>
  1035.                   </div>
  1036.                 </div>
  1037.                 <div class="mediaobject">
  1038.                   <img src="../images/using/layer-mode-difference-mask2.jpg" alt="Example for layer mode Difference" />
  1039.                   <div class="caption">
  1040.                     <p>
  1041.                 Mask 2 is used as upper layer with 100% opacity.
  1042.               </p>
  1043.                   </div>
  1044.                 </div>
  1045.               </div>
  1046.             </div>
  1047.             <br class="figure-break" />
  1048.             <p>
  1049.           <span class="guilabel">Difference</span>
  1050.           mode subtracts the pixel value of the upper layer from that of the
  1051.           lower layer and then takes the absolute value of the result. No
  1052.           matter what the original two layers look like, the result looks
  1053.           rather odd. You can use it to invert elements of an image.
  1054.         </p>
  1055.             <p>The equation is:</p>
  1056.             <div class="equation">
  1057.               <a id="id2602463"></a>
  1058.               <p class="title">
  1059.                 <b>Equation¬†8.15.¬†
  1060.             <span lang="en" xml:lang="en">
  1061.               Equation for layer mode ‚Äú<span class="quote">Difference</span>‚Äù
  1062.             </span>
  1063.           </b>
  1064.               </p>
  1065.               <div class="equation-contents">
  1066.                 <div>
  1067.                   <img src="../images/math/layer-mode-difference.png" />
  1068.                 </div>
  1069.               </div>
  1070.             </div>
  1071.             <br class="equation-break" />
  1072.             <p>
  1073.           The mode is commutative; the order of the two layers doesn't matter.
  1074.         </p>
  1075.           </dd>
  1076.           <dt>
  1077.             <span class="term">Addition</span>
  1078.           </dt>
  1079.           <dd>
  1080.             <a id="id2602508" class="indexterm"></a>
  1081.             <a id="id2602520" class="indexterm"></a>
  1082.             <div class="figure">
  1083.               <a id="id2602528"></a>
  1084.               <p class="title">
  1085.                 <b>Figure¬†8.24.¬†
  1086.             <span lang="en" xml:lang="en">
  1087.               Example for layer mode ‚Äú<span class="quote">Addition</span>‚Äù
  1088.             </span>
  1089.           </b>
  1090.               </p>
  1091.               <div class="figure-contents">
  1092.                 <div class="mediaobject">
  1093.                   <img src="../images/using/layer-mode-addition-mask1.jpg" alt="Example for layer mode Addition" />
  1094.                   <div class="caption">
  1095.                     <p>
  1096.                 Mask 1 is used as upper layer with 100% opacity.
  1097.               </p>
  1098.                   </div>
  1099.                 </div>
  1100.                 <div class="mediaobject">
  1101.                   <img src="../images/using/layer-mode-addition-mask2.jpg" alt="Example for layer mode Addition" />
  1102.                   <div class="caption">
  1103.                     <p>
  1104.                 Mask 2 is used as upper layer with 100% opacity.
  1105.               </p>
  1106.                   </div>
  1107.                 </div>
  1108.               </div>
  1109.             </div>
  1110.             <br class="figure-break" />
  1111.             <p>
  1112.           <span class="guilabel">Addition</span>
  1113.           mode is very simple. The pixel values of the upper and lower layers
  1114.           are added to each other. The resulting image is usually lighter. The
  1115.           equation can result in color values greater than 255, so some of the
  1116.           light colors may be set to the maximum value of 255.
  1117.         </p>
  1118.             <p>The equation is:</p>
  1119.             <div class="equation">
  1120.               <a id="id2602614"></a>
  1121.               <p class="title">
  1122.                 <b>Equation¬†8.16.¬†
  1123.             <span lang="en" xml:lang="en">
  1124.               Equation for layer mode ‚Äú<span class="quote">Addition</span>‚Äù
  1125.             </span>
  1126.           </b>
  1127.               </p>
  1128.               <div class="equation-contents">
  1129.                 <div>
  1130.                   <img src="../images/math/layer-mode-addition.png" />
  1131.                 </div>
  1132.               </div>
  1133.             </div>
  1134.             <br class="equation-break" />
  1135.             <p>
  1136.           The mode is commutative; the order of the two layers doesn't matter.
  1137.         </p>
  1138.           </dd>
  1139.           <dt>
  1140.             <span class="term">Subtract</span>
  1141.           </dt>
  1142.           <dd>
  1143.             <a id="id2602658" class="indexterm"></a>
  1144.             <a id="id2602670" class="indexterm"></a>
  1145.             <div class="figure">
  1146.               <a id="id2602678"></a>
  1147.               <p class="title">
  1148.                 <b>Figure¬†8.25.¬†
  1149.             <span lang="en" xml:lang="en">
  1150.               Example for layer mode ‚Äú<span class="quote">Subtract</span>‚Äù
  1151.             </span>
  1152.           </b>
  1153.               </p>
  1154.               <div class="figure-contents">
  1155.                 <div class="mediaobject">
  1156.                   <img src="../images/using/layer-mode-subtract-mask1.jpg" alt="Example for layer mode Subtract" />
  1157.                   <div class="caption">
  1158.                     <p>
  1159.                 Mask 1 is used as upper layer with 100% opacity.
  1160.               </p>
  1161.                   </div>
  1162.                 </div>
  1163.                 <div class="mediaobject">
  1164.                   <img src="../images/using/layer-mode-subtract-mask2.jpg" alt="Example for layer mode Subtract" />
  1165.                   <div class="caption">
  1166.                     <p>
  1167.                 Mask 2 is used as upper layer with 100% opacity.
  1168.               </p>
  1169.                   </div>
  1170.                 </div>
  1171.               </div>
  1172.             </div>
  1173.             <br class="figure-break" />
  1174.             <p>
  1175.           <span class="guilabel">Subtract</span>
  1176.           mode subtracts the pixel values of the upper layer from the pixel
  1177.           values of the lower layer. The resulting image is normally darker.
  1178.           You might get a lot of black or near-black in the resulting image.
  1179.           The equation can result in negative color values, so some of the
  1180.           dark colors may be set to the minimum value of 0.
  1181.         </p>
  1182.             <p>The equation is:</p>
  1183.             <div class="equation">
  1184.               <a id="id2602765"></a>
  1185.               <p class="title">
  1186.                 <b>Equation¬†8.17.¬†
  1187.             <span lang="en" xml:lang="en">
  1188.               Equation for layer mode ‚Äú<span class="quote">Subtraction</span>‚Äù
  1189.             </span>
  1190.           </b>
  1191.               </p>
  1192.               <div class="equation-contents">
  1193.                 <div>
  1194.                   <img src="../images/math/layer-mode-subtract.png" />
  1195.                 </div>
  1196.               </div>
  1197.             </div>
  1198.             <br class="equation-break" />
  1199.           </dd>
  1200.           <dt>
  1201.             <span class="term">Darken only</span>
  1202.           </dt>
  1203.           <dd>
  1204.             <a id="id2602802" class="indexterm"></a>
  1205.             <a id="id2602815" class="indexterm"></a>
  1206.             <div class="figure">
  1207.               <a id="id2602823"></a>
  1208.               <p class="title">
  1209.                 <b>Figure¬†8.26.¬†
  1210.             <span lang="en" xml:lang="en">
  1211.               Example for layer mode ‚Äú<span class="quote">Darken only</span>‚Äù
  1212.             </span>
  1213.           </b>
  1214.               </p>
  1215.               <div class="figure-contents">
  1216.                 <div class="mediaobject">
  1217.                   <img src="../images/using/layer-mode-darken-only-mask1.jpg" alt="Example for layer mode Darken only" />
  1218.                   <div class="caption">
  1219.                     <p>
  1220.                 Mask 1 is used as upper layer with 100% opacity.
  1221.               </p>
  1222.                   </div>
  1223.                 </div>
  1224.                 <div class="mediaobject">
  1225.                   <img src="../images/using/layer-mode-darken-only-mask2.jpg" alt="Example for layer mode Darken only" />
  1226.                   <div class="caption">
  1227.                     <p>
  1228.                 Mask 2 is used as upper layer with 100% opacity.
  1229.               </p>
  1230.                   </div>
  1231.                 </div>
  1232.               </div>
  1233.             </div>
  1234.             <br class="figure-break" />
  1235.             <p>
  1236.           <span class="guimenuitem">Darken only</span>
  1237.           mode compares each component of each pixel in the upper layer with
  1238.           the corresponding one in the lower layer and uses the smaller value
  1239.           in the resulting image. Completely white layers have no effect on
  1240.           the final image and completely black layers result in a black image.
  1241.         </p>
  1242.             <p>The equation is:</p>
  1243.             <div class="equation">
  1244.               <a id="id2602908"></a>
  1245.               <p class="title">
  1246.                 <b>Equation¬†8.18.¬†
  1247.             <span lang="en" xml:lang="en">
  1248.               Equation for layer mode ‚Äú<span class="quote">Darken only</span>‚Äù
  1249.             </span>
  1250.           </b>
  1251.               </p>
  1252.               <div class="equation-contents">
  1253.                 <div>
  1254.                   <img src="../images/math/layer-mode-darken.png" />
  1255.                 </div>
  1256.               </div>
  1257.             </div>
  1258.             <br class="equation-break" />
  1259.             <p>
  1260.           The mode is commutative; the order of the two layers doesn't matter.
  1261.         </p>
  1262.           </dd>
  1263.           <dt>
  1264.             <span class="term">Lighten only</span>
  1265.           </dt>
  1266.           <dd>
  1267.             <a id="id2602952" class="indexterm"></a>
  1268.             <a id="id2602965" class="indexterm"></a>
  1269.             <div class="figure">
  1270.               <a id="id2602973"></a>
  1271.               <p class="title">
  1272.                 <b>Figure¬†8.27.¬†
  1273.             <span lang="en" xml:lang="en">
  1274.               Example for layer mode ‚Äú<span class="quote">Lighten only</span>‚Äù
  1275.             </span>
  1276.           </b>
  1277.               </p>
  1278.               <div class="figure-contents">
  1279.                 <div class="mediaobject">
  1280.                   <img src="../images/using/layer-mode-lighten-only-mask1.jpg" alt="Example for layer mode Lighten only" />
  1281.                   <div class="caption">
  1282.                     <p>
  1283.                 Mask 1 is used as upper layer with 100% opacity.
  1284.               </p>
  1285.                   </div>
  1286.                 </div>
  1287.                 <div class="mediaobject">
  1288.                   <img src="../images/using/layer-mode-lighten-only-mask2.jpg" alt="Example for layer mode Lighten only" />
  1289.                   <div class="caption">
  1290.                     <p>
  1291.                 Mask 2 is used as upper layer with 100% opacity.
  1292.               </p>
  1293.                   </div>
  1294.                 </div>
  1295.               </div>
  1296.             </div>
  1297.             <br class="figure-break" />
  1298.             <p>
  1299.           <span class="guimenuitem">Lighten only</span>
  1300.           mode compares each component of each pixel in the upper layer with
  1301.           the corresponding one in the lower layer and uses the larger value
  1302.           in the resulting image. Completely black layers have no effect on
  1303.           the final image and completely white layers result in a white image.
  1304.         </p>
  1305.             <p>The equation is:</p>
  1306.             <div class="equation">
  1307.               <a id="id2603058"></a>
  1308.               <p class="title">
  1309.                 <b>Equation¬†8.19.¬†
  1310.             <span lang="en" xml:lang="en">
  1311.               Equation for layer mode ‚Äú<span class="quote">Lighten only</span>‚Äù
  1312.             </span>
  1313.           </b>
  1314.               </p>
  1315.               <div class="equation-contents">
  1316.                 <div>
  1317.                   <img src="../images/math/layer-mode-lighten.png" />
  1318.                 </div>
  1319.               </div>
  1320.             </div>
  1321.             <br class="equation-break" />
  1322.             <p>
  1323.           The mode is commutative; the order of the two layers doesn't matter.
  1324.         </p>
  1325.           </dd>
  1326.           <dt>
  1327.             <span class="term">Hue</span>
  1328.           </dt>
  1329.           <dd>
  1330.             <a id="id2603103" class="indexterm"></a>
  1331.             <a id="id2603115" class="indexterm"></a>
  1332.             <div class="figure">
  1333.               <a id="id2603123"></a>
  1334.               <p class="title">
  1335.                 <b>Figure¬†8.28.¬†
  1336.             <span lang="en" xml:lang="en">
  1337.               Example for layer mode ‚Äú<span class="quote">Hue</span>‚Äù
  1338.             </span>
  1339.           </b>
  1340.               </p>
  1341.               <div class="figure-contents">
  1342.                 <div class="mediaobject">
  1343.                   <img src="../images/using/layer-mode-hue-mask1.jpg" alt="Example for layer mode Hue" />
  1344.                   <div class="caption">
  1345.                     <p>
  1346.                 Mask 1 is used as upper layer with 100% opacity.
  1347.               </p>
  1348.                   </div>
  1349.                 </div>
  1350.                 <div class="mediaobject">
  1351.                   <img src="../images/using/layer-mode-hue-mask2.jpg" alt="Example for layer mode Hue" />
  1352.                   <div class="caption">
  1353.                     <p>
  1354.                 Mask 2 is used as upper layer with 100% opacity.
  1355.               </p>
  1356.                   </div>
  1357.                 </div>
  1358.               </div>
  1359.             </div>
  1360.             <br class="figure-break" />
  1361.             <p>
  1362.           <span class="guilabel">Hue</span>
  1363.           mode uses the hue of the upper layer and the saturation and value of
  1364.           the lower layer to form the resulting image. However, if the
  1365.           saturation of the upper layer is zero, the hue is taken from the
  1366.           lower layer, too.
  1367.         </p>
  1368.           </dd>
  1369.           <dt>
  1370.             <span class="term">Saturation</span>
  1371.           </dt>
  1372.           <dd>
  1373.             <a id="id2603214" class="indexterm"></a>
  1374.             <a id="id2603226" class="indexterm"></a>
  1375.             <div class="figure">
  1376.               <a id="id2603235"></a>
  1377.               <p class="title">
  1378.                 <b>Figure¬†8.29.¬†
  1379.             <span lang="en" xml:lang="en">
  1380.               Example for layer mode ‚Äú<span class="quote">Saturation</span>‚Äù
  1381.             </span>
  1382.           </b>
  1383.               </p>
  1384.               <div class="figure-contents">
  1385.                 <div class="mediaobject">
  1386.                   <img src="../images/using/layer-mode-saturation-mask1.jpg" alt="Example for layer mode Saturation" />
  1387.                   <div class="caption">
  1388.                     <p>
  1389.                 Mask 1 is used as upper layer with 100% opacity.
  1390.               </p>
  1391.                   </div>
  1392.                 </div>
  1393.                 <div class="mediaobject">
  1394.                   <img src="../images/using/layer-mode-saturation-mask2.jpg" alt="Example for layer mode Saturation" />
  1395.                   <div class="caption">
  1396.                     <p>
  1397.                 Mask 2 is used as upper layer with 100% opacity.
  1398.               </p>
  1399.                   </div>
  1400.                 </div>
  1401.               </div>
  1402.             </div>
  1403.             <br class="figure-break" />
  1404.             <p>
  1405.           <span class="guilabel">Saturation</span>
  1406.           mode uses the saturation of the upper layer and the hue and value of
  1407.           the lower layer to form the resulting image.
  1408.         </p>
  1409.           </dd>
  1410.           <dt>
  1411.             <span class="term">Color</span>
  1412.           </dt>
  1413.           <dd>
  1414.             <a id="id2603324" class="indexterm"></a>
  1415.             <a id="id2603336" class="indexterm"></a>
  1416.             <div class="figure">
  1417.               <a id="id2603344"></a>
  1418.               <p class="title">
  1419.                 <b>Figure¬†8.30.¬†
  1420.             <span lang="en" xml:lang="en">
  1421.               Example for layer mode ‚Äú<span class="quote">Color</span>‚Äù
  1422.             </span>
  1423.           </b>
  1424.               </p>
  1425.               <div class="figure-contents">
  1426.                 <div class="mediaobject">
  1427.                   <img src="../images/using/layer-mode-color-mask1.jpg" alt="Example for layer mode Color" />
  1428.                   <div class="caption">
  1429.                     <p>
  1430.                 Mask 1 is used as upper layer with 100% opacity.
  1431.               </p>
  1432.                   </div>
  1433.                 </div>
  1434.                 <div class="mediaobject">
  1435.                   <img src="../images/using/layer-mode-color-mask2.jpg" alt="Example for layer mode Color" />
  1436.                   <div class="caption">
  1437.                     <p>
  1438.                 Mask 2 is used as upper layer with 100% opacity.
  1439.               </p>
  1440.                   </div>
  1441.                 </div>
  1442.               </div>
  1443.             </div>
  1444.             <br class="figure-break" />
  1445.             <p>
  1446.           <span class="guilabel">Color</span>
  1447.           mode uses the hue and saturation of the upper layer and the value of
  1448.           the lower layer to form the resulting image.
  1449.         </p>
  1450.           </dd>
  1451.           <dt>
  1452.             <span class="term">Value</span>
  1453.           </dt>
  1454.           <dd>
  1455.             <a id="id2603433" class="indexterm"></a>
  1456.             <a id="id2603445" class="indexterm"></a>
  1457.             <div class="figure">
  1458.               <a id="id2603454"></a>
  1459.               <p class="title">
  1460.                 <b>Figure¬†8.31.¬†
  1461.             <span lang="en" xml:lang="en">
  1462.               Example for layer mode ‚Äú<span class="quote">Value</span>‚Äù
  1463.             </span>
  1464.           </b>
  1465.               </p>
  1466.               <div class="figure-contents">
  1467.                 <div class="mediaobject">
  1468.                   <img src="../images/using/layer-mode-value-mask1.jpg" alt="Example for layer mode Value" />
  1469.                   <div class="caption">
  1470.                     <p>
  1471.                 Mask 1 is used as upper layer with 100% opacity.
  1472.               </p>
  1473.                   </div>
  1474.                 </div>
  1475.                 <div class="mediaobject">
  1476.                   <img src="../images/using/layer-mode-value-mask2.jpg" alt="Example for layer mode Value" />
  1477.                   <div class="caption">
  1478.                     <p>
  1479.                 Mask 2 is used as upper layer with 100% opacity.
  1480.               </p>
  1481.                   </div>
  1482.                 </div>
  1483.               </div>
  1484.             </div>
  1485.             <br class="figure-break" />
  1486.             <p>
  1487.           <span class="guilabel">Value</span>
  1488.           mode uses the value of the upper layer and the saturation and hue of
  1489.           the lower layer to form the resulting image. You can use this mode
  1490.           to reveal details in dark and light areas of an image without
  1491.           changing the saturation.
  1492.         </p>
  1493.           </dd>
  1494.         </dl>
  1495.       </div>
  1496.       <p>
  1497.     Each layer in an image can have a different layer mode. (Of course, the
  1498.     layer mode of the bottom layer of an image has no effect.) The effects of
  1499.     these layer modes are cumulative. The image shown below has three layers.
  1500.     The top layer consists of Wilber surrounded by transparency and has a
  1501.     layer mode of ‚Äú<span class="quote">Difference</span>‚Äù.
  1502.     The second layer is solid light blue and has a layer mode of
  1503.     ‚Äú<span class="quote">Addition</span>‚Äù. The bottom layer is filled with the
  1504.     ‚Äú<span class="quote">Red Cubes</span>‚Äù pattern.
  1505.   </p>
  1506.       <div class="figure">
  1507.         <a id="id2603558"></a>
  1508.         <p class="title">
  1509.           <b>Figure¬†8.32.¬†
  1510.       <span lang="en" xml:lang="en">Multi layer example</span>
  1511.     </b>
  1512.         </p>
  1513.         <div class="figure-contents">
  1514.           <div class="mediaobject">
  1515.             <img src="../images/glossary/modes-multilayer.png" alt="Multi layer example" />
  1516.           </div>
  1517.         </div>
  1518.       </div>
  1519.       <br class="figure-break" />
  1520.       <p>
  1521.     <acronym class="acronym">GIMP</acronym>
  1522.     also has similar modes which are used for the painting tools. These are
  1523.     the same twenty-one modes as the layer modes, plus an additional two modes
  1524.     which are specific to the painting tools. You can set these modes from the
  1525.     <span class="guilabel">Mode</span>
  1526.     menu in the Tools option dialog. In the equations shown above, the layer
  1527.     you are painting on is the ‚Äú<span class="quote">lower layer</span>‚Äù
  1528.     and the pixels painted by the tool are the ‚Äú<span class="quote">upper layer</span>‚Äù.
  1529.     Naturally, you do not need more than one layer in the image to use these
  1530.     modes, since they only operate on the current layer and the selected
  1531.     painting tool. The two additional painting modes are described here.
  1532.   </p>
  1533.       <div class="tip" style="margin-left: 0.5in; margin-right: 0.5in;">
  1534.         <table border="0" summary="Tip">
  1535.           <tr>
  1536.             <td rowspan="2" align="center" valign="top" width="25">
  1537.               <img alt="[Tip]" src="../images/tip.png" />
  1538.             </td>
  1539.             <th align="left">Tip</th>
  1540.           </tr>
  1541.           <tr>
  1542.             <td align="left" valign="top">
  1543.               <p>
  1544.       There are two more layer modes, but these are available only for
  1545.       painting tools. See <a class="xref" href="gimp-tools-paint.html#gimp-tool-painting-modes" title="Paint Modes">
  1546.         <span lang="en" xml:lang="en">Paint Modes</span>
  1547.       </a>
  1548.       for detailed information.
  1549.     </p>
  1550.             </td>
  1551.           </tr>
  1552.         </table>
  1553.       </div>
  1554.       <div class="footnotes">
  1555.         <br />
  1556.         <hr width="100" align="left" />
  1557.         <div class="footnote">
  1558.           <p><sup>[<a id="ftn.gimp-layer-mode-bug162395" href="#gimp-layer-mode-bug162395" class="para">2</a>] </sup>
  1559.               The equation is the *theoretical* equation. Due to <a class="ulink" href="http://bugzilla.gnome.org/show_bug.cgi?id=162395" target="_top"> Bug
  1560.               #162395 </a>, the actual equation is equivalent to Soft
  1561.               light. It is difficult to fix this bug without changing the
  1562.               appearance of existing images.
  1563.             </p>
  1564.         </div>
  1565.       </div>
  1566.     </div>
  1567.     <div class="navfooter">
  1568.       <hr />
  1569.       <table width="100%" summary="Navigation footer">
  1570.         <tr>
  1571.           <td width="40%" align="left"><a accesskey="p" href="gimp-image-combining.html"><img src="../images/prev.png" alt="Prev" /></a>¬†</td>
  1572.           <td width="20%" align="center">
  1573.             <a accesskey="u" href="gimp-image-combining.html">
  1574.               <img src="../images/up.png" alt="Up" />
  1575.             </a>
  1576.           </td>
  1577.           <td width="40%" align="right">¬†<a accesskey="n" href="gimp-using-layers.html"><img src="../images/next.png" alt="Next" /></a></td>
  1578.         </tr>
  1579.         <tr>
  1580.           <td width="40%" align="left" valign="top"><a accesskey="p" href="gimp-image-combining.html">Chapter¬†8.¬†
  1581.         <span lang="en" xml:lang="en">Combining Images</span>
  1582.       </a>¬†</td>
  1583.           <td width="20%" align="center">
  1584.             <a accesskey="h" href="index.html">
  1585.               <img src="../images/home.png" alt="Home" />
  1586.             </a>
  1587.           </td>
  1588.           <td width="40%" align="right" valign="top">¬†<a accesskey="n" href="gimp-using-layers.html">3.¬†
  1589.     <span lang="en" xml:lang="en">Creating New Layers</span>
  1590.   </a></td>
  1591.         </tr>
  1592.       </table>
  1593.     </div>
  1594.   </body>
  1595. </html>
  1596.