3.5. グラデーションダイアログ

図15.40 グラデーションダイアログのスクリーンショット

グラデーションダイアログのスクリーンショット

The Gradients dialog offers a gradient palette which is used to select a gradient — a set of colors arranged in a linear scale — for use with the Gradient tool and numerous other operations. It also gives you access to several functions for manipulating gradients. You can select a gradient by clicking on it in the list: it will then be shown in the Brush/Pattern/Gradient area of the Toolbox. A few dozen nice gradients come pre-installed with GIMP. You can create more using the Gradient Editor. General information about gradients and how they are used in GIMP can be found in the Gradients section.

一覧表の最初の 5 つのグラデーションは特別です。 ツールボックスに表示される描画色と背景色を基にそれぞれ異なる方法で作成され、 再構成されています。

3.5.1. ダイアログの呼び出し方

バッファーダイアログはドッキング可能です。 その扱い方については 「ダイアログとその合体」 の節をご覧ください。

呼び出し方はつぎのとおりです。

  • from the main menu: WindowsDockable DialogsGradients;

  • from the Tab menu in any dockable dialog by clicking on and selecting Add TabGradients,

  • from the Toolbox, by clicking on the current gradient in the Brush/Pattern/Gradient area (if you have checked the Show active brush, pattern and gradient option in the toolbox preferences).

  • キーボードショートカット Ctrl+G

In the Windows menu, there is a list of detached windows which exists only if at least one dialog remains open. In this case, you can raise the Gradients dialog from the main menu: WindowsGradients.

3.5.2. グラデーションダイアログの利用法

このダイアログで基本中の基本といえるありふれた操作といえば、 単純ですがこの縦に長いグラデーションの一覧表を繰って GIMP の現行のグラデーションにしたいものを探し出しクリックする使い方でしょう。 選ばれたグラデーションはグラデーションを利用するあらゆる操作で使われます。

グラデーション一覧表のどれかを ダブルクリック するとその名前を変えられるグラデーションエディターが開かれます。 ただし変更できるのは自前でインストールしたものに限られ、 GIMP と一緒に提供されたグラデーションファイルは対象外です。 仮に変更の権限の及ばないものの名前を編集しても、 これを確定しようとして Enter キーを押したりどこか他のところを触るとたちまち名前は元に戻されます。

升目表示と列挙表示

グラデーションダイアログのタブメニューで 並べて表示一覧で表示 を切り替えられます。 並べて表示を選ぶとグラデーションは升目状に並べられます。 この表示は結構壮観ですが、 隣同士が視覚的に干渉してしまうので欲しいものを探すのはあまり楽ではありません。 初期設定のままの一覧で表示の方がもっと便利で、 グラデーションは各行ごとに名前つきで表示されています。

タブメニューの プレビューサイズ サブメニューでダイアログに表示されるグラデーション見本をお好みの大きさに調節できます。

このダイアログの底部に並ぶアイコンボタンはグラデーションを操作するさまざまな機能があります。

グラデーションの編集

このアイコンボタンは (後述する) グラデーションエディター を呼び出します。

新しいグラデーションを作成

このアイコンボタンをクリックすると簡単なグレースケールで配色された新たなグラデーションが追加され、 これを変更できるグラデーションエディターが開かれます。 作成されたグラデーションは GIMP の個人用ディレクトリー内の gradients フォルダーに自動的に保存され、 次回の GIMP 起動時から自動的に読み込まれるようになります。 (これらのフォルダーは 設定 ダイアログの フォルダーグラデーション のページで追加できます。)

グラデーションの複製

このアイコンボタンをクリックすると現在選択されているグラデーションの複製がとられます。 元ファイルが書き込めなくても複製ならば編集できるでしょう。

グラデーションの削除

現在選ばれているグラデーションを削除できる権限をお持ちでしたら、 このボタンをクリックすればダイアログ上のみならず保存されていたグラデーションファイルまで跡形もなく消し去れます。 実行に移すまえに確認が求められます。

グラデーションを再度読み込み

グラデーションエディターを使わない何らかの方法で新たにグラデーションファイルを個人用 gradients フォルダーなどに追加したときは、 このボタンをクリックすればダイアログの一覧表が読み込み直されて、 新しいグラデーションも使えるようになります。

これらのアイコンボタンでできる操作はこのダイアログのポップアップメニューにもあります。 このメニューを呼び出すにはグラデーションの一覧表のどこかを 第2ボタン でクリックするか、 タブメニューの筆頭にある グラデーション サブメニューに進みます。

図15.41 グラデーションの脈絡メニュー

「グラデーション」の脈絡メニュー

グラデーションダイアログのメニューには他にも項目があります。

Save as POV-Ray…

グラデーションを POV-Ray (Persistence of Vision Raytracer) 3 次元レイトレーシングプログラムのファイル形式で保存できます。

グラデーションファイルの場所をコピー

この指令はグラデーションファイルの場所 (パスとファイル名) をクリップボードに取り込みます。 テキストエディターなどで利用してください。

Show in File Manager

Show in File Manager opens the location of the gradient in the default File Manager on your system.

Custom Gradient…

この指令は現在選択されているグラデーションで塗りつぶされた資料用画像を作成するスクリプトを起用します。 ダイアログウィンドウが現れますのでグラデーションの向きや画像の幅と高さを指定してください。

Save as CSS...

The CSS (Cascading Style Sheets) language is used to format the display of HTML and XML files, for instance background color, background gradient, or font size. The "CSS Save" plug-in is a CSS3 linear gradient generator that allows you to save a CSS3 code snippet, containing the gradient data for a given GIMP gradient. This code snippet is a text file: you can copy-paste it to the stylesheet related to your HTML file, to get a gradient background on opening the HTML file in Firefox, Chrome or Safari web navigators. This CSS3 code snippet can also be used as a gradient in SVG files.

Here is an example of a CSS3 code snippet, using the Blue Green gradient:

Save as CSS...で作成した CSS 断片. 


background-image: linear-gradient(top, rgb(0,123,255) 0%, rgb(72,226,255) 56%,
     rgb(0,255,161) 100%);
background-image: -moz-linear-gradient(center top, rgb(0,123,255) 0%,rgb(72,
    226,255) 56%,rgb(0,255,
    161) 100%);
background-image: -webkit-gradient(linear, left top, left bottom,
     color-stop(0.000, rgb(0,123,255)),color-stop(0.566, rgb(72,226,255)),
    color-stop(1.000, rgb(0,255,161)));
              

3.5.2.1. タグづけ

タグはグラデーションの一覧表示を再構成するのに使えます。 「タグづけ」 をご覧ください。

3.5.3. グラデーションエディター

図15.42 グラデーションエディター

グラデーションエディター

グラデーションエディターでグラデーションの配色が編集できます。 ご自身で作られたグラデーションファイル (あるいはシステムが提供するものの複製) を対象としており、 GIMP と一緒にインストールされたシステム付属のグラデーションファイルは編集できません。 このエディターは凝ったつくりの精巧なツールなので習得するまでにちょっと骨が折れます。 そのコツはグラデーションをいくつかの セグメント (分節) の連なりととらえ、 それぞれの分節は左端の色から右端の色へ徐々に変化がついていると考えることです。 グラデーションエディターではセグメントをいくつでも連ねられ、 各分節の左右の端の色にはどんな色も使えますし、 左から右への色変化の形状にもさまざまな選択肢があります。

3.5.3.1. グラデーションエディターダイアログの呼び出し方

グラデーションエディターダイアログを起用する方法はつぎのいずれかです。

  • グラデーションダイアログの一覧表で加工対象のグラデーションの見本をダブルクリック

  • 一覧表で加工対象のグラデーションを 第2ボタン クリックして出てきた脈絡メニューの グラデーションの編集... を選択

  • by clicking on the Edit gradient button in the Gradient Dialog,

  • from the Gradient Menu you get by clicking on in the Gradient Dialog.

3.5.3.2. ウィンドウ詳説
名前

This is where you can change under what name the gradient shows up in the list of gradients.

グラデーションのプレビュー

Below the name, you see the current result of your work. If you move the mouse pointer on this display, it works somewhat like a color-picker. Information about the pixel under the mouse is shown below the preview and slider area.

Position is a number between 0.000 on the left and 1.000 on the right side of the gradient. Below that the color values in RGB and HSV mode are shown, followed by the Luminance and Opacity values.

図面上をクリックしてドラッグすると 位置RGB のみの表示になります。 この操作ではマウスポインターの位置の色がツールボックスにも示される描画色になり、 グラデーションダイアログの一覧表の最初の 4 つのグラデーションはこの色を基に再構成されます。 (Ctrl キーを押しながらだと背景色が換わります。)

区間の選択と制御スライダー

グラデーションの図面のすぐ下の帯には小さな白と黒の三角形があって、 これらを移動してグラデーションの終端と中間点が指定できます。 セグメント とは連続する 2 つの い三角形で区切られた分節のことです。 どのセグメントにもその中に白い三角形があり、 その移動がセグメントの色の変化位置を逸らせるのに使えるところはレベルツールのダイアログで中間スライダーポイントの果たす役目に近いものがあります。 セグメントを選びとるにはその区切りとなる黒い三角形の間をクリックしてください。 するとその区間が強調表示されます。 複数のセグメントを連ねて選択するには Shift キーを押しながらクリックしてください。 同時に選択できるセグメントは 連続 していなければならないため、 Shift キーを押しながら隣り合わないセグメントを選ぶと両者の間のセグメントも自動的に選択されます。

You can move sliders, segments and selections. If you simply click-n-drag a slider, you only move the corresponding transition. By click-n-drag on a segment you can move this segment up to the next triangle. By Shift+click-n-drag on a segment/selection, you can move this segment/selection and compress/dilate next segments.

スクロールバー

スライダーが並ぶ帯の下にはスクロールバーがあります。 ダイアログ下部にある拡大ズーム表示ボタンを使ったときには繰り寄せが必要になるでしょう。

応答領域

Below, a color swatch shows the color pointed by the mouse cursor. Information about this color and helpful hints or feedback messages may appear here.

アイコンボタン

There are three buttons at the bottom of the dialog:

表示倍率を下げて縮小表示

このアイコンボタンをクリックすると図面が左右に縮小します。

表示倍率を上げて拡大表示

このアイコンボタンをクリックするとグラデーションの図面が左右に拡大します。 ウィンドウからはみ出したところはスクロールバーを使って繰り寄せられます。

すべて表示されるように表示倍率を調整

このアイコンボタンをクリックすると図面は左右の大きさが調整され、 ウィンドウの枠内にぴたりと収まる倍率で表示されます。

3.5.3.3. グラデーションエディターの脈絡メニュー

図15.43 グラデーションエディターの脈絡メニュー

グラデーションエディターの脈絡メニュー

グラデーションエディターの脈絡メニューを呼び出すにはこのダイアログの図面上を 第2ボタン でクリックするか、 タブメニューの最初の項目を進んでください。 このメニューでは終端の色の編集 (各セグメントの左端と右端の色の設定) や混色の編集ができ、 色モデルの選択とセグメントの編集ができます。 このエディターが対象とするグラデーションファイルは自作や自前のものと、 システム提供ファイルからの複製に限られます。

つぎにメニューに並ぶ各項目を見てゆきましょう。

終端の色を編集

左終端色/右終端色のタイプ

このサブメニューで終端の色はツールボックスの色標識に表示される描画色と背景色を用いるように変えられます。 こののち描画色と背景色が変化するたびこの終端の色も同時に変化しつづけます。 その反対に色をこのままにしておくには 指定色 を選びます。

つぎにメニューに並ぶ各項目を見てゆきましょう。

Fixed

Fixed

Foreground Color

Foreground Color

Foreground Color (Transparent)

Foreground Color (Transparent)

Background Color

Background Color

Background Color (Transparent)

Background Color (Transparent)

左終端色の指定...; 右終端色の指定...

これらのオプションは色の変更ダイアログを開きますのでその終端の色を指定します。

[注記] 注記

このコマンドは前掲のメニューに連動しており、 その終端の色のタイプに 指定色 以外を選んでいるときは、 終端色を選ぶこのメニューが灰色無効になります。

左終端色の読み込み元; 右終端色の読み込み元

図15.44 終端色の読み込み元サブメニュー

「終端色の読み込み元」サブメニュー

これらのオプションを使うと他にもいろいろな方法で終端の色を指定できます。 このサブメニューで選べる読み込み元はつぎのとおりです。 (左終端色について扱っているものとします。)

左隣セグメントの右終端色

ここを選ぶと現在選択している範囲の左終端の色に左隣の分節の右終端の色が使われます。 セグメントの境界が滑らかにつながります。

右終端色

ここを選ぶと現在選択している範囲の左終端の色が右終端の色と同じになります。

描画色; 背景色

ここを選ぶとツールボックスにも示される GIMP の描画色や背景色がこの終端の色に使えます。 ちなみにこの後で描画色や背景色を変更してもここの終端色が変化するわけではありません。

RGBA 色の保存枠

このサブメニューの残りは 10 個の保存庫です。 後述する 色の保存先 サブメニューで個々に色を割り当てられます。 ここで選んだ枠の色が終端色に使われます。

左終端色の保存先; 右終端色の保存先

この 2 つのサブメニューは現在その端点に使われている色を、 サブメニュー内で指定した保存庫にとりこみます。

色のクリックおよびドラッグ

パレットダイアログ描画色/背景色ダイアログ、 あるいはツールボックスから色標識をクリックしてドラッグで

  • 終端点 (黒三角形) 上に曳き込めばそこに接する左右の終端色が変更でき、

  • グラデーション表示領域に曳き込めば新たに終端点が追加され、 できた端点の両面の終端色がその色に設定されます。

セグメント内での混色と色づけの機能

選択範囲/セグメントの混色関数

このオプションは選択範囲 (ひとつもしくは複数が連続するセグメント) の一方の終端からもう一方の終端までの色の変化の様態を設定するためのものであり、 終端と中間点にいずれかの関数が適用されます。

線形

既定ではこの関数が選ばれています。 終端から終端までの色変化は直線的です。

カーブ

漸進的な色変化は選択範囲の中程よりも両終端に近いところほど色変わりの度合いが大きくなります。

サインカーブ

カーブの関数とは対照的に漸進的な色変化は選択範囲の両終端よりも中間点に近いところほど色変わりの度合いが大きくなります。

球面 (増加)

選択範囲の左側が右側よりも急激に色変わりします。

球面 (減少)

選択範囲の右側が左側よりも急激に色変わりします。

Step

Gradient changes from left value to right value in one step without intermediate colors.

選択範囲/セグメントの色モデル

このオプションでは選択範囲の中での色変化を RGBHSV (色相反時計回り)HSV (色相時計回り) の 3 つの 色モデル から指定できます。

つぎにメニューに並ぶ各項目を見てゆきましょう。

RGB

RGB

HSV (counter-clockwise hue)

HSV (counter-clockwise hue)

HSV (clockwise hue)

HSV (clockwise hue)

セグメントを加工

選択範囲/セグメントの反転

このオプションは選択範囲 (ひとつもしくは複数が連続するセグメント) のすべての色と終端の位置を左右反転して配置します。

選択範囲/セグメントの複製...

このオプションは選択範囲 (ひとつもしくは複数が連続するセグメント) を 2 等分し、 元の範囲の内容の完全な複製を半分の幅に圧縮して 2 つ並べます。

セグメント群/セグメントを中間点で分割

このオプションは選択範囲のセグメントをそれぞれ 2 つずつに切り分け、 元のセグメントの白い三角形の位置が両分節の境界となるように配置します。

セグメント群/セグメントの均等分割...

このオプションは前項と似ていますが 2 つずつに切り分けられたセグメントの境界は中間点の白三角形の位置ではなく範囲を 2 等分する中点に置かれます。

選択範囲/セグメントの削除

このオプションは選択範囲 (ひとつもしくは複数が連続するセグメント) 内のすべてのセグメントを消去し、 その代わりにこの範囲の中央に黒い三角形をひとつだけ置き、 選択範囲の両隣のセグメントを拡大して空隙を埋めます。

選択範囲/セグメントの中間点を中央へ

このオプションは選択範囲内のすべてのセグメントの白い三角形を各セグメントの幅を 2 等分する中点の位置に移動します。

選択範囲/セグメントの制御点を再配置

このオプションは選択範囲内のセグメントの幅を均一にし、 各セグメントの白三角形をその中点に移動します。 選択範囲内の黒と白の三角形の互いの幅は等しくなります。

終端の色の調和

この 2 つのオプションは複数の連続するセグメントを選択したときだけ利用できます。

終端の色を混ぜる

このオプションは隣り合う終端の色の平均をとって各終端の色を等しくさせ、 セグメントの境界が滑らかにつながるようにします。

終端の不透明度を混ぜる

このオプションは前項と同じことを色ではなく透明度について実施します。

Edit Active Gradient

When enabled, the gradient editor will automatically load the currently active gradient. If it is disabled, the gradient editor will not change when the active gradient changes.

[注意] 注意

グラデーションエディターでの作業は取り消しが効きません。 十分お気をつけください。

3.5.3.4. グラデーションエディターの使用例

オプションの説明ばかりで少々うんざりされたかと思います。 ここはひとつ使用例を見てすっきりさせましょう。

  1. Open the Gradient Dialog. Click the New Gradient . The Gradient Editor is opened and shows a gradient from black to white.

    図15.45 グラデーションの新規作成

    グラデーションの新規作成

  2. 新しいグラデーションを 第2ボタン でクリックして脈絡メニューを呼び出し、 セグメントを均等に分割... を選んでください。 出てきたダイアログに適当な数を入れましょう。

    図15.46 セグメントが 3 つあるグラデーション

    セグメントが 3 つあるグラデーション

    各セグメントは黒の三角形スライダーで区切られている。 三角形の間をクリックしてセグメントを活性化しよう。 Shift キーを押しながらなら連続して複数選べる。


  3. グラデーションを 第2ボタン クリックして脈絡メニューを呼び出し、 選んでおいたセグメントもしくはセグメント群の 左終端色...右終端色... をそれぞれ指定します。

    図15.47 最初の色づけされたセグメント

    最初の色づけされたセグメント

    Red has been chosen for left endpoint and yellow for the right endpoint.


  4. 他のセグメントにも同じ手順を踏んでください。 そのあとはセグメントの色を調和させる機能を使っていろいろな効果を引きだしましょう。