| 対象 | Windows用ソフトのためのアイコンを作りたい人 |
|---|---|
| 公開／改記日 | 2001/03/12 2004/11/07（一部加筆、リンク先修正） |
前回、プログラムのためのアイコン作成に関する情報は少ないと書きましたが、アイコン作成は、いわゆるドット打ちの技術が基礎となります。ドット打ちの職人（ドッター）さんによるサイトを参考に、プログラム用のアイコンで使えそうなテクニックをいただいてきましょう。(^-^)ということで、今回は他のサイトにある情報をまとめてみました。
はじめに牛飼いとアイコンの部屋のデスクトップ素材のページを見てみましょう。InformationのVol.2とVol.3がアイコン作成に関する部分です。
Vol.2では、斜めの線と接合部に関するところがポイントです。（「納まり」という表現がされているところです。）斜めから見た物体の書き方も参考になります。
Vol.3では、光の反射を考慮するところが参考になります。
次にアイコン CustomMadeのドット絵講座のページを見てみましょう。後半のアニメーションのところは関係ないので、5ページ目までを見てみましょう。このページは手順が細かくかかれているところが分かりやすいですね。
5ページ目にレイヤを使う方法がありますが、レイヤを使うと一部分の色を換えたりするのが楽にできます。現段階ではレイヤを扱うことのできるアイコンエディタは無いので、レイヤを使う場合は画像作成ソフトを使ってください。（私はレイヤを使ったことはないです。）
最後に手前みそ工房のドット道のページを見てみましょう。このページが一番内容が豊富です。（しかもまだ完結していないようです。）アニメーションに関する第四章以外の部分全てが参考になります。
第一章の直線と曲線の話。これはよく理解しておきましょう。アイコン職人たるもの、32x32のエリア内だったら直線や曲線は自由に書ける技術を身につけていることが望ましいです。
第二章は明度の話題で、要するに輪郭線を滑らかに見せるための手法についてかかれています。アイコン作成のために最も重要な部分であるといってもいいところなのでよく読んでください。ジャギ消しは、画像編集系のツールでの「アンチエイリアス」機能を手動で行うようなものですが、途中を画像編集ソフトで作っても最終的には微調整としてドット単位の修正が必要になることがあります。
第五章はパレットに関してですが、アイコンファイルでは通常のパレットとは別に透過と反転の属性を持つことができるので、ヌキ色に関しては考慮する必要はありません。
（2004/11/07追記）現在、第十章まで追加されています。いずれも大変参考になります。
これだけ紹介したところで何なんですが、実は私自身はこんなサイトがあることに気づかず、自分で試行錯誤しているうちにいくつかのテクニックを身に付けていました。で、これらのサイトには書かれてないものもあるので、そのあたりについて補足しておきます。
右のアイコンを見てください。ご覧のとおり目立つジャギがあります。もちろん、背景が白だと分かっていればジャギ消しのテクニックで消すことができるのですが、困ったことに背景色は白とは限りません。背景が不定なので、できるだけ輪郭線の全ドットは同じ色で描く必要があります。中途半端にジャギ消ししようとしても特定の色以外ではさらに見た目が悪くなってしまいます。
対策は、「牛飼いとアイコンの部屋」にもかかれていますが、輪郭線を灰色にしてしまう方法があります。ジャギが目立つのは「白と黒」という最も明度に差のある2色が並んでいるためで、灰色にしておけば明度差の平均が小さくなって背景がどんな色であろうと目立たなくなります。（色差は残りますが、人間の目は明度（輝度）差に比べて色差に対する感度が低いので、明度差が小さくなるだけでも効果は大きいです。）
| 輪郭線＼背景色(R,G,B) | 黒(0,0,0) | 灰(128,128,128) | 白(255,255,255) | 赤(255,0,0) | 緑(0,255,0) | 青(0,0,255) |
|---|---|---|---|---|---|---|
| 黒(0,0,0) |  | | | | | |
| 灰(134,134,134) |  | | | | | |
それなりには目立たなくなりましたが、完全ではありません。好き嫌いの分かれるところですが、輪郭がくっきり出ないのはマイナスです。もうお察しかもしれませんが、実は現在のアイコンの表示の仕組みではどうやっても完全なものを作ることはできません。完全なものを作るためには、背景とのブレンドを表示するときに行ってくれる仕組みが必要だからです。ですので、Windowsが対応してくれるのを待つしかありません。
というところで、嬉しい情報を入手しました。次期のWindowsであるWindows XPでは、αチャンネルを用いた透過アイコンの表示が可能になるようです。簡単に言えば、ドットごとに透明度を指定でき、背景によらずにジャギ消しができることになります。既にGIF Movie Gear for Iconsは(Photoshopのデータのインポートにより）αチャンネルアイコンの作成に対応しているようです。また、KH IconStudio2001も対応予定のようです。αチャンネル（αチャネル）自体はグラフィックの世界では以前から使われている言葉ですので、探せば関連資料もたくさん見つかるでしょうから、詳しいテクニックなどは他のサイトや書籍を参考にしてください。
現段階では私自身が見たこともないので分かりませんが、透過度を使う場合の指針だけ示しておきます。今年中（2004/11/07注追記：記事作成時の2001年のこと）には役に立つときが来るでしょう。透過度（透過率）は、物体領域では0%、背景領域では100%になります。問題は輪郭部分。ジャギ消しの仕組みを考えれば分かりますが、右図のように徐々に透過度を変化させていきます。これで輪郭線のジャギもきれいに消えます。図では%で示しましたが、αチャンネルは8bitなので、実際には0から255の間で数値を指定することになるでしょう。この場合、0%→0, 50%→128(127), 100%→255となります。（2004/11/07追記：KH IconStudio2001のように、0%→255, 100%→0のように逆になるものもあります）
ただし、当然のことながら、Windows2000/Me以前のWindowsではαチャンネルに対応していないので、これらのOSをサポートするソフトであれば、アイコンの輪郭自体の形状をまじめに考える必要があります。といっても、輪郭に「長い斜めの直線」を含めないようなアイコンだったらあまり目立たなくなります。今回例で挙げたアイコンは「長い斜めの直線」があるのでジャギが目立ってしまっているわけです。
32x32という狭い領域ですから、グラデーションも手動で描くことができます。右に2つ画像がありますが、左側の図の赤枠のところに注目してください。ちょっと分かりにくいですが、グラデーションは下へ行くほど暗くなっているにもかかわらず、赤枠の中では反転しています。（他にも何箇所か反転しているところがあります。）同じ色数で単純にグラデーションをかけようとすると右側の図のようになるのですが、この方法だとグラデーションの変わり目が線状になって目立ってしまいます。左のように所々で色を変えたりすると滑らかなグラデーションができます。もちろん、グラデーションに大量の色を使える場合はこのようなことをしなくてもきれいなグラデーションを作れます。