グラデーションの例
作例を３つ、手順を追って示します。
例１
線形グラデーションを用いて円筒を表現します。
もとの図形はこのようになっています。
部品を選択し線形グラデーションを指定します。
一見うまくできたように見えますが…
透明になっていて、下にある図形によって見え方が変わってしまいます。
グラデーションの編集をクリックします。
![[添付]](/~masahiko/moin.cgi/%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BE%8B?action=AttachFile&do=upload_form&ticket=0066489e98.f0fb39c801fe0dd99dc9a4ad122e71b4&target=sampleg02b.png "[添付]"){kind=small}
グラデーションエディタの一番上に現在のグラデーションが表示されます。
左端が青みがかった灰色、右端が透明(チェック表示)になっています。
- その下にある▼をクリックして両端の色を選ぶことができます。
![[添付]](/~masahiko/moin_static199/moniker/img/attach.png "[添付]")
![[添付]](/~masahiko/moin.cgi/%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BE%8B?action=AttachFile&do=upload_form&ticket=0066489e98.f0fb39c801fe0dd99dc9a4ad122e71b4&target=sampleg05a.png "[添付]"){kind=small}
stop4432を選びました。
オフセットは左端になっています。左端の色です。
A(不透明度)が右端になっていることを確認します。
- 色の調整はその上のRGB, CMYK, ホイールを使って行います。
-
![[添付]](/~masahiko/moin.cgi/%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BE%8B?action=AttachFile&do=upload_form&ticket=0066489e98.f0fb39c801fe0dd99dc9a4ad122e71b4&target=sampleg04a.png "[添付]"){kind=small}
もう一つのstop4434を選びました。
オフセットは右端になっています。右端の色です。
A(不透明度)が右端になっていません。修正が必要です。
-
![[添付]](/~masahiko/moin.cgi/%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BE%8B?action=AttachFile&do=upload_form&ticket=0066489e98.f0fb39c801fe0dd99dc9a4ad122e71b4&target=sampleg06a.png "[添付]"){kind=small}
色を修正します。
A(不透明度)を右端にします。
- 色の調整はその上のRGB, CMYK, ホイールを使って行います。
- どのようなグラデーションができたかは、一番上に表示されます。
- 同系色で暗い色と明るい色のグラデーションができました。
-
![[添付]](/~masahiko/moin.cgi/%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BE%8B?action=AttachFile&do=upload_form&ticket=0066489e98.f0fb39c801fe0dd99dc9a4ad122e71b4&target=sampleg07a.png "[添付]"){kind=small}
下の色が透けることのないグラデーションになりました。
次にグラデーションツールを用いて、グラデーションの向きを調整します。
- 両端をドラッグして位置を調整できます。
グラデーションの繰り返しで「リフレクト」を使ってみます。
![[添付]](/~masahiko/moin.cgi/%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BE%8B?action=AttachFile&do=upload_form&ticket=0066489e98.f0fb39c801fe0dd99dc9a4ad122e71b4&target=sampleg10a.png "[添付]"){kind=small}
このようになりました。
もう一度グラデーションツールを用いて、グラデーションの向きを調整します。
- 明るい方と暗い方を逆にしました。
上部の楕円の部分にもグラデーションを指定します。
- グラデーションは同じものを指定します。
- グラデーションの向きは修正が必要です。
例２
透明なグラデーションは同じ形の部品に重ねて使います。
- 複製したものにグラデーションを指定し、それらを重ねます。
- ぴったり重ねる方法は後日解説予定。
例１と同じ表現を行うには次のようにします。
- 左はもとの図形で単色で塗られています。
- これに白と透明でできたグラデーションを重ねます。
- 結果、右のようになります。
グラデーションの左端は、不透明で白にします。
![[添付]](/~masahiko/moin.cgi/%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BE%8B?action=AttachFile&do=upload_form&ticket=0066489e98.f0fb39c801fe0dd99dc9a4ad122e71b4&target=sampleg16a.png "[添付]"){kind=small}
グラデーションの右端は、透明で黒にします。
![[添付]](/~masahiko/moin.cgi/%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BE%8B?action=AttachFile&do=upload_form&ticket=0066489e98.f0fb39c801fe0dd99dc9a4ad122e71b4&target=sampleg17a.png "[添付]"){kind=small}
例３
放射状グラデーションを用いて花を表現します。
もとの図形はこのようになっています。
一番手前の花びらを選んで放射状グラデーションを指定します。
透明なグラデーションが作成されます。
グラデーションの編集を行います。
- 放射状グラデーションの場合、左右を間違えないように。
左端を中心の色にします。
A(不透明度)が右端になっていることを確認します。
- 色は思った色より、少し濃い目にするとよい。
-
![[添付]](/~masahiko/moin.cgi/%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BE%8B?action=AttachFile&do=upload_form&ticket=0066489e98.f0fb39c801fe0dd99dc9a4ad122e71b4&target=sampleg22a.png "[添付]"){kind=small}
右端を周辺部の色にします。
A(不透明度)を右端にします。
- 色は思った色より、少し明るめにするとよい。
-
![[添付]](/~masahiko/moin.cgi/%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BE%8B?action=AttachFile&do=upload_form&ticket=0066489e98.f0fb39c801fe0dd99dc9a4ad122e71b4&target=sampleg23a.png "[添付]"){kind=small}
下が透けて見えないことを確認します。
グラデーションの向きを調整します。
このようになりました。
次の花びらを選びます。
放射状グラデーションを指定します。
- ▼を押し、先に作ったグラデーションを選びます。
-
![[添付]](/~masahiko/moin.cgi/%E3%82%B0%E3%83%A9%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BE%8B?action=AttachFile&do=upload_form&ticket=0066489e98.f0fb39c801fe0dd99dc9a4ad122e71b4&target=sampleg28a.png "[添付]"){kind=small}
グラデーションの向きを調整します。
残りの花びらも同様に行います。
ふち(線)の色をなしにするとこのようになります。