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

グラデーションの利用例

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

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

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

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

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

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

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

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

であれば、始点の色は、

となり、終点の色は、

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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