Nitram+Nunca

小さなアイコンの話。 Mac界ではそのトレンドが約１年毎に変わっていく。例えばツールバーの地の色。 Mac OS X 10.3 “Panther” 以前では白っぽいしましまだった。現在の 10.4 “Tiger” は明るいグレー。そしてもうじき発売の 10.5 “Leopard” には濃いグレーが採用される。どんどん変わっていくOSの外観。それにマッチするツールバーアイコンのグラフィックも変わる。これには正直うんざりだ。

例えば今のシイラのアイコンは Panther に合うようにアイコンの輪郭を抑え気味に描いた。しかしこれを Leopard で見た場合、輪郭が極端にぼやけてしまう。それに Leopard のツールバーのように、グラデーションによって盛り上がりをはっきり見せているような地には、上に乗っかるボタンよりも埋め込まれたボタンの方がスマートで美しい（実際、Leopardのインタフェースもそうなっている）。かと言って、じゃあ最新の Leopard に合わせようぜ！ってわけにはいかない。次の 10.6 にはどんな地になるかが分からない、というのもあるが、Tiger 以前のユーザを切り捨ててOKというのは、制作者としてちょっと傲慢すぎやしませんか。えぇい、どうすりゃいいんじゃ。せめてどんな色の背景にもマッチするアイコンを作ろう。というわけで、最近の自分的境界線の描き方をメモ。

ところで Mac OS X や Windows XP 以降、GUIアイコンは滑らかでリッチな質感を持つものが主流だ。ここで言うリッチは、リアル、という意味じゃなく「現実に近いが、適度にデフォルメされて細部が明確」といった感じ。さて、上の例は Macでよく見るインスペクタアイコン、を自分で描き起こしたもの。

言ってしまえば簡単、半透明の輪郭線がアイコンと背景、両方にかぶさるようにすれば解決。輪郭線はピクセルの方眼にビシッと合わせ、中身のアイコンは２分の１ピクセル内側に描く。

左は輪郭線のパス。右はアイコン内部のパス。

Photoshopのパス上では、輪郭線の内側２分の１がアイコンの外郭を強調し、外側２分の１は背景との区別を強調してくれてるんだが、ピクセル単位では関係ない。それらがブレンドされ、いい具合の境界線になる。

コツは輪郭線の色だ。黒やグレーじゃダメ。背景との区別には良いけれど、アイコン自体の彩度を下げるから色合いがぼやっとした味になる。最適なのは、明度が極端に低く、彩度は極端に高い、アイコンと同じ色合いを持つ線、だ。例のアイコンなら濃い紺色といったところ。こうすることで、外側２分の１は黒に近い線として、内側２分の１は色の強い線として働く。

以上が、２分の１ピクセル、などともったいつけた名前の正体。

この描き方の対象となるのは、16〜48 ピクセル四方くらいまでの小さなアイコンだ。これらのサイズは、その小ささ故に背景や他の要素の影響を受けやすい。だから等倍のキャンバスで、輪郭をくっきりと乗せて描くことが求められる。滑らかにしたいからと言って、32ピクセルのアイコンを64ピクセル四方のキャンバスで描くと、縮小したときに輪郭が甘っちょろくなる。逆に 64 ピクセル以上のアイコンは、細部の輪郭よりも全体のバランス重視。このサイズは、アプリケーションアイコンとしてWebや印刷物に使われる場合も多い。ピクセル等倍ではなく大きなキャンバスでリアルに描き、それを縮小させるという方式を僕はとっている。

シイラのリソースもこれでどんな背景にも対応。わーい。

Posted in » グラフィック