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

  

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

この記事では、線形グラデーションと放射グラデーションについて解説します。 これら2つのグラデーションは使い方が似ているため、まとめて解説することにしました。 なお、メッシュグラデーションは使い方が大きく異るため、ここでは解説しません

 

線形グラデーションも放射グラデーションも、フィルやストロークの塗りの種類の1つです。 なお、フィルとストロークの属性は別々に管理されているため、フィルとストロークに異なるグラデーションを設定することができます

  
メッシュグラデーションの利用方法の詳細については、知っておきたい機能 > フィルとストローク > メッシュグラデーション(格子状・円錐状の色の変化)を参照ください。

グラデーションの利用例

では、実際に線形グラデーションと放射グラデーションを使用してみましょう。 何でもいいので、形状も色(フィル)も異なるシェイプを2つ作成します

なお、どちらのシェイプもフィルの塗りは単一色としてください。 また、どちらのシェイプにも幅の太い黒色のストロークを設定してください

1. 楕円と矩形のシェイプ
1. 楕円と矩形のシェイプ

上図のように色の異なる楕円と矩形のシェイプを用意しました。 また、黒色の太めのストロークを持たせています

では、フィル/ストロークダイアログを開きましょう。

2. フィル/ストローク(F)...を実行
2. フィル/ストローク(F)...を実行

上図のように対象のオブジェクトをマウスの右ボタン(マウスの右ボタン)でクリックし、表示されるサブメニューの"フィル/ストローク(F)..."を実行します。

3. フィル/ストロークダイアログが開く
3. フィル/ストロークダイアログが開く

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

4. フィルが線形グラデーションで塗られる
4. フィルが線形グラデーションで塗られる

上図のように楕円のシェイプのフィルが線形グラデーションで塗られます。 なお、始点と終点の初期の色は自動的に決定されます

始点の色は元の色の完全不透明色で、終点の色は元の色の完全透明色です。 例えば、元の色(単一色)のRGBAが、

赤成分(R) 80
緑成分(G) 40
青成分(B) 60
不透明度(A) 50

であれば、始点の色は、

赤成分(R) 80
緑成分(G) 40
青成分(B) 60
不透明度(A) 100

となり、終点の色は、

赤成分(R) 80
緑成分(G) 40
青成分(B) 60
不透明度(A) 0

となります。 つまり、元の色から変化するのは不透明度(A)のみです

では次に、フィル/ストロークダイアログのグラデーションの一覧に注目してみましょう

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

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

一覧の左列にはグラデーションの色が表示されています。 この色は、すでに説明したように元の色の完全不透明色から元の色の完全透明色に変化する色です

中列の "835" はグラデーションの名前です。 自動的に割り当てられたものですが、名前はいつでも変えることができます。

右列の # は利用数、つまり、参照されている数です。 現状は 1 ですが、これは、このオブジェクトのフィルでのみで利用されているという意味です

では次に、グラデーションの名前を "835" から、わかりやすい名前にかえてみましょう

6. グラデーションの名前をクリックする
6. グラデーションの名前をクリックする

上図のようにグラデーションの名前の欄をクリックします。

7. グラデーションの名前が編集可能になる
7. グラデーションの名前が編集可能になる

上図のようにグラデーションの名前が編集可能になります。 キーボードから好きな名前を入力し、最後にEnterキーを押してください。 なお、日本語は入力できませんので、日本語入力をオフにして英数字で入力してください。 また、空白も入力できません。 空白は _(アンダースコア) に変換されます。

  
Windows版とLinux版の両方で日本語入力を行ってみましたがどちらの環境でも文字化けします。
8. グラデーションの名前を変更する
8. グラデーションの名前を変更する

上図のようにグラデーションの名前を変更します。 今回の例では "Green_To_Red" という名前にしています。

では次に、グラデーションの色を変えてみましょう。 "Green_To_Red" という名前の通り、緑色から赤色に変化させます。

9. [グラデーションを編集]ボタンを押す
9. [グラデーションを編集]ボタンを押す

上図のようにグラデーションの一覧の下にある[グラデーションを編集]ボタン([グラデーションを編集]ボタン)を押します。

10. グラデーションツールに切り替わる
10. グラデーションツールに切り替わる

上図のようにグラデーションツールに切り替わり、画面上部のツールコントロールもグラデーションツール用に変化しています

また、選択中のオブジェクトにグラデーションハンドルが表示されています。 線形グラデーションでは、四角ハンドルが始点で丸ハンドルが終点です。

まずは、始点の色を変更しましょう。 そのためには、始点を選択する必要があります。 すでに説明したように始点は四角ハンドルです。

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

上図のように始点をマウスの左ボタン(マウスの左ボタン)でクリックします。

12. 始点が選択される
12. 始点が選択される

上図のように始点が選択されます。 選択されるとハンドルの色が白色から青色に変化します

では、始点を選択したままフィル/ストロークダイアログに注目してください。

13. 色の入力欄が表示される
13. 色の入力欄が表示される

上図のように色の入力欄が表示されます。 なお、[単一色]ボタン([単一色]ボタン)が選択されていますが、これは一時的なものです。

グラデーションの始点や終点を選択すると、このように[単一色]ボタン([単一色]ボタン)が選択されている状態になります。 決して、塗りの種類が単一色に切り替わったわけではありません

では、色の入力欄の R G B A にそれぞれ 0 255 0 100 を入力します。 つまり、緑色を入力します

14. 始点の色が緑色になる
14. 始点の色が緑色になる

上図のようにグラデーションの始点の色が緑色に変わりました。 このように、グラデーションツールで始点(または終点)を選択している間は、フィル/ストロークダイアログで色を設定することができます

では続いて、終点の色を変えてみましょう。 なお、終点は丸ハンドルです。 ただし、キャンバス上ではなく画面上部のツールコントロールから選択してみましょう

15. 色フェーズから終点を選ぶ
15. 色フェーズから終点を選ぶ

上図のように画面上部のツールコントロールの色フェーズの一覧で終点を選択します。 名前ではどれが終点かは判断できませんので、左の色で判断しましょう。 色の左半分が透明を表す市松模様であることから、終点であることがわかります

  
色フェーズとは、グラデーションの始点・終点のことです。 始点・終点の他に自分で中間点を追加することもできます。 追加した中間点も色フェーズです。
16. 終点が選択される
16. 終点が選択される

上図のように終点が選択されます。 終点も、選択中は青色で描画されます

では、終点には赤色を設定しましょう。

17. 赤色を設定する
17. 赤色を設定する

上図のように色の入力欄の R G B A にそれぞれ 255 0 0 100 を入力してください。

18. 終点の色が赤色になる
18. 終点の色が赤色になる

上図のようにグラデーションの終点の色が赤色に変わりました。 このグラデーションには "Green_To_Red" という名前をつけましたが、ようやくその色になりました

では次に、始点を移動させてみましょう。 マウス操作でもキーボード操作でも移動できますが、まずはマウスで移動させてみます

始点をマウスの左ボタン(マウスの左ボタン)でドラッグします。

19. グラデーションの四角ハンドルをドラッグ
19. グラデーションの四角ハンドルをドラッグ

上図のようにグラデーションの四角ハンドルをドラッグします。 赤色の矢印はドラッグの動きを表しています。

  
CTRLキーを押しながらドラッグすることでグラデーションの角度を15度単位で調整することができます。 始点と終点を結ぶ線が、15度単位で回転するという意味です。
20. 始点が右へ移動する
20. 始点が右へ移動する

上図のように始点が右へ移動します。 始点より左側、つまり、範囲外の部分が緑色であることに注目してください。 始点側の範囲外の領域が、始点と同じ緑色で描かれています。

続いては、終点を移動させます。 今回はキーボード操作で動かしましょう。 まずは、終点を選択しなくてはなりません。

21. 終点をクリックする
21. 終点をクリックする

上図のように終点をマウスの左ボタン(マウスの左ボタン)でクリックします。

22. 終点を選択する
22. 終点を選択する

上図のように終点が選択されます。

では、キーボードで移動しましょう。 キーボードのカーソルキー()を押すことで、選択中のハンドルを移動させることができます。

  
SHIFTキーを押しながらだと大きく、ALTキーを押しながらだと細かく移動させることができます。
23. 終点を左へ移動する
23. 終点を左へ移動する

上図のように終点を左へ移動します。 このように、キーボードでもハンドルを移動させることができます。 なお、終点より右側、つまり、範囲外の部分が赤色で描かれています

ではここで始点・終点の色を入れ替えてみましょう。 始点・終点が入れ替わるのではなく、グラデーションに設定されている開始色と終了色の入れ替えです

24. [グラデーションの方向を反転]ボタンを押す
24. [グラデーションの方向を反転]ボタンを押す

上図のように画面上部のツールコントロールの[グラデーションの方向を反転]ボタン([グラデーションの方向を反転]ボタン)を押します。

25. グラデーションの始点・終点の色が入れ替わる
25. グラデーションの始点・終点の色が入れ替わる

上図のようにグラデーションの開始色・終了色が入れ替わります。 緑色 → 赤色から、赤色 → 緑色に変わりました。

では次に、繰り返しの設定を変えます。 繰り返しの設定とは、始点・終点の範囲外の領域をどう塗るかの設定です。 現状、始点側も終点側も範囲外の領域にはグラデーションはかかりませんが、これを変更します。

26. 繰り返しに "リフレクト" を選択
26. 繰り返しに "リフレクト" を選択

上図のように画面上部のツールコントロールの繰り返しに "リフレクト" を選択します

27. 範囲外には反転したグラデーションがかかる
27. 範囲外には反転したグラデーションがかかる

上図のように始点・終点の範囲外にもグラデーションがかかります。 まるで始点・終点のそれぞれの位置に鏡でも置かれているようにグラデーションが反転しているのがわかります

このように繰り返しに "リフレクト" を選択すると、始点・終点の位置でグラデーションが反転します

では次に、繰り返しに "ダイレクト" を選択してみましょう。

28. 繰り返しに "ダイレクト" を選択
28. 繰り返しに "ダイレクト" を選択

上図のように画面上部のツールコントロールの繰り返しに "ダイレクト" を選択します

29. 範囲外には繰り返されるグラデーションがかかる
29. 範囲外には繰り返されるグラデーションがかかる

上図のように始点・終点の範囲外にもグラデーションはかかったままです。 ただし反転してはおらず、同じものが繰り返されています

では、繰り返しを元に戻しましょう。 繰り返しに "なし" を選択します。

30. 繰り返しに "なし" を選択
30. 繰り返しに "なし" を選択

上図のように画面上部のツールコントロールの繰り返しに "なし" を選択します

31. 範囲外にはグラデーションはかからない
31. 範囲外にはグラデーションはかからない

上図のように始点・終点の範囲外にはグラデーションはかからなくなりました。

ではここで始点・終点の色を入れ替えて、緑色 → 赤色に戻しましょう

32. [グラデーションの方向を反転]ボタンを押す
32. [グラデーションの方向を反転]ボタンを押す

上図のように画面上部のツールコントロールの[グラデーションの方向を反転]ボタン([グラデーションの方向を反転]ボタン)を押します。

33. グラデーションの始点・終点の色が入れ替わる
33. グラデーションの始点・終点の色が入れ替わる

上図のようにグラデーションの始点・終点の色が入れ替わります。 赤色 → 緑色から、緑色 → 赤色に戻りました。

次の記事へ

長くなってきましたので、そろそろ一区切りします。 続きは次の記事を参照ください

  
  

まとめ

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

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

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

グラデーションの一覧でグラデーションの名前をクリックすることで、グラデーションの名前を変更することができます。 なお、日本語を入力することはできません。 また、空白は _(アンダースコア) に変換されます。

フィル/ストロークダイアログの[グラデーションを編集]ボタン([グラデーションを編集]ボタン)を押すと、グラデーションツールに切り替わり、画面上部のツールコントロールもグラデーションツール用に変化します。 また、選択中のオブジェクトにグラデーションハンドルが表示されるようになります。 線形グラデーションでは、始点は四角ハンドルで、終点は丸ハンドルで描かれます。

操作/コマンド 説明
[グラデーションを編集]ボタン グラデーションを編集する
※グラデーションツールに切り替わる

始点や終点はマウスの左ボタン(マウスの左ボタン)のクリックで選択することができます。 また、ツールコントロールの色フェーズの一覧から選択することもできます。

始点や終点を選択中は、フィル/ストロークダイアログでグラデーションの色を変更できるようになります。 始点を選択中は開始色を、終点を選択中は終了色を変更できます。

始点や終点はマウスの左ボタン(マウスの左ボタン)のドラッグで移動することができます。 また、選択中であればキーボードのカーソルキー()を押すことでも移動できます。 SHIFTキーを押しながらだと大きく、ALTキーを押しながらだと細かく移動させることができます。

ツールコントロールの[グラデーションの方向を反転]ボタン([グラデーションの方向を反転]ボタン)を押すことで、グラデーションの開始色と終了色を入れ替えることができます。

操作/コマンド 説明
[グラデーションの方向を反転]ボタン グラデーションの開始色と終了色を入れ替える

ツールコントロールの繰り返しには "なし"、"リフレクト"、"ダイレクト" があります。 "なし" では範囲外の領域にはグラデーションはかかりません。 "リフレクト" では始点・終点に鏡でも置かれているかのようにグラデーションが反射します。 "ダイレクト" ではグラデーションが繰り返されます。

メニュー