1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>6.3. Gradient Tool</title>
<link rel="stylesheet" href="gimp-help-plain.css" type="text/css" />
<link rel="stylesheet" href="gimp-help-screen.css" type="text/css" />
<meta name="generator" content="DocBook XSL Stylesheets V1.66.1" />
<link rel="start" href="index.html" title=" " />
<link rel="up" href="ch03s06.html" title="6. Other" />
<link rel="prev" href="ch03s06s02.html" title="6.2. Bucket Fill" />
<link rel="next" href="ch03s06s04.html" title="6.4. Color Picker Tool" />
</head>
<body>
<div xmlns="" class="navheader">
<table width="100%" summary="Navigation header">
<tr>
<th colspan="3" align="center" id="chaptername">6.3. Gradient Tool</th>
</tr>
<tr>
<td width="20%" align="left"><a accesskey="p" href="ch03s06s02.html">Prev</a> </td>
<th width="60%" align="center" id="sectionname">6.3. Gradient Tool</th>
<td width="20%" align="right"> <a accesskey="n" href="ch03s06s04.html">Next</a></td>
</tr>
</table>
<hr />
</div>
<div class="sect2" lang="en" xml:lang="en">
<div class="titlepage">
<div>
<div>
<h3 class="title"><a id="gimp-tool-blend"></a>6.3. Gradient Tool</h3>
</div>
</div>
</div>
<a id="id3330994" class="indexterm"></a>
<div class="mediaobject">
<img src="../images/toolbox/toolbox-gradient.png" />
</div>
<p>
This tool fills the selected area with a gradient blend of the
foreground and background colors by default, but there are many
options. To make a blend, drag the
cursor in the direction you want the gradient to go, and release
the mouse button when you feel you have the right position and
size of your blend. The softness of the blend depends on how far
you drag the cursor. The shorter the drag distance, the sharper it
will be.
</p>
<p>
There are an astonishing number of things you can do with this
tool, and the possibilities may seem a bit overwhelming at first.
The two most important options you have are the Gradient and the
Shape. Clicking the Gradient button in the tool options brings up
a Gradient Select window, allowing you to choose from among a
variety of gradients supplied with Gimp; you can also construct
and save custom gradients.
</p>
<p>
If the gradient appears in black-and-white, then it will actually
use the foreground and background colors instead (and you will see
it colored that way in the tool options area). If it appears in
color, then it will be used as is.
</p>
<p>
For Shape, there are 11 options: Linear, Bilinear, Radial,
Square, Conical (symmetric), Conical (asymmetric), Shapeburst
(angular), Shapeburst (spherical), Shapeburst (dimpled), Spiral
(clockwise), and Spiral (counterclockwise); these are described in
detail below. The Shapeburst options are the most interesting:
they cause the gradient to follow the shape of the selection
boundary, no matter how twisty it is. Unlike the other shapes,
Shapeburst gradients are not affected by the length or direction
of the line you draw: for them as well as every other type of
gradient you are required to click inside the selection and move
the mouse, but a Shapeburst appears the same no matter where you
click or how you move.
</p>
<div class="tip" style="margin-left: 0.5in; margin-right: 0.5in;">
<table border="0" summary="Tip">
<tr>
<td rowspan="2" align="center" valign="top" width="25">
<img alt="[Tip]" src="../images/tip.png" />
</td>
<th align="left">Tip</th>
</tr>
<tr>
<td colspan="2" align="left" valign="top">
<p>
Check out the Difference option in the Mode menu, where doing the
same thing (even with full opacity) will result in fantastic
swirling patterns, changing and adding every time you drag the
cursor.
</p>
</td>
</tr>
</table>
</div>
<div class="simplesect" lang="en" xml:lang="en">
<div class="titlepage">
<div>
<div>
<h4 class="title"><a id="id3331845"></a>Activate Tool</h4>
</div>
</div>
</div>
<div class="itemizedlist">
<ul type="disc">
<li>
<p>
The Blend Tool can be called in the following
order, from the image-menu:
<span class="guimenuitem"><span class="accel">T</span>ools</span>/
<span class="guimenuitem"><span class="accel">P</span>aint Tools</span>/
<span class="guimenuitem">Blen<span class="accel">d</span></span>.
</p>
</li>
<li>
<p>
The Tool can also be called by clicking the tool icon:
<span class="guiicon">
<span class="inlinemediaobject"><img src="../images/toolbox/gradient.png" /></span>
</span>
</p>
</li>
</ul>
</div>
</div>
<div class="simplesect" lang="en" xml:lang="en">
<div class="titlepage">
<div>
<div>
<h4 class="title"><a id="id3331310"></a>Key modifiers (Defaults)</h4>
</div>
</div>
</div>
<div class="variablelist">
<dl>
<dt>
<span class="term">Shortcut</span>
</dt>
<dd>
<p>
The <span><b class="keycap">L</b></span>
key will change the active tool to Gradient Fill.
</p>
</dd>
<dt>
<span class="term">
<span><b class="keycap">Ctrl</b></span>
</span>
</dt>
<dd>
<p>
<span><b class="keycap">Ctrl</b></span> is used to create straight lines that are
constrained to 15 degree absolute angles.
</p>
</dd>
</dl>
</div>
</div>
<div class="simplesect" lang="en" xml:lang="en">
<div class="titlepage">
<div>
<div>
<h4 class="title"><a id="id3332070"></a>Options</h4>
</div>
</div>
</div>
<div class="variablelist">
<dl>
<dt>
<span class="term">Overview</span>
</dt>
<dd>
<p>
The available tool options can be accessed
by double clicking the Gradient Tool icon.
<span class="guiicon">
<span class="inlinemediaobject"><img src="../images/toolbox/gradient.png" /></span>
</span>
</p>
</dd>
<dt>
<span class="term">Opacity</span>
</dt>
<dd>
<p>
The Opacity slider sets the transparency level for the gradient. A
higher opacity setting results in a more opaque fill and a lower
setting results in a more transparent fill.
</p>
</dd>
<dt>
<span class="term">Mode</span>
</dt>
<dd>
<p>
The Mode dropdown list provides a selection of paint application
modes. A list of these modes can be found in the
<a href="go01.html#glossary-modes">Glossary</a>.
</p>
</dd>
<dt>
<span class="term">Gradient</span>
</dt>
<dd>
<p>
A variety of gradient patterns can be selected from the
drop-down list. The tool causes a shading pattern that
transitions from foreground to background color, in the
direction the user determines by drawing a line in the
image. For the purposes of drawing the gradient, the
<span class="guilabel">Reverse</span> checkbox switches foreground
and background.
</p>
</dd>
<dt>
<span class="term">Offset</span>
</dt>
<dd>
<p>
The <span class="guilabel">Offset</span> Value is the "slope" of the
gradient.
</p>
</dd>
<dt>
<span class="term">Shape</span>
</dt>
<dd>
<p>
The <span class="acronym">Gimp</span> provides 11 shapes, which can be
selected from the drop-down list. Details on each of the
shapes are given below.
</p>
<p>
</p>
<div class="variablelist">
<dl>
<dt>
<span class="term">Linear</span>
</dt>
<dd>
<p>
<span class="inlinemediaobject"><img src="../images/tool-options/gradient-linear.png" /></span>
</p>
<p>
The <span class="guilabel">Linear</span>gradient begins with
the foreground color at the starting point of the
drawn line and transitions linearly to the background
color at the ending point.
</p>
</dd>
<dt>
<span class="term">Bi-Linear</span>
</dt>
<dd>
<p>
<span class="inlinemediaobject"><img src="../images/tool-options/gradient-bilinear.png" /></span>
</p>
<p>
The <span class="guilabel">Bi-Linear</span> shape proceeds in
both directions from the starting point, for a
distance determined by the lenth of the drawn line.
It is useful, for example, for giving the appearance
of a cylinder.
</p>
</dd>
<dt>
<span class="term">Radial</span>
</dt>
<dd>
<p>
<span class="inlinemediaobject"><img src="../images/tool-options/gradient-radial.png" /></span>
</p>
<p>
The <span class="guilabel">Radial</span> gradient gives a circle,
with foreground color at the center and background color
outside the circle. It gives the appearance of a sphere
without directional lighting.
</p>
</dd>
<dt>
<span class="term">Square</span>
</dt>
<dd>
<p>
<span class="inlinemediaobject"><img src="../images/tool-options/gradient-square.png" /></span>
<span class="inlinemediaobject"><img src="../images/tool-options/gradient-ang-shapeburst.png" /></span>
<span class="inlinemediaobject"><img src="../images/tool-options/gradient-spher-shapeburst.png" /></span>
<span class="inlinemediaobject"><img src="../images/tool-options/gradient-dim-shapeburst.png" /></span>
</p>
<p>
There are four shapes that are some variant on a
square: <span class="guilabel">Square</span>,
<span class="guilabel">Shapeburst(angular)</span>,
<span class="guilabel">Shapeburst(spherical)</span>, and
<span class="guilabel">Shapeburst(dimpled)</span>. They all
put the foreground color at the center of a square,
whose center is at the start of the drawn line, and
whose half-diagonal is the length of the drawn line.
The four options provide a variety in the manner in
which the gradient is calculated; experimentation is
the best means of seeing the differences.
</p>
</dd>
<dt>
<span class="term">Conical (symmetric)</span>
</dt>
<dd>
<p>
<span class="inlinemediaobject"><img src="../images/tool-options/gradient-sym-conical.png" /></span>
</p>
<p>
The <span class="guilabel">Conical(symmetrical)</span> shape
gives the sensation of looking down at the tip of a
cone, which appears to be illuminated with the
background color from a direction determined by the
direction of the drawn line.
</p>
</dd>
<dt>
<span class="term">Conical (asymmetric)</span>
</dt>
<dd>
<p>
<span class="inlinemediaobject"><img src="../images/tool-options/gradient-asym-conical.png" /></span>
</p>
<p>
<span class="guilabel">Conical(asymmetric)</span> is similar to
<span class="guilabel">Conical(symmetric)</span> except that
the "cone" appears to have a ridge where the line is
drawn.
</p>
</dd>
<dt>
<span class="term">Spiral (clockwise)</span>
</dt>
<dd>
<p>
<span class="inlinemediaobject"><img src="../images/tool-options/gradient-clock-spiral.png" /></span>
<span class="inlinemediaobject"><img src="../images/tool-options/gradient-anticlock-spiral.png" /></span>
</p>
<p>
The <span class="guilabel">Spiral</span> tools provide spirals
whose repeat width is determined by the length of
the drawn line.
</p>
</dd>
</dl>
</div>
<p>
</p>
</dd>
<dt>
<span class="term">Repeat</span>
</dt>
<dd>
<p>
There are two repeat modes: <span class="guilabel">Sawtooth Wave</span>
and <span class="guilabel">Triangular Wave</span>. The Sawtooth
pattern is achieved by beginning with the foreground,
transitioning to the background, then starting over with the
foreground. The Triangular starts with the foreground,
transitions to the background, then transitions back to the
foreground.
</p>
</dd>
<dt>
<span class="term">Dithering</span>
</dt>
<dd>
<p>
Dithering is fully explained in the <a href="go01.html#glossary-dithering">Glossary</a>
</p>
</dd>
<dt>
<span class="term">Adaptive Supersampling</span>
</dt>
<dd>
<p>
<span class="guilabel">Adaptive Supersampling</span> is a more
sophisticated means of smoothing the "jagged" effect of a
sharp transiton of color along a slanted or curved line.
</p>
</dd>
</dl>
</div>
</div>
</div>
<div class="navfooter">
<hr />
<table width="100%" summary="Navigation footer">
<tr>
<td width="40%" align="left"><a accesskey="p" href="ch03s06s02.html">Prev</a> </td>
<td width="20%" align="center">
<a accesskey="u" href="ch03s06.html">Up</a>
</td>
<td width="40%" align="right"> <a accesskey="n" href="ch03s06s04.html">Next</a></td>
</tr>
<tr>
<td width="40%" align="left" valign="top">6.2. Bucket Fill </td>
<td width="20%" align="center">
<a accesskey="h" href="index.html">Home</a>
</td>
<td width="40%" align="right" valign="top"> 6.4. Color Picker Tool</td>
</tr>
</table>
</div>
</body>
</html>
|
