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

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

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

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

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

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

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

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

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

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

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

36. 中間点の色フェーズが追加される
36. 中間点の色フェーズが追加される

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

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

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

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

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. 始点を選択する
44. 始点を選択する

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

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

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

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

上図のように始点の色が緑色に戻りました

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

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

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

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

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

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

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

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

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

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

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

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

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

ではここで、フィル/ストロークダイアログ『フィル』タブに注目してください

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

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

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

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

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

上図のように『ストロークの塗り』タブに切り替えてから名前の欄をクリックしましょう。

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

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

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

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

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

次の記事へ

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

ページの先頭へ
 

まとめ

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

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

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

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

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

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

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

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