3.5. グラデーション

This tool fills the selected area with a gradient from the foreground and background colors by default, but there are many options. To make a gradient, drag the cursor in the direction you want the gradient to go and you release the mouse button when you feel you have the right position and size of your gradient. The softness of the gradient depends on how far you drag the cursor. The shorter the drag distance, the sharper it will be.

If you click and drag outside the selection, only a part of the gradient will appear in the selection.

このツールを使ってできることは目をみはるほど多数あり、 はじめはちょっと面喰うかもしれません。 オプションのうち最も大事なのがグラデーション形状です。 ツールオプションの グラデーション ボタンを押すとグラデーションを選択できるウィンドウが現れますから、 ここで GIMP が提供する数々の多彩なグラデーション柄を選べますが、 あなた独自のグラデーションを構成することもできます。 グラデーションについてのもっと詳しい情報は、 「グラデーション」「グラデーションダイアログ」 にあります。

形状 には線形、 双線型、 放射状、 四角形、 円錐形 (対称)、 円錐形 (非対称)、 形状広がり (角張った)、 形状広がり (球面)、 形状広がり (くぼみ)、 螺旋 (時計回り)、 螺旋 (反時計回り) の 11 のオプションがあります。 これらは後で詳しく述べます。 形状 オプションは選択範囲の輪郭に沿ってグラデーションをかけるものであり、 うねった形にも対応できる非常に面白い機能です。 形状グラデーションはマウスでドラッグする距離に拠らないところがほかの形状に対するのとは異なります。 後者が選択範囲内でマウスポインターをドラッグしてグラデーションをかけるのに対して、 形状の方はクリックする場所もドラッグの仕方も問題にしません。

[ヒント] ヒント

モードメニューにある 差の絶対値 オプションを選んで、 (完全透過でも構いませんから) 同じようにすれば、 素晴らしい渦巻模様ができて、 カーソルをドラッグする度に増えて変化します。

3.5.1. 呼び出し方


  • From the main menu: ToolsPaint ToolsGradient.

  • By clicking the tool icon in the Toolbox.

  • By pressing the G keyboard shortcut.

3.5.2. オプション

図14.56 The Gradient tool dialog

The Gradient tool dialog

Normally, tool options are displayed in a window attached under the Toolbox as soon as you activate a tool. If they are not, you can access them from the main menu through WindowsDockable WindowsTool Options which opens the option window of the selected tool.

モード; 不透明度
描画ツールの全般もしくは大多数に共通するツールオプションについての説明は 描画ツール共通のオプション をご覧ください。

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 or introduces others colors, in the direction the user determines by drawing a line in the image. For the purposes of drawing the gradient, clicking on the Reverse reverses the gradient direction with the effect, for instance, of swapping the foreground and background colors.

On the right hand, a button to open the Gradient Editor dialog.

Blend Color Space
  • Perceptual RGB: When this option is chosen, the Blend Color Space is sRGB. This is the default.

  • Linear RGB: When this option is chosen, the Blend Color Space is linearized sRGB (defined by the sRGB primaries and a linear tone reproduction curve). This results in gradients that resemble the physical behavior of light. This option should be used if the color, as measured with a colorimeter, should change linearly with the distance from the color stops within the gradient.

  • CIE Lab: When this option is chosen, the Blend Color Space is CIE L*a*b*. This perceptionally uniform color space is used to model human perception of color blending.


GIMP provides 11 shapes, which can be selected from the drop-down list. Details on each of the shapes are given below.

図14.57 グラデーションの形状の例








この場合のグラデーションは引かれた線の始点に描画色を置き、 直線的に終点の背景色まで色を変化させてゆきます。


この形状は引かれた線の長さに基づいて決められた距離で、 始点から双方向に向かいます。 たとえば筒状の表現に向いています。


このグラデーションは同心円状に、 中心の描画色から外周の背景色へと描かれます。 指向性照明のないときの球体のように見えます。

四角形; 形状広がり

図14.58 四角形; 形状広がりグラデーションの例

四角形; 形状広がりグラデーションの例


四角形; 形状広がりグラデーションの例

形状広がり (角張った)

四角形; 形状広がりグラデーションの例

形状広がり (球面)

四角形; 形状広がりグラデーションの例

形状広がり (くぼみ)

四角形形状広がり (角張った)形状広がり (球面)形状広がり (くぼみ) の 4 つの形状は正方形上の変種です。 いずれも正方形の中心に描画色を置いていますが、 正方形の中心は線を引いたときの始点とし、 線の長さが対角線の半分と同じになります。 これら 4 つのオプションはグラデーションの算出規則の変化によるもので、 その違いを見分けるには試してみるのが一番です。

円錐形 (対称); 円錐形 (非対称)

図14.59 円錐形グラデーションの例


円錐形 (対称)


円錐形 (非対称)

円錐形 (対称) 形状は円錐の頂点を上から見下ろしたような感じの効果があり、 引いた線の向きから背景色で彩られているように見えます。

円錐形 (非対称)円錐形 (対称) に似ていますが、 引かれた線の部分が円錐の尾根筋のように見えるところが違います。

螺旋 (時計回り); 螺旋 (反時計回り)

図14.60 螺旋グラデーションの例


螺旋 (時計回り)


螺旋 (反時計回り)

螺旋 形状は渦巻を描くもので、 引いた線の長さで繰り返しの幅が決められます。

  • None (extend) as default.

  • Sawtooth Wave: the Sawtooth pattern is achieved by beginning with the foreground, transitioning to the background, then starting over with the foreground.

  • Triangular Wave: starts with the foreground, transitions to the background, then transitions back to the foreground.

  • Truncate: areas before and after endpoints are truncated.


オフセット 値はグラデーションの傾斜の増加を可能にします。 クリックした始点と色変化が起こる位置を分けてその間の距離を定めます。 線形以外の形状にはこのオプションが適用されません。

図14.61 ブレンドツール: オフセットの例

「ブレンド」ツール: オフセットの例

上段のオフセット = 0、 下段のオフセット = 50%


Dithering is explained in the Glossary


This is a more sophisticated means of smoothing the "jagged" effect of a sharp transition of color along a slanted or curved line. To find out what works best in your case, you will have to test this yourself.

Instant mode
[警告] 警告

The option must be activated (with Shift also) before starting drawing gradient.

When this option is checked, the gradient line disappears as soon as you release the mouse button. You can't edit color stops before applying the gradient fill.

Modify active gradient

When this option is checked, the custom gradient is not created automatically and must be created manually. The option can be activated before starting drawing gradient or if the active gradient is not the custom gradient. Allows changing user-writable gradients directly rather than creating copies of them.

3.5.3. Editing Gradient

On-canvas editing

All the Gradient Editor dialog features are available directly on canvas. You can create and delete color stops, select and shift them, assign colors to color stops, change blending and coloring for segments between color stops, create color stops from midpoints.

Select a gradient in the gradient dialog. Click and drag on canvas. A line is drawn and the gradient is displayed. You can edit this gradient by moving the mouse pointer on this line. As soon as you try to edit gradient, GIMP creates a custom gradient, which is a copy of the selected gradient. It becomes the active gradient and will be preserved across sessions. Here, we use the Abstract3 gradient.

The Abstract3 gradient, with endpoints

At both ends of the line, you can see a Start endpoint and an End endpoint. Click and drag an endpoint (the mouse pointer is accompanied with a moving cross) to move it where you want on your screen. A small window appears showing data about the selected endpoint: the position of the mouse (coordinate origin is the upper left corner of image or selection), the starting (left) and the ending (right) color of the gradient.

End point moved

[注記] 注記

In you only move endpoints, the custom gradient is not created yet.

On the line, you can see several small squares. These are Stops that divide gradient into segments. You can edit segments separately. Click and drag stops to move them (the active endpoint takes a yellow color). As soon as you move a stop, the custom gradient is created. The small data window shows a button that allow you to remove the active stop.

Stop point moved and data window

If you move the mouse pointer on the line, a Midpoint shows up. Then, the small data window has two buttons: to create a new stop at midpoint, and to center midpoint.

For Stops and Midpoints, Position refers to the gradient line: 0 is start endpoint, 100 is end endpoint.

Blending: you can change the blending mode between two stops, using the drop-down list. The Step option creates a hard-edge transition between the two adjacent color stops at the midpoint.

図14.62 Step option example

「Step」 option example

Original gradient

「Step」 option example

Step applied at Midpoint2

Changing color: in stop and end data windows, you have color buttons with a drop-down list. The default option is Fixed; this means that color choice will be independent from foreground and background colors. Click on a color button to open a color selector.

キー修飾 (初期設定)

Ctrl キーは制限つきの直線を引くのに使われます。 線の傾きは 15 度刻みの方向のいずれかのみ選べます。

Alt or Ctrl+Alt to move the whole line.

The Gradient Editor

The Gradient Editor still exists: 「グラデーションエディター」.