 簡単・奇麗なアイコン講座
デスクトップアイコンやアプリケーションのアイコンは、どんな色の背景と一緒に使われるか予想できないため、どのような背景とも合うようにドットを打って作るのが一般的です。点の打ち方ひとつで印象がまったく違って見えるなど、やってみるとなかなか面白いものです。 ここではそんなドットの使い方と、自己流のツボをごく簡単に説明します。 話しがウェブ素材にまで飛びますが、ご容赦くださいまし |
| ■ワク・ワク・枠の話し |
 どんな背景でも合うアイコンを簡単に作るなら、直線だけで構成される輪郭をつくるのが一番簡単です。たとえば正方形の枠を作り、それを輪郭にしてしまう方法です。左のようなアイコンですね。  でも実際には輪郭は不定形のものが多く、特に曲線が不自然になりがち．．． そんなときは純黒よりも少し淡い黒(ダークグレー)で輪郭をとります。 すると曲線のつながりも比較的違和感なく見えます。一度お試しあれ。 |
| ■立体的な色使い・その１ |
色の制約の中での質感 Windows アプリケーションのアイコンを作ろうとした場合、それがどんな色数の環境でも使えるように、Windows システムカラーの範囲で色を決めるのが無難です。さもないと256色の環境で見たときに、非常に醜いデザインになってしまいます。もっとも最近ではハイカラー以上が一般的なので、さほど気にする必要はないのかもしれませんが、たとえば旧バージョンのノーツ(グループウェア)上で使えるアイコンを作ろうとすると、いまだにこうした制約がでてくるのです。 そこで、少ない色数でいかにそれらしく見せるか、という点に知恵をしぼることになります。 前置きが長くなりましたが、たとえばルーペの[検索]アイコンを作ってみましょう。使える色はシステムカラー16色です。  たったこれだけ カタチを作ってみる   まず全体のカタチをこのように決めました。色数の都合で枠は黒ですが、丸く見えさせる部分はグレーを使っています。 レンズと光の反射を表現してみる これでは平面的で面白くありませんね。そこでレンズの感じを出してみます。レンズは凸形ですので、ふくらんだ面への光の直接反射と、根元の部分からの間接反射の２通りの反射があります。これを考慮せずに普通に反射を描けばこんな感じになります。  ちょっとわかりにくいですが、平面に白色で光の直接反射を描いただけです。これでも十分といえば十分ですが、これにレンズの凸面の表現と間接反射を加えるとこんな感じになります。 
 拡大してみましょう。 使っている色は７色です。レンズ凸面の反射と影、そしてレンズの間接反射をこのように表現しています。これでレンズがふくらんでいるように見えるアイコンが完成です。 つまり、光の反射を描くときは、直接の反射だけでなく間接的な反射もとりいれて描くと質感を上げることができるわけです。 |
| ■コントラストが大事かも？ |
 これは夜のアイコンのひとつですが、口のアワはこの手法で描かれています。小さい部分ですが仕上がりに結構影響しますので、こういう部分に手抜きは禁物です。 |
 同じようなことが、円筒形を描く場合にもいえます。左からの光を受けた状態を普通に描くとこんな感じにグラデーションをかけるわけですが、間接光の反射を考慮して反対方向からの光も描き込んだほうがリアルになります。   間接反射に加え、面のコントラストを強調することで金属のような表面を描いてみました。 こんな具合に光の反射を考えながら濃淡を使い分けることで、より高品質なアイコンをつくることができます。光沢面の場合、周囲の風景まで想定して描き込まねばならない・・・のでしょうが、小さな素材ということもあり、私はそこまで凝りません(^^; |
| ■素材をつくる、ということ |
|
ドット打ちはディテールに凝ると際限がありません。それこそ１ドットづつ違う色をアレンジして、職人芸的アイコンを作るのも素晴らしいでしょう。 なぜならウェブはコンテンツが命であって、素材はあくまでもワンポイントの装飾物だからです。ですからコンテンツの邪魔をしないよう、軽い素材をつくることが必要になるのです。
|
|
■きれいなアイコンを作る・まとめ |
|
うーむ。いきなりまとめとは．．こんなに簡単な内容でいいんでしょうか(笑) 簡単・奇麗なアイコン講座とは、実は「簡単な説明の・・・」という意味だったりして(ばき) もっとも、実際にツボはそうたくさんあるわけではありません(私が少ししか知らないだけ、というハナシもありますが・・) ここで取り上げたノウハウは既に他の素材制作者の皆さんがやっているものばかりです。  ←実はひつじさんのおなかも光の反射を考えたつもりの配色(わかりにくいですけど)先も書きましたが、ポイントは ・「反射光」を取り入れた配色・グラデーションをつける ・使いやすいソフトで作る ・さらに他の人の優れたアイコンを研究し、とにかくいろいろ数を作ってみることでしょう。 そして GIFなら GIF、ICO なら ICO として使いやすい形に納めることが大切です。 色使いやデザインは制作者のセンスにお任せします(ばき) ・・・とか偉そうにいえるほどウマくはないんですが．．(^^;; おまけにふたつ、このページで書いたことを基本にして作った素材を載せておきます。 よろしければフリーで使ってください。いずれも16色、ファイルサイズは 0.68KB 以下と、小さ目になっています。  tower1.gif 48x51 0.68KB
 tower2.gif 52x51 0.66KB |