トップ > 知っておきたい機能 > フィルとストローク >
線形グラデーションと放射グラデーション(段階的な色の変化)(その2)

グラデーションで色調や明暗などを段階的に変化させる(続き)

前の記事の『線形グラデーションと放射グラデーション(段階的な色の変化)』からの続きです。 引き続き、線形グラデーションと放射グラデーションの利用例を解説します

グラデーションの利用例(続き)

では続いて、色フェーズ(終端)の追加を行ってみましょう。 色フェーズとは、色を設定するための基点のことであり、線形グラデーションの始点・終点が色フェーズです。

初期状態では色フェーズは始点・終点のみですが、自分で中間点を追加することができます

色フェーズを追加するには、既存の色フェーズを選択する必要があります。 ただし、終点を選択しても色フェーズは追加できません。 よって、初期状態では始点を選択するしかありません

34. 始点を選択する
34. 始点を選択する

上図のように始点を選択します。 これで、色フェーズの追加の準備ができました。 では、始点の次の地点として新たな色フェーズを追加しましょう

35. [新しい色フェーズを挿入]ボタンを押す
35. [新しい色フェーズを挿入]ボタンを押す

上図のようにフィル/ストロークダイアログの[新しい色フェーズを挿入]ボタン([新しい色フェーズを挿入]ボタン)を押します(またはキーボードのINSERTキーを押します)。

  
画面上部のツールコントロールにも[新しい色フェーズを挿入]ボタンがあります(右図)。
36. 中間点が追加される
36. 中間点が追加される

上図のように中間点が追加されます。 中間点は菱形ハンドルで描かれます。 なお中間点は、文字通り両側の色フェーズの中間地点に追加されます。

では、中間点に色を設定しましょう。 今回は青色を設定します

37. 青色を設定する
37. 青色を設定する

上図のように(1)の色の指定方法をRGBに切り替え、(2)の R G B A にそれぞれ、0 0 255 100 を指定します。

38. 中間点の色が青色になる
38. 中間点の色が青色になる

上図のようにグラデーションの中間点の色が青色に変わりました。 それにより、緑色 → 青色 → 赤色のグラデーションになりました。 このように、3色以上に変化するグラデーションも作成することができます

  
色フェーズは複数追加することができますので、4色でも5色でもグラデーションさせることができます。

次に中間点を移動させてみましょう。 ただし、マウスでのドラッグやキーボードのカーソルキー(↑↓←→)ではなく、フィル/ストロークダイアログの数値入力で移動してみましょう

  
もちろん、マウスのドラッグやキーボードのカーソルキー(↑↓←→)でも中間点を移動させることもできます。
39. 終端オフセットに 0.2 を入力する
39. 終端オフセットに 0.2 を入力する

上図のようにフィル/ストロークダイアログの終端オフセットに 0.2 を入力します。

  
画面上部のツールコントロールのオフセットでも終端オフセットを設定することができます(右図)。
40. 中間点が移動する
40. 中間点が移動する

上図のように中間点が移動します。 オフセットに 0.2 を入力したため、始点側から20%の位置に移動しました。 なお、0.5 であれば中間地点に、0.0 であれば始点と同じ位置に、1.0 であれば終点と同じ位置に移動します。

なお、中間点は始点と終点を結ぶ線上にしか配置できません。 つまり、スライドさせることしかできません。 あくまでも線形グラデーションであり、途中でカーブするグラデーションにはできないということです

  
複雑なグラデーションをかけたければ、メッシュグラデーションを利用する必要があります。 メッシュグラデーションの利用方法の詳細については、知っておきたい機能 > フィルとストローク > メッシュグラデーション(格子状・円錐状の色の変化)を参照ください。

では次に、色フェーズを削除してみましょう。 削除するのは始点です。

41. 始点を選択する
41. 始点を選択する

上図のように始点を選択します。 では、始点を削除しましょう

42. [色フェーズを削除]ボタンを押す
42. [色フェーズを削除]ボタンを押す

上図のように画面上部のツールコントロールの[色フェーズを削除]ボタン([色フェーズを削除]ボタン)を押します(またはキーボードのDELETEキーを押します)。

  
画面上部のツールコントロールにも[色フェーズを削除]ボタンがあります(右図)。
43. 始点が削除される
43. 始点が削除される

上図のようにフィル/ストロークダイアログの色フェーズから始点が削除されます

ではここで、キャンバスに注目してください

44. ハンドルは3つのまま
44. ハンドルは3つのまま

上図のようにハンドルは3つのままです。 なぜか、ハンドルの数がフィル/ストロークダイアログ(または画面上部のツールコントロール)の色フェーズの一覧の件数と一致しません。

  
Inkscape 1.1系までは、始点・中間点・終点という構成から始点を削除すると、中間点が新たな始点となっていました。 つまり、ハンドルは四角ハンドル・丸ハンドルの2つになっていました。 ハンドルの数と色フェーズの一覧の件数は一致していたのです。

では、作業に戻りましょう。 中間点に緑色を設定し、緑色 → 赤色のグラデーションに戻しましょう

45. 緑色を設定する
45. 緑色を設定する

上図のように(1)の色フェーズの一覧から中間点を選択し、(2)の色の指定方法をRGBに切り替え、(3)の R G B A にそれぞれ、0 255 0 100 を指定します。

46. 始点の色が緑色に戻る
46. 始点の色が緑色に戻る

上図のように緑色 → 赤色のグラデーションに戻りました

続いては、画面上部のツールコントロールの "新規:" のボタン([線形グラデーションを作成]ボタン / [放射(楕円または真円)グラデーションを作成]ボタン / [フィルのグラデーションを作成]ボタン / [ストロークのグラデーションを作成]ボタン)について解説します。

47. [放射(楕円または真円)グラデーションを作成]ボタンと[ストロークのグラデーションを作成]ボタンを選択する
47. [放射(楕円または真円)グラデーションを作成]ボタンと[ストロークのグラデーションを作成]ボタンを選択する

上図のように[放射(楕円または真円)グラデーションを作成]ボタン([放射(楕円または真円)グラデーションを作成]ボタン)と[ストロークのグラデーションを作成]ボタン([ストロークのグラデーションを作成]ボタン)を選択してください。

48. 変化しない
48. 変化しない

上図のように何も変化しません。 なぜかというと、ツールコントロールの "新規:" のボタン([線形グラデーションを作成]ボタン / [放射(楕円または真円)グラデーションを作成]ボタン / [フィルのグラデーションを作成]ボタン / [ストロークのグラデーションを作成]ボタン)は、既存のグラデーションの種類や対象を切り替えるためのボタンではないためです

上記のボタン群は、新たにグラデーションを作成する際の設定を行うためのボタンです。 なお、すでにグラデーションを持っているオブジェクトの場合は、上記ボタンの設定を持つグラデーションで上書きされます。

新たにグラデーションを作成するには、オブジェクトを選択した状態でマウスの左ボタン(マウスの左ボタン)でドラッグします。 ドラッグ開始点がグラデーションの始点に、終了点がグラデーションの終点になります。

では、[放射(楕円または真円)グラデーションを作成]ボタン([放射(楕円または真円)グラデーションを作成]ボタン)と[ストロークのグラデーションを作成]ボタン([ストロークのグラデーションを作成]ボタン)が選択された状態のまま、選択中のオブジェクトのストロークをドラッグしてみましょう。

49. 選択中のオブジェクトのストロークをドラッグ
49. 選択中のオブジェクトのストロークをドラッグ

上図のように選択中のオブジェクトのストロークをドラッグします。 赤色の矢印はドラッグの動きを表しています。

50. ストロークの塗りの種類が放射グラデーションになる
50. ストロークの塗りの種類が放射グラデーションになる

上図のようにストロークに放射グラデーションがかかりました。 2本の丸ハンドルを持っていることから放射グラデーションだとわかります

このように、グラデーションツールでドラッグすることでもオブジェクトにグラデーションをかけることができます。 つまり、フィル/ストロークダイアログに頼らずにオブジェクトをグラデーションで塗ることができる、ということです。

ではここで、フィル/ストロークダイアログのグラデーションの一覧に注目してみましょう。 [グラデーションライブラリー]ボタン([グラデーションライブラリー]ボタン)をマウスの左ボタン(マウスの左ボタン)でクリックしてください。

51. グラデーションの一覧
51. グラデーションの一覧

上図のようにグラデーションの一覧に新たなグラデーションが追加されています。 これは、ストロークの放射グラデーションで追加されたグラデーションです。

重要なのは、『フィル』タブのグラデーションの一覧に表示されているということです。 これは、グラデーションの一覧には、ドキュメント内に存在する全ての線形グラデーション・放射グラデーションのグラデーションが表示されるためです。 そのため、ストロークで使われているグラデーションであっても、『フィル』タブに表示されるわけです。

では、新たに追加された "72475" のグラデーションの名前を変えましょう。 ただし、『フィル』タブで名前をクリックしないでください。 『フィル』タブでクリックしてしまうと、"72475" がフィルのグラデーションとして選択されてしまいます。

52. 『ストロークの塗り』タブに切り替えて名前を変える
52. 『ストロークの塗り』タブに切り替えて名前を変える

上図のように(1)の『ストロークの塗り』タブに切り替え、(2)の[グラデーションライブラリー]ボタン([グラデーションライブラリー]ボタン)を押し、(3)のグラデーションの名前の欄をマウスの左ボタン(マウスの左ボタン)でクリックします。

53. グラデーションの名前を変更する
53. グラデーションの名前を変更する

上図のようにグラデーションの名前を変更します。 今回は "For_Stroke" に変えてみました。

では、『フィル』タブに戻しましょう。

54. 『フィル』タブに戻す
54. 『フィル』タブに戻す

上図のように『フィル』タブに戻します。

次の記事へ

では、この辺で一区切りしましょう。 続きは次の記事を参照ください

ページの先頭へ
 

まとめ

色フェーズ(終端)とは、色を設定するための基点のことであり、線形グラデーションの始点・終点が色フェーズです。 初期状態では始点・終点しか作成されませんが、自分で中間点を追加することもできます。 中間点はいくつでも追加することができるため、3色のグラデーションはもちろん、4色でも5色にでも変化させることができます。

色フェーズを追加するには、まずは既存の色フェーズを選択しておく必要があります。 ただし、終点を選択しても色フェーズの追加はできません。 よって、初期状態では始点を選択することになります。

既存の色フェーズを選択したら、フィル/ストロークダイアログやツールコントロールの[新しい色フェーズを挿入]ボタン([新しい色フェーズを挿入]ボタン)を押します。 すると、新たな色フェーズが追加されます。 なお、中間点のハンドルは菱形で描かれます。

また、不要になった色フェーズは、フィル/ストロークダイアログやツールコントロールの[色フェーズを削除]ボタン([色フェーズを削除]ボタン)を押すことで削除することができます。

操作/コマンド 説明
[新しい色フェーズを挿入]ボタン 新たな色フェーズを追加する
[色フェーズを削除]ボタン 選択中の色フェーズを削除する

中間点も、始点・終点と同じようにマウス操作・キーボード操作で移動させることができます。 なお、中間点は、始点と終点を結ぶ線上にしか位置することができません。 つまり、スライドさせることしかできません。 なお、フィル/ストロークダイアログの終端オフセットやツールコントロールのオフセットでも位置を指定できます。 終端オフセットが 0.5 なら中間地点となり、0.0 なら始点と同じ位置、1.0 なら始点と同じ位置になります。

ツールコントロールの "新規:" のボタン([線形グラデーションを作成]ボタン / [放射(楕円または真円)グラデーションを作成]ボタン / [フィルのグラデーションを作成]ボタン / [ストロークのグラデーションを作成]ボタン)はオブジェクトを新たなグラデーションで塗る場合の指定を行うためのボタンです。 既存のグラデーションの種類や対象を切り替えるためのボタンではありません。 選択中のオブジェクトをマウスの左ボタン(マウスの左ボタン)のドラッグすると、"新規:" のボタン([線形グラデーションを作成]ボタン / [放射(楕円または真円)グラデーションを作成]ボタン / [フィルのグラデーションを作成]ボタン / [ストロークのグラデーションを作成]ボタン)のボタンの選択に応じてグラデーションがかかります。

操作/コマンド 説明
[線形グラデーションを作成]ボタン グラデーションツールでドラッグしたオブジェクトに線形グラデーションをかける
[放射(楕円または真円)グラデーションを作成]ボタン グラデーションツールでドラッグしたオブジェクトに放射グラデーションをかける
[フィルのグラデーションを作成]ボタン グラデーションツールでドラッグしたオブジェクトのフィルにグラデーションをかける
[ストロークのグラデーションを作成]ボタン グラデーションツールでドラッグしたオブジェクトのストロークにグラデーションをかける
ページの先頭へ