アイコンを作ろう【PART2】

PART2
グラデーションの活用

アイコンはWebデザインにも必須なのでしっかりとテクニック盗んで下さい。今回はグラデーションの活用法について。
単純な話なのですが、アイコンのような単純なオブジェクトもグラデーション一つでその表情を大きく変えます。もちろん全体のデザインとの兼ね合いもあるのですが、グラデーションによっては「高級感を出す」「光を反射させる」「立体的に見せる」等の効果が得られます。

---

また1種類のグラデーションでも、オブジェクトを少しいじるだけでその表情を大きく変えます。上の画像の下段中心のバーを使って説明します。
下のように50mm×10mmの四角を作成。グラデーションをK70→K100で設定し、グラデーションの角度は90°にして下さい。




オブジェクト＞パス＞パスのオフセット
で-1mmオフセットしてください。







一回り小さい四角いオブジェクトが出来ました。
※「拡大縮小ツール」で縮小するとタテヨコ比率が狂いますのでここでは「パスのオフセット」を使用しました。

---

この一回り小さい四角を「自由変形ツール」で底辺をつかみ、中央までドラッグしてタテ半分にして下さい。
※バウンディングボックス使用の方はそのままドラッグでOK
※拡大・縮小ツールよりも「自由変形ツール」の方が調整しやすいです




はい、できました。




たったこれだけで少しメタリック感が出ました。HPのバー等にも使えますね。

---

また、1種類のグラデーションも2つのオブジェクトでグラデーションの角度を変えるだけでも表情が変わります。
↓こちらは先ほど-1mmオフセットした小さい方の四角のグラデーションの角度を変えただけです。



単純な丸いオブジェクトでも同じような視覚効果が得られます。




オブジェクト・グラデーションが単純でも一工夫してあげるだけで色々な視覚効果が得られます。
色々と試してみて下さい。

---

---