welcome: please sign in
location: "グラデーションの例"の差分
20と21のリビジョン間の差分
2011-11-08 01:58:18時点のリビジョン20
サイズ: 4673
編集者: masahiko
コメント:
2011-11-08 02:07:23時点のリビジョン21
サイズ: 5383
編集者: masahiko
コメント:
削除された箇所はこのように表示されます。 追加された箇所はこのように表示されます。
行 88: 行 88:

下が透けて見えないことを確認します。
 . {{attachment:sampleg24.png}}
グラデーションの向きを調整します。
 . {{attachment:sampleg25.png}}
このようになりました。
 . {{attachment:sampleg26.png}}
次の花びらを選びます。
 . {{attachment:sampleg27.png}}
放射状グラデーションを指定します。
 . ▼を押し、先に作ったグラデーションを選びます。
 . {{attachment:sampleg28a.png}}
グラデーションの向きを調整します。
 . {{attachment:sampleg29.png}}
残りの花びらも同様に行います。
 . {{attachment:sampleg30.png}}
ふち(線)の色を'''なし'''にするとこのようになります。

グラデーションの例

作例を3つ、手順を追って示します。


例1

線形グラデーションを用いて円筒を表現します。

  • sampleg13.png sampleg14.png

もとの図形はこのようになっています。

  • sampleg00.png

部品を選択し線形グラデーションを指定します。

  • sampleg02a.png

一見うまくできたように見えますが…

  • sampleg01.png

透明になっていて、下にある図形によって見え方が変わってしまいます。

  • sampleg03.png

グラデーションの編集をクリックします。

  • [添付]

グラデーションエディタの一番上に現在のグラデーションが表示されます。

  • 左端が青みがかった灰色、右端が透明(チェック表示)になっています。

  • その下にある▼をクリックして両端の色を選ぶことができます。
  • [添付]

stop4432を選びました。

  • オフセットは左端になっています。左端の色です。

  • A(不透明度)が100になっていることを確認します。

  • 色の調整はその上のRGB, CMYK, ホイールを使って行います。
  • [添付]

もう一つのstop4434を選びました。

  • オフセットは右端になっています。右端の色です。

  • A(不透明度)が100になっていません。修正が必要です。

  • [添付]

色を修正します。

  • A(不透明度)を100にします。

  • 色の調整はその上のRGB, CMYK, ホイールを使って行います。
  • どのようなグラデーションができたかは、一番上に表示されます。
  • 同系色で暗い色と明るい色のグラデーションができました。
  • [添付]

下の色が透けることのないグラデーションになりました。

  • sampleg08.png

次にグラデーションツールを用いて、グラデーションの向きを調整します。

  • 両端をドラッグして位置を調整できます。
  • sampleg09.png

グラデーションの繰り返しで「リフレクト」を使ってみます。

  • [添付]

このようになりました。

  • sampleg11.png

もう一度グラデーションツールを用いて、グラデーションの向きを調整します。

  • 明るい方と暗い方を逆にしました。
  • sampleg12.png

上部の楕円の部分にもグラデーションを指定します。

  • グラデーションは同じものを指定します。
  • グラデーションの向きは修正が必要です。
  • sampleg13.png


例2

透明なグラデーションは同じ形の部品に重ねて使います。

  • 複製したものにグラデーションを指定し、それらを重ねます。
  • ぴったり重ねる方法は後日解説予定。

例1と同じ表現を行うには次のようにします。

  • 左はもとの図形で単色で塗られています。
  • これに白と透明でできたグラデーションを重ねます。
  • 結果、右のようになります。
  • sampleg15.png

グラデーションの左端は、不透明で白にします。

  • [添付]

グラデーションの右端は、透明で黒にします。

  • [添付]


例3

放射状グラデーションを用いて花を表現します。

  • sampleg31.png

もとの図形はこのようになっています。

  • sampleg18.png

一番手前の花びらを選んで放射状グラデーションを指定します。

  • sampleg20a.png

透明なグラデーションが作成されます。

  • sampleg19.png

グラデーションの編集を行います。

  • 放射状グラデーションの場合、左右を間違えないように。

左端を中心の色にします。

  • A(不透明度)が100になっていることを確認します。

  • 色は思った色より、少し濃い目にするとよい。
  • [添付]

右端を周辺部の色にします。

  • A(不透明度)を100にします。

  • 色は思った色より、少し明るめにするとよい。
  • [添付]

下が透けて見えないことを確認します。

  • sampleg24.png

グラデーションの向きを調整します。

  • sampleg25.png

このようになりました。

  • sampleg26.png

次の花びらを選びます。

  • sampleg27.png

放射状グラデーションを指定します。

  • ▼を押し、先に作ったグラデーションを選びます。
  • [添付]

グラデーションの向きを調整します。

  • sampleg29.png

残りの花びらも同様に行います。

  • sampleg30.png

ふち(線)の色をなしにするとこのようになります。

  • sampleg31.png

グラデーションの例 (最終更新日時 2015-10-13 06:30:04 更新者 masahiko)