 | < 電球のガラス部分と背景に落ちている影が半透明 |
半透明を表現できるアルファチャンネル付きのPNG画像（αPNG）の作り方を紹介します。作り方と言っても、私の環境（Windows）に依存した一方法に過ぎません。ましてや、最良の方法と言うわけでは当然なく、単なる一例として次の画像を作る際に私が行った過程を紹介します。
< 電球のガラス部分と背景に落ちている影が半透明
「あるふぁ亭」で公開している素材はすべてここで紹介するツールを使用して作成しました。すべて無料で手に入るツールばかりですので、Windowsを使用していて興味のある方は是非試してみてください。もちろん、有料のソフトをお持ちなら、もっと簡単に作成できるかも知れません。
このページではαPNGをそのまま貼り付けています。Win版IE6を除く各ブラウザの最新版では正常に表示されると思いますが、次の画像が“正常な見た目”と同じに見えない場合はお使いのブラウザがαPNGに対応しておらず、こちらの意図とは違う表示になっていることをご理解の上でご覧ください。2006年リリース予定のIE7は対応しています。αPNG対応ブラウザを入手されたい場合は、FirefoxやOperaがよろしいかと。
< 背景画像の上にαPNGをそのまま載せたもの
< 背景とαPNGを合成した “正常な見た目” 画像
< Win版IE6による“正常でない見た目” 画像
大きなサイズで描きます。一番最後に縮小して完成としますので、アンチエイリアシングは気にしません。むしろ、処理対象のエリア分けだと思ってハッキリ塗り分けます。もちろん、グラデーションなどは使いません。次の画像が私が描いた下絵です。これが原寸大です。作業は最後の縮小までこのサイズで行います。
私も久しぶりにこの画像を見ましたが、手抜きだなあ、と思いました。曲線部分などがガクガクじゃん。恥ずかしいなあ。これを公開することになるとは思っていなかったので、手抜きしすぎました。
注意点は、右下部分に影を付けますので少し左上に寄せてあること、最後に縮小するのであまり細かな事はしないと言ったことぐらいです。使用したソフトはWindows付属のペイントです。説明の必要もないですよね。
次のステップまで一気に作業してもよいのですが、アルファチャンネルもこの下絵から作りますので、この状態で保存しておきます。
次の画像が完成した画像です。
背景が黒に塗ってあり、黒い部分がどうなっているのか分かりませんので、一つ手前の状態を見てください。フルサイズだと重苦しいので縮小した画像で表示します。
金属部分の質感や立体感などは「LogoShader」と言うソフトを使って加工しました。ごく簡単な操作であっという間に出来てしまいます。あとは背景を「ペイント」で黒く塗っただけ。
背景を黒く塗ったのは意味があります。右下側に背景に落ちる半透明の影を付ける予定なのですが、その部分はどう処理しておかなくてはならないかと言うと、黒に塗っておかなくてはなりません。半透明の影は半透明の黒で表現します。半透明のグレーでもいいような気がするかもしれませんが、そのグレーよりも暗い背景に置かれてしまうと影の部分が背景より明るくなってしまいます。ですので、影の部分は最も暗い色、黒しかありえません。ただし、半透明の物体の作る色付きの影などを表現する場合（正確には表現できませんが）は別です。
完全に透明な部分は黒、完全に不透明な部分は白、半透明な部分はその透明度に応じたグレーに塗った画像を作ります。下絵の色を塗り替えて位置をずらしたり、ぼかしたり、グラデーションと合成したもの等を重ね合わせて作ります。
特にこのソフトを使ってと言う事はありません。グラデーションやぼかしができるソフトは沢山ありますので、どれでもお好きなので加工してください。作業量は結構多いですが、難しいことはないと思います。
私は「shin's PNG Editer」と言うソフトを使いました。画像とアルファチャンネル用の画像を指定してやれば簡単にαPNGが出来上がります。「shin's PNG Editer」を使う場合は、画像はフルカラーPNG、アルファチャンネル用の画像はBMPで保存した物を使用してください。
αPNGは出来上がっているのでもう簡単じゃん…ところが、一番てこずったのが縮小でした。アルファチャンネル対応と謳っていたソフトで縮小してみたのですが、どうもおかしい。α値が変化する境界が黒っぽく汚れる。私のやり方が何か間違っているのかと散々悩みました。そのソフトが『不完全な縮小』をしていると気付くまで、かなりの時間を要したのでした。
『不完全な縮小』とはどういうことなのか説明します。例として、2ピクセルの画像を1ピクセルに縮小する場合を考えます。元画像の2ピクセルの内、1ピクセルが色が白で透明度0%、もう1ピクセルが色が黒で透明度100%だったとします。白のピクセルは透明度0%なので、そのまま白に見える訳ですが、黒のピクセルは透明度100%なので背景が見えるだけでピクセル本来の黒は全く見えません。つまり、半分は白で半分は背景という画像です。これを1ピクセルに縮小したら結果は色が白で透明度50%にならなければなりません。ところが、『不完全な縮小』では色が黒と白の中間のグレーで透明度が50%になってしまいます。全く見えないはずの黒がにじみ出て白をグレーに汚してしまうのです。これは色と透明度を別々に縮小しているためだと考えられます。
実際に『完全な縮小』と『不完全な縮小』を比べてみましょう。左が『完全な縮小』、右が『不完全な縮小』です。
この例の場合は影響がでる場所が限られていますし、影響の出方もそんなに目立たないので気にならないかもしれませんが、ネジ部分の左上の縁とお尻の半球部分の縁が黒っぽく汚れています。
お使いのソフトが『完全な縮小』が出来るかどうかを確かめる為に「不完全縮小検出キット」を作ってみました。よろしければ使ってみてください。次のリンクからダウンロードしたら解凍して、「index.html」をブラウザで開くと使用法が書いてあります。
alpha_test.lzh
ちなみに、私は「GIMP」を使って縮小しました。GIMPは使うと固まる機能があったりしますので気をつけて使ってください。
αPNG対応ブラウザでJavaScript必須