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">
5
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6
<title>6.3. Gradient Tool</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
<meta name="generator" content="DocBook XSL Stylesheets V1.66.1" />
10
<link rel="start" href="index.html" title=" " />
11
<link rel="up" href="ch03s06.html" title="6. Other" />
12
<link rel="prev" href="ch03s06s02.html" title="6.2. Bucket Fill" />
13
<link rel="next" href="ch03s06s04.html" title="6.4. Color Picker Tool" />
16
<div xmlns="" class="navheader">
17
<table width="100%" summary="Navigation header">
19
<th colspan="3" align="center" id="chaptername">6.3. Gradient Tool</th>
22
<td width="20%" align="left"><a accesskey="p" href="ch03s06s02.html">Prev</a> </td>
23
<th width="60%" align="center" id="sectionname">6.3. Gradient Tool</th>
24
<td width="20%" align="right"> <a accesskey="n" href="ch03s06s04.html">Next</a></td>
29
<div class="sect2" lang="en" xml:lang="en">
30
<div class="titlepage">
33
<h3 class="title"><a id="gimp-tool-blend"></a>6.3. Gradient Tool</h3>
37
<a id="id3330994" class="indexterm"></a>
38
<div class="mediaobject">
39
<img src="../images/toolbox/toolbox-gradient.png" />
42
This tool fills the selected area with a gradient blend of the
43
foreground and background colors by default, but there are many
44
options. To make a blend, drag the
45
cursor in the direction you want the gradient to go, and release
46
the mouse button when you feel you have the right position and
47
size of your blend. The softness of the blend depends on how far
48
you drag the cursor. The shorter the drag distance, the sharper it
52
There are an astonishing number of things you can do with this
53
tool, and the possibilities may seem a bit overwhelming at first.
54
The two most important options you have are the Gradient and the
55
Shape. Clicking the Gradient button in the tool options brings up
56
a Gradient Select window, allowing you to choose from among a
57
variety of gradients supplied with Gimp; you can also construct
58
and save custom gradients.
61
If the gradient appears in black-and-white, then it will actually
62
use the foreground and background colors instead (and you will see
63
it colored that way in the tool options area). If it appears in
64
color, then it will be used as is.
67
For Shape, there are 11 options: Linear, Bilinear, Radial,
68
Square, Conical (symmetric), Conical (asymmetric), Shapeburst
69
(angular), Shapeburst (spherical), Shapeburst (dimpled), Spiral
70
(clockwise), and Spiral (counterclockwise); these are described in
71
detail below. The Shapeburst options are the most interesting:
72
they cause the gradient to follow the shape of the selection
73
boundary, no matter how twisty it is. Unlike the other shapes,
74
Shapeburst gradients are not affected by the length or direction
75
of the line you draw: for them as well as every other type of
76
gradient you are required to click inside the selection and move
77
the mouse, but a Shapeburst appears the same no matter where you
78
click or how you move.
80
<div class="tip" style="margin-left: 0.5in; margin-right: 0.5in;">
81
<table border="0" summary="Tip">
83
<td rowspan="2" align="center" valign="top" width="25">
84
<img alt="[Tip]" src="../images/tip.png" />
86
<th align="left">Tip</th>
89
<td colspan="2" align="left" valign="top">
91
Check out the Difference option in the Mode menu, where doing the
92
same thing (even with full opacity) will result in fantastic
93
swirling patterns, changing and adding every time you drag the
100
<div class="simplesect" lang="en" xml:lang="en">
101
<div class="titlepage">
104
<h4 class="title"><a id="id3331845"></a>Activate Tool</h4>
108
<div class="itemizedlist">
112
The Blend Tool can be called in the following
113
order, from the image-menu:
114
<span class="guimenuitem"><span class="accel">T</span>ools</span>/
115
<span class="guimenuitem"><span class="accel">P</span>aint Tools</span>/
116
<span class="guimenuitem">Blen<span class="accel">d</span></span>.
121
The Tool can also be called by clicking the tool icon:
122
<span class="guiicon">
123
<span class="inlinemediaobject"><img src="../images/toolbox/gradient.png" /></span>
130
<div class="simplesect" lang="en" xml:lang="en">
131
<div class="titlepage">
134
<h4 class="title"><a id="id3331310"></a>Key modifiers (Defaults)</h4>
138
<div class="variablelist">
141
<span class="term">Shortcut</span>
145
The <span><b class="keycap">L</b></span>
146
key will change the active tool to Gradient Fill.
151
<span><b class="keycap">Ctrl</b></span>
156
<span><b class="keycap">Ctrl</b></span> is used to create straight lines that are
157
constrained to 15 degree absolute angles.
163
<div class="simplesect" lang="en" xml:lang="en">
164
<div class="titlepage">
167
<h4 class="title"><a id="id3332070"></a>Options</h4>
171
<div class="variablelist">
174
<span class="term">Overview</span>
178
The available tool options can be accessed
179
by double clicking the Gradient Tool icon.
180
<span class="guiicon">
181
<span class="inlinemediaobject"><img src="../images/toolbox/gradient.png" /></span>
186
<span class="term">Opacity</span>
190
The Opacity slider sets the transparency level for the gradient. A
191
higher opacity setting results in a more opaque fill and a lower
192
setting results in a more transparent fill.
196
<span class="term">Mode</span>
200
The Mode dropdown list provides a selection of paint application
201
modes. A list of these modes can be found in the
202
<a href="go01.html#glossary-modes">Glossary</a>.
206
<span class="term">Gradient</span>
210
A variety of gradient patterns can be selected from the
211
drop-down list. The tool causes a shading pattern that
212
transitions from foreground to background color, in the
213
direction the user determines by drawing a line in the
214
image. For the purposes of drawing the gradient, the
215
<span class="guilabel">Reverse</span> checkbox switches foreground
220
<span class="term">Offset</span>
224
The <span class="guilabel">Offset</span> Value is the "slope" of the
229
<span class="term">Shape</span>
233
The <span class="acronym">Gimp</span> provides 11 shapes, which can be
234
selected from the drop-down list. Details on each of the
235
shapes are given below.
239
<div class="variablelist">
242
<span class="term">Linear</span>
246
<span class="inlinemediaobject"><img src="../images/tool-options/gradient-linear.png" /></span>
249
The <span class="guilabel">Linear</span>gradient begins with
250
the foreground color at the starting point of the
251
drawn line and transitions linearly to the background
252
color at the ending point.
256
<span class="term">Bi-Linear</span>
260
<span class="inlinemediaobject"><img src="../images/tool-options/gradient-bilinear.png" /></span>
263
The <span class="guilabel">Bi-Linear</span> shape proceeds in
264
both directions from the starting point, for a
265
distance determined by the lenth of the drawn line.
266
It is useful, for example, for giving the appearance
271
<span class="term">Radial</span>
275
<span class="inlinemediaobject"><img src="../images/tool-options/gradient-radial.png" /></span>
278
The <span class="guilabel">Radial</span> gradient gives a circle,
279
with foreground color at the center and background color
280
outside the circle. It gives the appearance of a sphere
281
without directional lighting.
285
<span class="term">Square</span>
289
<span class="inlinemediaobject"><img src="../images/tool-options/gradient-square.png" /></span>
290
<span class="inlinemediaobject"><img src="../images/tool-options/gradient-ang-shapeburst.png" /></span>
291
<span class="inlinemediaobject"><img src="../images/tool-options/gradient-spher-shapeburst.png" /></span>
292
<span class="inlinemediaobject"><img src="../images/tool-options/gradient-dim-shapeburst.png" /></span>
295
There are four shapes that are some variant on a
296
square: <span class="guilabel">Square</span>,
297
<span class="guilabel">Shapeburst(angular)</span>,
298
<span class="guilabel">Shapeburst(spherical)</span>, and
299
<span class="guilabel">Shapeburst(dimpled)</span>. They all
300
put the foreground color at the center of a square,
301
whose center is at the start of the drawn line, and
302
whose half-diagonal is the length of the drawn line.
303
The four options provide a variety in the manner in
304
which the gradient is calculated; experimentation is
305
the best means of seeing the differences.
309
<span class="term">Conical (symmetric)</span>
313
<span class="inlinemediaobject"><img src="../images/tool-options/gradient-sym-conical.png" /></span>
316
The <span class="guilabel">Conical(symmetrical)</span> shape
317
gives the sensation of looking down at the tip of a
318
cone, which appears to be illuminated with the
319
background color from a direction determined by the
320
direction of the drawn line.
324
<span class="term">Conical (asymmetric)</span>
328
<span class="inlinemediaobject"><img src="../images/tool-options/gradient-asym-conical.png" /></span>
331
<span class="guilabel">Conical(asymmetric)</span> is similar to
332
<span class="guilabel">Conical(symmetric)</span> except that
333
the "cone" appears to have a ridge where the line is
338
<span class="term">Spiral (clockwise)</span>
342
<span class="inlinemediaobject"><img src="../images/tool-options/gradient-clock-spiral.png" /></span>
343
<span class="inlinemediaobject"><img src="../images/tool-options/gradient-anticlock-spiral.png" /></span>
346
The <span class="guilabel">Spiral</span> tools provide spirals
347
whose repeat width is determined by the length of
357
<span class="term">Repeat</span>
361
There are two repeat modes: <span class="guilabel">Sawtooth Wave</span>
362
and <span class="guilabel">Triangular Wave</span>. The Sawtooth
363
pattern is achieved by beginning with the foreground,
364
transitioning to the background, then starting over with the
365
foreground. The Triangular starts with the foreground,
366
transitions to the background, then transitions back to the
371
<span class="term">Dithering</span>
375
Dithering is fully explained in the <a href="go01.html#glossary-dithering">Glossary</a>
379
<span class="term">Adaptive Supersampling</span>
383
<span class="guilabel">Adaptive Supersampling</span> is a more
384
sophisticated means of smoothing the "jagged" effect of a
385
sharp transiton of color along a slanted or curved line.
392
<div class="navfooter">
394
<table width="100%" summary="Navigation footer">
396
<td width="40%" align="left"><a accesskey="p" href="ch03s06s02.html">Prev</a> </td>
397
<td width="20%" align="center">
398
<a accesskey="u" href="ch03s06.html">Up</a>
400
<td width="40%" align="right"> <a accesskey="n" href="ch03s06s04.html">Next</a></td>
403
<td width="40%" align="left" valign="top">6.2. Bucket Fill </td>
404
<td width="20%" align="center">
405
<a accesskey="h" href="index.html">Home</a>
407
<td width="40%" align="right" valign="top"> 6.4. Color Picker Tool</td>
added
removed
html/en/ch03s06s03.html
