透過GIF画像について考えます。

下の画像６枚は全てMcirosoft Photo Editorで透過色に白を指定し、透過する色の類似度を変えて透過処理したものです。

これらの画像から透過できる色数がいくつも選べるのでしょうか？

答えは「いいえ」です。

では何故透過できる範囲が変えられたのでしょう？

実はこれはMicrosoft Photo Editorというソフトが元画像の透過する部分の類似度を変えることで、
透過する範囲を同じ白に塗り直し、白を透過色としているだけなのです。
もし複数の色を透過させているとしたら、上にある画像の透過色を別のものに指定した時、
元画像のように透過した範囲はグラデーション表示されるはずです。
ところが実際には透過指定した部分は白に塗り替えられてしまっていますから、
グラデーションにはならず、白の単色となります。

下の画像は黒を透過色に置き換えてみたものです。

少々わかりにくいかもしれませんが、元画像に比べて透過していた範囲が白一色に塗り替えられていることが
わかると思います。
特に一番下は右側1/4程が白であることがわかります。

このように透過GIFは画像データ内に含まれるカラーパレットの内、１色だけを透過できるようになっています。
透過の度合いは透過処理するソフトが色の置き換えを行って処理していることを理解しておいてください。

さて、透過した画像を配置すると縁が汚くなったとよく聞きますね。
これは縁が透過指定された色とはわずかでも違うから透過にならず起こります。

下の画像を見てください。それぞれ黒背景と白背景にオブジェクトを配置しドロップシャドウやブレンド処理で、
ばかしや光沢・影を入れたものです。

ぼかしや影の部分は背景色に自然になじむように処理されていますので、色を微妙に変化させて描画しています。
簡単に言うとグラデーション処理されているということです。

２段目は背景色で透過させたものですが、透過されずに残った部分は背景とは異なる色になっていることに注目してください。
このような画像を透過した色とは全く異なる背景色に置くと汚く残ってしまいますね(３段目・４段目)。
ここではわかりやすくするためにわざと周りが多く残る画像を使いましたが、
わずかに境界線の外側が汚く表示されるものも同じ理屈です。

下は黒丸画像と白丸画像でそれぞれ、黒丸画像は白で透過と白丸画像は黒で透過しています。

透過色とは別の背景に置くと周りが汚く残りますね。
これも影やぼかしを入れた訳じゃないのですが、画像を作成するソフトで境界が滑らかにあるように処理する
”アンチエイリアス”をオンにしているため、透過処理の際に透過にならなかった部分が残るためです。

※アンチエイリアスとは斜線やカーブのある、またはそれらを境界線上に持った画像・文字に現れる
ジャギー（ドットが階段状になっており、ガタガタに見える）を補間するものです。
オブジェクトの境界線内部と外部を中間色を使ったドットで適度に埋めることでジャギーが目立たないようにします。
上の画像の場合では黒と白およびグレーで埋める処理をしていることがわかりますね。
透明背景上にあるオブジェクトの場合、グラフィックスソフトウェアは、このエイリアス処理を
マットカラーに合わせて変更したり、ぼかし処理や影の処理などもマットカラーに
合わせたものに変更処理してくれます(上手く表現できなくてごめんなさい)。

どのような背景に配置しても周りが汚くならない画像を作るには、境界線がはっきりしたぼかしや影のない画像にする必要があります。

逆に影を入れたり、ぼかしをかけたり、アンチエイリアスをオンにして作成する場合は、背景色とマッチするものを作成する必要があります。
素材屋さんに黒背景用とか白背景用と２つ用意してある場合がありますが、そのような理由からなんですね。

画像作成ソフトにもよりますが、背景を予め黒や白にした上で絵を描くような方法をとらなくても、
透過GIFとして保存する際に配置する背景色を選ぶことによって、うまく透過処理を行ってくれる
便利な機能も知っておきましょう。

PhotoShopやIllustratorではマットという画像配置背景を設定するオプションがあります。
このマットというオプション設定は、PaintShopProにもありますし、ウェブアートデザイナーにもありますので、
上手く利用してください(ソフトによっては呼び方が違います）。

この機能を使うことにより、いちいち黒背景で作成して黒を透過させる、同じものを今度は白背景で作成し直す、なんていう
面倒と手間が削減されます。

PaintShopPro7JでもエクスポートからGIFでウィザードを使って保存すると配置背景色を選べます。

ウェブアートデザイナーでは"WEB用保存ウィザード”で透過色設定とは別に"背景色"指定することで可能です。