皆さんこんにちは 今回のWEB応用ではホームページやブログで使用されているアイコンの制作について解説していきます。

ページ間の移動や記事のアクセントなどで使用されているアイコンは、前回説明したバナーとは違い、大きいものから小さいものまで様々な形のものがあります。そこで今回は、代表的なアイコンの例を取り上げて説明していきましょう。

◎図形

　

円と三角形を組み合わせることで作ることができる吹き出しのアイコン。ですが、ただ重ねただけは粗が目立ちます。

　

こうした図形を重ねる物を制作する時はパス結合を忘れずにおこないましょう。統合すれば重ねた図形が１つの図形になるのできれいなグラデーションを入れることができます。

小さいサイズのアイコンを作る際には、図形のエッジを立たせるなどの工夫が必要になります。小さくなるほど表現するドットの数が少なくなり粗さが目立ちますが、こうした処理をすることでしっかり見えるアイコンを作ることができるのです。

　　　

また角の丸い図形を作る際には角丸ツールを使うのではなく、四角形ツールのプロパティにある角丸の半径の数値を操作して制作しましょう。数値を変えることで、自由な角丸を作ることができるためです。

矢印を制作する際には先端が尖るよう、手を加える場合があります。特に小さい矢印を作る時には先端部分が１ドットになるようドット数を奇数で作りましょう。極小の物を作る時はエッジがぼける効果は外して作ります。ドットの数が多くないのであれば、鉛筆ツールで１ドットずつ作る方が確実です。

◎効果
ドロップシャドウなどを入れる時は、ぱっと見た目に効果がかかっているかいないか判別できないくらいの微妙なラインでまず入れましょう。2/20/2/-（変更せず）が大体そのラインにあたる数値です。そこから徐々に効果を上げていきましょう。

右が通常、左がドロップシャドウの効果を加えたアイコンです。

また、プロパティにある効果に頼らずに、こういった効果を得ることもできます。

図形の上に黒で塗りつぶした別の図形を置き、上に置いた図形に透明処理を施すと上図のような効果が出ます。下地になっている図形にバックアップを取ったら、２つの図形を選択してパス統合の項目から切り抜きを選択し色が変化している部分だけを抽出します。後はバックアップを取っておいた図形を組み合わせて完成です。

これらを含めデザインに欠かせない効果ですが、制作するアイコンが小さいのであれば気を付けて使いましょう。ドット数などの関係でそこまで大きな変化が起きないからです。むしろ悪いデザインになってしまうので、使わないことも考えましょう。

◎文字

フォントの太さはDFP系統であればW5が標準です。サイズはアルファベットであれば10、日本語であれば12までが妥当なサイズとされています。また前回のバナー制作でも触れた内容は、アイコン制作でも大いに役立つので是非使ってみて下さい。

アイコンなどのブログパーツはよく無料配布されているので、参考に探してみると良いでしょう。皆さんも、是非自分だけのアイコンを作ってみてください。