こんばんは。antsincです。今日は終電までの時間を使ってアイコンについてちょっとお話ししましょう。アイコンといっても偶像とか聖像ではなくってPCのデスクトップに表示されるあれ。堅苦しいのはおいておいて、アイコンを作るための基本的なことをご紹介しましょう。
アイコンのサイズと色深度
アイコンに組み込む画像は結構バリエーションがある。サイズは16×16、32×32、48×48ピクセル、Mac OS Xではさらに128×128ピクセルまでサイズもあるし、ようやく登場したWindows Vistaでは256×256ピクセルなんて巨大なサイズになる。色深度も1／4／8／24／32bitと盛りだくさんだ。
ちなみに色深度っていうのは、1つのピクセルで表示できる色数をbit数で示したもの。n bitは2のn乗っていうことだから、1bitは2色（白黒）で、24bitはだいたい1670万色ということになる。24bitが俗に言うフルカラーってヤツだ。あれ？ 32bitのほうが色が多いんじゃないか？ 計算すると4,294.967,295なんて数字になるけど、こんな色数は実はまだ表現できなくて（今後はどうか知らないけどね）、32bitカラーってのは24bitカラーに8bit（256階調）の透明度を持たせたものを言うんだ。
ツールを組み合わせて使おう
アイコンを作るにはツールが必要だ。僕のお気に入りは「KH IconStudio2001 Professional Edition」だ（長いのでIconStudioと呼ぶことにする）。IconStudioの特徴は、
- 1ドットから256ドットまでのサイズに対応している
- 2／16／256色／フルカラー／32bit半透明に対応している
- 複数イメージ形式（デバイス形式というらしい）を含めたアイコンを完全サポートする
- 枚数無制限のレイヤーをサポートする！（Professionalのみ）
- ビットマップ／GIF／PNGの各グラフィック形式の読み書きに対応している
- GIF／PNGの透明領域やアルファチャネルもサポートしている
- パレットファイルの読み書きをサポートしてる
- 影付けや文字入れなど、エフェクト機能もそれなりにある
- グリッドと選択領域の色をカスタマイズできる（Professionalのみ）
- 実寸表示の倍率を設定できる（Professionalのみ）
と、こんな感じ。きっと今後はVista用のアイコン作成にも使えるようになると思う（256ピクセルに対応していることだし）。Photoshopを使い慣れている人はPhotoshopで画像を作って、IconStudioでアイコンに変換するという手順がお勧めだ。
基本はドット絵！
アイコンの基本はやっぱりドット絵。コンピュータ上で表示される画像は結局はドットの集まりだからね。ドット絵のテクニックに関しては「アイコンの描き方」なんてキーワードでググればたくさんの職人・達人サイトが見つかるので是非検索してみてちょうだい。
でも、きれいなドット絵を描くには、描きたい物をしっかりイメージして、コツコツドットを打っていくことを繰り返し繰り返し練習していくしかない。こうやれば「ほらっ、だれでも簡単！」なんて方法は、残念ながらないからあきらめず描き続けていこう！ なんだか学生時代のデッサンの授業を思い出すかも。かくいう僕も下手っぴドッターです。ドット絵だけで描くことは滅多にないのが正直なところ。
ドット絵は無理！
ドット絵は無理！ 画像のドット調整くらいはやってもいいけど……。ということで、PhotoshopやIllustratorを使って絵を描いて、それをアイコン化してみよう！（僕は普段そうしてることが多い）
PhotoshopやIllustratorを使えば色の調整や変形も楽にできるし、写真や他の画像も素材として使いやすいというのが最大のメリット。画像は大きなものを小さくするのはそんなに不幸なことにならないけど、逆は見るも無残なことになりやすいので、大きめに素材を用意して小さく縮小していく流れになる。もちろん小さくした際に不自然であれば多少は手作業で直していく必要があるので、「ツールが全部やってくれるさ」なんて考えは始めに捨てておこう。
まずは48×48ピクセル、32bitのアイコンを作る
僕の場合、Windowsのアイコンをつくるならまずは48×48ピクセル、32bitのアイコンを作る。とはいってもあとで面倒なことにならないようにできるだけ半透明な部分を作らないようにするんだ。とりあえずPhotoshopでカンバスサイズ48×48ピクセルで新規書類を作成する。
 |
と、ここでようやくモチーフを考えてみたりする。今回は単純な図形の組み合わせで描くことができるモグラたたきゲーム用のアイコンを作ってみようと思う。複数サイズのアイコンを作成するときはPhotoshopだけで作業するよりはIllustratorなどのドローツールを組み合わせるともっと楽に描くことができる。というわけで、せっかく新規書類は作ったけどPhotoshopはそのままにしておいてIllustratorで素材を作ってみよう。
とりあえず描いて、それから。
絵心もなにもあったもんじゃないがプリミティブを組み合わせてモグラを描いてみる。
 |
このままPhotoshopに持っていってもいいのだが、今回は16／32／48ピクセルの各サイズのデータをあらかじめIllustratorで作ってしまう。このとき［編集］―［環境設定］―［単位･表示パフォーマンス］の「一般」フィールドを「ピクセル」にしておくとちょっと作業がやりやすくなる。
 |
環境設定を変更したら、ツールパレットから「長方形ツール」を選択して各サイズ用の枠を作っていく。ドラッグして枠を作ってもいいんだけど、正確に48ピクセルのサイズなんてなかなかできないので、適当な場所でクリックして数値入力してしまおう。
 |
16／32／48ピクセルの各サイズでレイヤーを分けておくとPhotoshopに持っていくとき楽になるので、レイヤーを作っておくのも忘れずに！ 各サイズの四角形を作成したら、それぞれ「ガイド」にしてしまおう。「ガイド」にするには、四角形を選択した状態で［表示］―［ガイド］―［ガイドを作成］を選ぶだけだ。先ほど描いたモグラのようなものをコピーし、このガイドに納まるようにリサイズしてペーストすれば素材の準備はおしまい。
 |
 |
ちょっと目がつぶら過ぎてどっちかっていうと白めになってるけど、これはあとでいじって直そうと思う。ここから先の書き出しからアイコン化にかけては、この次に説明することにしよう。
