トップ > 知っておきたい機能 > フィルとストローク >
線形グラデーションと放射グラデーション(その3)

  

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

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

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

では次に、矩形のシェイプにもグラデーションを設定しましょう。 矩形のシェイプのフィルに、放射グラデーションを設定します。 まずは、矩形のシェイプを選択します。

55. グラデーションツールで矩形のシェイプをクリックする
55. グラデーションツールで矩形のシェイプをクリックする

上図のようにグラデーションツールのままで矩形のシェイプをクリックします。 グラデーションツールではマウスの左ボタン(マウスの左ボタン)でクリックすることでオブジェクトを選択することができます。

56. [放射グラデーション]ボタンを選択する
56. [放射グラデーション]ボタンを選択する

上図のようにフィル/ストロークダイアログの[放射グラデーション]ボタン([放射グラデーション]ボタン)を押します。

57. フィルが放射グラデーションで塗られる
57. フィルが放射グラデーションで塗られる

上図のように矩形のシェイプのフィルが放射グラデーションで塗られます。 線形グラデーションと同じように、初期の色は自動的に決定されます

なお、線形グラデーションとは違い、四角ハンドルは中心点を、丸ハンドルは半径を表します。 丸ハンドルが2本あるのは、真円だけでなく楕円も表現できるようにするためです。 2本の丸ハンドルの長さを同じにすれば真円に、変えれば楕円になります。

  
直角に交差する2本の丸ハンドルは角度を変えることはできません。 常に90度の差を保つように連動します。

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

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

上図のようにグラデーションの一覧にグラデーションが追加されています。 これは、塗りの種類を単一色から放射グラデーションに変えたことによって新たに作成されたグラデーションです。

ではここで、たった今作られた "81581" グラデーションをやめて、すでに存在している "Green_To_Red" グラデーションに切り替えましょう。 グラデーションの一覧で "Green_To_Red" グラデーションを、マウスの左ボタン(マウスの左ボタン)でクリックします。

59. グラデーションの一覧からグラデーションを選択する
59. グラデーションの一覧からグラデーションを選択する

上図のようにグラデーションの一覧から "Green_To_Red" を選択します。

60. グラデーションの色が変わる
60. グラデーションの色が変わる

上図のように矩形のシェイプのグラデーションの色が変わります。 緑色 → 赤色のグラデーションになりました。

ではここで、グラデーションの一覧に注目してください

61. 元のグラデーションが消えた
61. 元のグラデーションが消えた

上図のように "Green_To_Red" グラデーションの利用数(#)が 2 になっています。 楕円と矩形のシェイプの両方で利用されているためです。

また、先ほど作成された "81581" グラデーションが削除されています。 利用されなくなっため、自動的に削除されたというわけです

ではここで、中心点の色を青色に変えてみましょう。

62. 中心点を選択する
62. 中心点を選択する

上図のように中心点を選択します。

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

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

64. 矩形のシェイプの中心点の色が青色になるが楕円のシェイプは変化しない
64. 矩形のシェイプの中心点の色が青色になるが楕円のシェイプは変化しない

上図のように矩形のシェイプの中心点の色が青色になりました。 ただし、楕円のシェイプの始点のグラデーションは変化していません

なぜ、どちらのシェイプのフィルも "Green_To_Red" グラデーションを利用しているのに、片方だけしか色が変わっていないのでしょうか。 グラデーションの一覧を見えれば理由がわかります

[グラデーションライブラリー]ボタン([グラデーションライブラリー]ボタン)をマウスの左ボタン(マウスの左ボタン)でクリックしてください。

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

上図のようにグラデーションの一覧に新たに "85945" グラデーションが追加され、そちらが選択された状態になっています。 よって、"Green_To_Red" グラデーションの利用数(#)が 1 に減っています。 なお、青色が設定されたのは "85945" グラデーションであり、"Green_To_Red" グラデーションは緑色 → 赤色のままです。

このように、同じグラデーションを複数で利用している場合、つまり、利用数(#)が 2 以上の場合は、色を変えると自動的にグラデーションが複製されます

  
グラデーションが自動的に複製されず、色の変更が他のオブジェクトと連動する条件もあります。 それは、オブジェクトを複製(プルダウンメニューの"編集(E)" -> "複製(A)" / キーボードのCTRL+D)し、その場所から移動させていない場合です。 オブジェクトを複製して移動させていない場合は、複製元と複製先でグラデーションの色の変更が連動します。
  
Inkscape 1.3系からは、自動的に複製されたグラデーションは、複製元も複製先も同じ名前になります。 なお、内部的には異なる識別子が与えられているものと思われます。

ではここで、"85945" グラデーションをやめて、"Green_To_Red" グラデーションに戻しましょう。 グラデーションの一覧で "Green_To_Red" グラデーションを、マウスの左ボタン(マウスの左ボタン)でクリックします。

66. グラデーションの一覧からグラデーションを選択する
66. グラデーションの一覧からグラデーションを選択する

上図のようにグラデーションの一覧から "Green_To_Red" を選択します。

67. グラデーションの色が変わる
67. グラデーションの色が変わる

上図のように矩形のシェイプのグラデーションの色が変わります。 緑色 → 赤色のグラデーションに戻りました

グラデーションの一覧も確認してみましょう

68. "85945" のグラデーションが消えた
68. "85945" のグラデーションが消えた

上図のように "Green_To_Red" グラデーションの利用数(#)が 2 に戻りました。 また、不要になった "85945" グラデーションが削除されています。

では次に、グラデーションの自動的な複製の機能をオフにしてグラデーションの色を変更してみましょう

69. [関連するすべてのグラデーションを変更するためにグラデーションをリンク]ボタンを押す
69. [関連するすべてのグラデーションを変更するためにグラデーションをリンク]ボタンを押す

上図のようにツールコントロールの[関連するすべてのグラデーションを変更するためにグラデーションをリンク]ボタン([関連するすべてのグラデーションを変更するためにグラデーションをリンク]ボタン)を押します。

ではこの状態のまま、先ほどと同じように中心点の色を青色に変えましょう

70. 中心点を選択する
70. 中心点を選択する

上図のように中心点を選択します。

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

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

72. 矩形のシェイプの中心点と楕円のシェイプの始点が青色になる
72. 矩形のシェイプの中心点と楕円のシェイプの始点が青色になる

上図のように矩形のシェイプの中心点の色が青色になりました。 そして、楕円のシェイプの始点のグラデーションも青色になっています

さらに、グラデーションの一覧も見てみましょう

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

上図のように "Green_To_Red" グラデーションの利用数(#)は 2 のままです。 グラデーションが自動的に複製されなかったということです。

このように、ツールコントロールの[関連するすべてのグラデーションを変更するためにグラデーションをリンク]ボタン([関連するすべてのグラデーションを変更するためにグラデーションをリンク]ボタン)をオンにすることで、自動的なグラデーションの複製を無効にすることができます。 これにより、複数のオブジェクトのフィル/ストロークでグラデーションを共有することができます

まだ説明しておきたいことがありますので、もう少しグラデーションで遊んでみましょう。 ひとまず、ツールコントロールの[関連するすべてのグラデーションを変更するためにグラデーションをリンク]ボタン([関連するすべてのグラデーションを変更するためにグラデーションをリンク]ボタン)をオフにします

74. [関連するすべてのグラデーションを変更するためにグラデーションをリンク]ボタンをオフにする
74. [関連するすべてのグラデーションを変更するためにグラデーションをリンク]ボタンをオフにする

上図のようにツールコントロールの[関連するすべてのグラデーションを変更するためにグラデーションをリンク]ボタン([関連するすべてのグラデーションを変更するためにグラデーションをリンク]ボタン)をオフにします。

ではここで、"Green_To_Red" グラデーションの開始色を戻しておきましょう。 画面上部のプルダウンメニューの"編集(E)" -> "元に戻す(U)"を実行します(またはキーボードのCTRL+Zを押します)。

  
1回分元に戻しただけでは緑色 → 赤色のグラデーションには戻りません。 何度かプルダウンメニューの"編集(E)" -> "元に戻す(U)"(またはキーボードのCTRL+Z)を実行しましょう。
75. グラデーションの開始色が緑色に戻る
75. グラデーションの開始色が緑色に戻る

上図のようにグラデーションの開始色を緑色に戻します。 楕円と矩形のシェイプのフィルも、もちろん元の色に戻っています。

ではここで、選択中の矩形のシェイプを複製してみましょう

76. 編集(E) -> 複製(A)を実行
76. 編集(E) -> 複製(A)を実行

上図のように画面上部のプルダウンメニューの"編集(E)" -> "複製(A)"を実行します(またはキーボードのCTRL+Dを押します)。

77. 矩形のシェイプが複製される
77. 矩形のシェイプが複製される

上図のように矩形のシェイプが複製されます。 なお、コピー元と完全に重なっているため見た目ではわかりません

では、グラデーションの一覧も見てみましょう

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

上図のように "Green_To_Red" グラデーションの利用数(#)が 3 に増えています。 これは、複数先の矩形のシェイプでも同じグラデーションが利用されているためです。

では、またまた中心点の色を青色に変えましょう

79. 中心点を選択する
79. 中心点を選択する

上図のように中心点を選択します。

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

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

81. 矩形のシェイプの中心点の色が青色になるが楕円のシェイプは変化しない
81. 矩形のシェイプの中心点の色が青色になるが楕円のシェイプは変化しない

上図のように矩形のシェイプの中心点の色が青色になりましたが、楕円のシェイプの始点のグラデーションは変化していません。 なお、楕円のシェイプの始点のグラデーションが変化しないのは予想通りです

では、グラデーションの一覧を確認してみましょう

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

上図のようにグラデーションの一覧に新たに "118103" グラデーションが追加されています。 そして注目すべきなのが、"118103" グラデーションの利用数(#)が 2 になっていることです。 つまり、複製元と複製先で同じグラデーションが利用されているということです

このように、複製であればグラデーションの自動的な複製の機能は働きません。 複製先・複製先で同じグラデーションを共有することができます。 ただし、複製した直後に限っての話です

では次に、複製後にオブジェクトを移動させた場合も見てみましょう。 ひとまず、色の変更を戻しておきましょう。 画面上部のプルダウンメニューの"編集(E)" -> "元に戻す(U)"を実行します(またはキーボードのCTRL+Zを押します)。

  
1回分元に戻しただけでは緑色 → 赤色のグラデーションには戻りません。 何度かプルダウンメニューの"編集(E)" -> "元に戻す(U)"(またはキーボードのCTRL+Z)を実行しましょう。
83. グラデーションの色が戻る
83. グラデーションの色が戻る

上図のように矩形のシェイプのグラデーションの色を緑色 → 赤色のグラデーションに戻します

グラデーションの一覧も確認しましょう。

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

上図のように "Green_To_Red" グラデーションの利用数(#)が 3 に戻っています

では複製先の矩形のシェイプを移動させましょう。 まずは、選択ツールに切り替えます。

85. 選択ツールを選択
85. 選択ツールを選択

上図のように画面左部にあるツールボックスから選択ツールを選択します(またはキーボードのS(またはF1キー)を押します)。

では矩形のシェイプをマウスで移動させましょう。 矩形のシェイプをマウスの左ボタン(マウスの左ボタン)でドラッグします。

86. 矩形のシェイプをドラッグ
86. 矩形のシェイプをドラッグ

上図のように矩形のシェイプをドラッグします。 赤色の矢印はドラッグの動きを表しています。

87. 複製先の矩形のシェイプが移動する
87. 複製先の矩形のシェイプが移動する

上図のように複製先の矩形のシェイプが移動します。 では、グラデーションツールに切り替えましょう。

88. グラデーションツールを選択
88. グラデーションツールを選択

上図のように画面左部にあるツールボックスからグラデーションツールを選択します(またはキーボードのCTRL+F1キーを押します)。

では、中心点の色を青色に変えましょう

89. 中心点を選択する
89. 中心点を選択する

上図のように中心点を選択します。

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

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

91. 複製先の矩形のシェイプの中心点の色が青色になるが複製元の矩形のシェイプは変化しない
91. 複製先の矩形のシェイプの中心点の色が青色になるが複製元の矩形のシェイプは変化しない

上図のように複製先の矩形のシェイプの中心点の色が青色になりますが、複製元の矩形のシェイプは変化していません。 つまり、グラデーションの自動的な複製の機能が働いたということです。 このように、複製後に移動すればグラデーションの自動的な複製の機能が働きます

グラデーションの一覧がどうなっているかも確認してみましょう。

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

上図のように新たに作成された "121319" グラデーションの利用数(#)は 1 です。 つまり、複製先のオブジェクトのみで利用されています。 もちろん、"Green_To_Red" グラデーションの利用数(#)は 2 です。

ではここで、新たに作成された "121319" グラデーションの名前を変えておきましょう。

93. グラデーションの名前を変える
93. グラデーションの名前を変える

上図のようにグラデーションの名前を "Blue_To_Red" に変更します。

最後に、複製後に移動させず、かつ、グラデーションを共有させない方法を説明します。 では、現在選択中の矩形のシェイプ("Blue_To_Red" グラデーションを利用しているシェイプ)をさらに複製しましょう

94. 編集(E) -> 複製(A)を実行
94. 編集(E) -> 複製(A)を実行

上図のように画面上部のプルダウンメニューの"編集(E)" -> "複製(A)"を実行します(またはキーボードのCTRL+Dを押します)。

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

上図のように "Blue_To_Red" グラデーションの利用数(#)が 2 に増えています。 これは、複数先の矩形のシェイプでも同じグラデーションを利用しているためです。

このように、複製元・複製先で同じグラデーションを共有していますが、オブジェクトを移動させることなく複製元・複製先で異なるグラデーションを利用させましょう

96. [グラデーションの複製を作成]ボタンを押す
96. [グラデーションの複製を作成]ボタンを押す

上図のようにグラデーションライブラリの下部にある[グラデーションの複製を作成]ボタン([グラデーションの複製を作成]ボタン)を押します。

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

上図のようにグラデーションの一覧に "Blue_To_Red-1" というグラデーションが新たに追加されています。 利用数(#)が 1 であることから、複製元・複製先で共有されていないことがわかります

このように[グラデーションの複製を作成]ボタン([グラデーションの複製を作成]ボタン)を押すことで、複製後に移動させることなく複製元・複製先で異なるグラデーションを利用させることができます。

  
  

まとめ

フィル/ストロークダイアログで[放射グラデーション]ボタン([放射グラデーション]ボタン)を押すことで、塗りの種類を放射グラデーションに変えることができます。

操作/コマンド 説明
[放射グラデーション]ボタン 塗りの種類を放射グラデーションに変更する

塗りの種類を放射グラデーションに変えると、自動的にグラデーションが作成されます。 作成されるグラデーションの色は、元の色の完全不透明色から元の色の完全透明色に変化する色です。

なお、放射グラデーションでは、四角ハンドルは中心点を丸ハンドルは半径を表します。 丸ハンドルが2本あるのは、真円だけでなく楕円も表現できるようにするためです。 2本の丸ハンドルの長さを同じにすれば真円に、変えれば楕円になります。

グラデーションの一覧には、ドキュメント内に存在する全てのグラデーションが表示されます。 線形グラデーションと放射グラデーションの区別はなく、どちらで利用中のグラデーションも表示されます。

グラデーションの一覧では、グラデーションを選択することができます。 それにより、他のオブジェクトとグラデーションを共有することができます。 ただし、グラデーションの色を変更すると、グラデーションが自動的に複製されます。 結果、グラデーションの共有は解除されます。

ツールコントロールの[関連するすべてのグラデーションを変更するためにグラデーションをリンク]ボタン([関連するすべてのグラデーションを変更するためにグラデーションをリンク]ボタン)をオンにすると、グラデーションの自動的な複製は無効になります。 グラデーションの色を変更すると、利用している他のオブジェクトも連動して色が変わります。

なお、オブジェクトを複製し、複製後に移動しない場合は[関連するすべてのグラデーションを変更するためにグラデーションをリンク]ボタン([関連するすべてのグラデーションを変更するためにグラデーションをリンク]ボタン)がオフの状態でもグラデーションは共有されます。

複製後にオブジェクトを移動させることなく複製元・複製先で異なるグラデーションを利用したい場合はフィル/ストロークダイアログにある[グラデーションの複製を作成]ボタン([グラデーションの複製を作成]ボタン)を押してグラデーションを複製しましょう。

操作/コマンド 説明
[関連するすべてのグラデーションを変更するためにグラデーションをリンク]ボタン グラデーションの自動的な複製を無効にする
※グラデーションの色を変えてもグラデーションが共有されたままになる
[グラデーションの複製を作成]ボタン グラデーションを複製する
メニュー