Moz - 透過GIFあれこれ

　このページでは透過GIFの作り方や、透過GIFにまつわる注意などを説明します。

　タイトルなどを書いたときに、空白部分は下が透けて見えてほしい、ということがよくありますね。その時に使うのがこの「透過GIF」です。透過GIFのファイルはGIFが扱えるグラフィックソフトならばたいてい生成できるようになっているはずです。GIFファイルというのは基本的に256色画像なのですが、そのうちの一色に「透明」を割り当てて、後ろが見えるようにしたのが透過GIFです。

　テレビで合成映像というのがありますね？　あれは、濃い青い布の前で人物を撮影し、電気的な処理で青い部分を背景に置き換えています。色（クロマ）を鍵（キー）にして合成するので、クロマキー合成と呼ばれます。考え方はこれと同じです。クロマキー合成の場合、例えば、人物が青いアクセサリーなどを身につけていると、そのアクセサリーの部分まで透けてしまいます。極端な話、人物が背景と同じような色の洋服を着ていると、顔と手足だけ残って隠れ蓑を羽織ったようになってしまいます。背景の布が黒じゃないのは「黒にすると髪の毛が透けちゃうから」ということもお分かりでしょう。

　透過GIFも同じで、前景画像に背景色と同じような色があると、256色変換後にその色が背景色と同じ色になってしまい、後ろが透けて見えてしまいます。透過GIFを作成する場合には、あらかじめ背景色を決めておいて、前景を作るときに背景色に近い色は使わないようにしなければなりません。ちょっと例を見てみましょう。青をバックにして、赤から緑までのグラデーションを書いてみました。黒い枠が画像の境界になります。上は元の画像、下は青を透過設定したものです。透けているのが分かるように、テーブル内に背景を張ってあります。

　ちなみに、Photo Magicを使っている人は、とりあえず256色パレット変換（「イメージ」「変換」「パレットカラー」で、「256色」ディザリング「無し」を選ぶ）しておき、スポイトで背景色を選んでから色選択の画面を出すと、背景色がどのパレットになっているかが分かります。この時、へたにディザリングをかけると背景が単色にならなくて抜けきらないことがありますので注意。Photo Magic 6を使っている人は、これまたバグがあって、アクティブ色と交代色が入れ替わってますので、スポイトで色を選択した後、一度交代色をアクティブにしてから色選択画面を出すと、正しいパレットが分かります。

	←スポイト。
	←色選択。ダブルクリックでパレットが出る。
Photo Magicの色選択ツール

　パレットが分かったらその位置を覚えておき、ファイルセーブ時に透明色を設定します。ファイル名を打ち込むダイアログでサムネイル（画像一覧）が表示される状態になっていれば、「オプション」というボタンがあるはずですから、それを押します。ない人は「見本」ボタンを押してサムネイル表示にしてください。透過GIFをよく使う人は「保存時にオプションプロンプトを開く」にチェックを入れておくとよいでしょう。

「透明色」の右側の箱をダブルクリックすると・・・

このダイアログが出る

　これはPhoto Magic 4のダイアログです。Photo Magic 6の人は背景色が複数選択可能になっていますので、ダイアログがかなり違う構成になっています。PM6の場合は左側のパレットで透過にしたい色をダブルクリックしていけばOKです。

　ここで、「気分を変えて緑から紫のグラデーションにしようかな～」とか考えるとこうなります。

　おやおや、前景画像に背景色と同じ色が紛れ込んでしまったために、前景画像の一部が欠けてしまいました。これはいささかわざとらしい例ですが、複雑なアイコンの色バリエーションを作るときなどは、最初によく考えておかないと後で「しまったぁ～(:_;)」ということになります。

　今のコンピューターは、多くの場合に小さな「点」の組み合わせで画像を表現しています。この「点」のことを「ドット」とか「ピクセル」とか「画素」と呼んでいます。プリンタやスキャナの性能で「dpi」や「ppi」という単位が使われますが、「dots per inch」・「pixels per inch」の事で、1インチ（＝2.54cmです）の中にどれだけ点を打てるか？　という能力を示し、数字が大きいほど偉いということになります。

　また、ディスプレイの「解像度」という言葉もよく聞きませんか？　最近ではVGAとかSVGAとかXGAとか呼ばれる事が多いのですが、元々AT互換機の規格で、それぞれ画面に打てる点の総数が640X480・800X600・1024X768ドットの事を指します。最近のプリンタでは1インチで720ドット打てるのが当たり前なのに、ディスプレイは画面全体でこれしか点が打てませんから、プリンタやスキャナに比べてだいぶ荒い事が分かるでしょう。ということは、どうしてもこの「点」の大きさで画像のキメ細かさが制限されてしまいます。例を見てみましょう。限りなく横線に近い斜め線を引いてみました。左右は1ピクセル分だけ上下にずらしてあります。

　斜め線というより、2本の横線が1ピクセルずれて並んでいる、と言った方が近いですね。では、これはどうでしょうか？

　左端は上に寄っていて、右端は下に寄っていますから、左右の端は確かに1ピクセルずれているはずですが、さっきはあった中央の段差が見当たりませんね？　種を明かせば、線の上側と下側にそれぞれ黒から白・白から黒のグラデーションを貼っただけです。状況をわかりやすくするために、グラデーションの部分を赤く着色したものを示しておきます。

　この例は単純ですからグラデーションを貼るだけで済んでしまいましたが、では、もっと複雑な、例えば文字などの場合はどうしましょうか？　答えは簡単で、目的のサイズの2倍とか3倍で原図を作っておき、最後に縮小すればいいのです。さっそく見てみましょう。左側はそのまま「あ」と書いたもの、中央は二倍の大きさで「あ」を書いて、Photo Magicのスマートサイズ機能を使って1/2に縮小したもの、右側は同じ事を3倍でやってみたものです。

　どうです？　右側に行くにしたがってギザギザ感が減っていきますね。この技術を「アンチエイリアス」と呼びます。一言でいうと「色数で解像度の不足をごまかす」方法で、レイトレーシングなどの3Dグラフィックスなどでも盛んに使われています。注意しなければならないのは、縮小するときにちゃんと各ピクセルの平均をとってくれる方法を使わなければなりません。したがって、残念ながらWindows 95標準のペイントではこの方法は使えません。

　なお、Photo Magicには、よりお手軽に、アンチエイリアスしながら文字を描画する機能が付いています。文字入力のボタンを押したときに出るリボンの、「スタイル」の一番右に並んでいる水滴のようなボタン、これがそうです。お手軽なので使わない手はありません。どんどん使いましょう。

　ギザギザをなくす方法も分かったので、これを早速透過GIFにしてみます。さっきの「あ」を透過GIFにしてみましょう。

　おやおや？　文字の周りに変なゴミがつきまとってるような気がしませんか？　試しに、もっといろいろな色の背景に貼ってみることにします。

　こうしてみると、濃い（暗い）色の場合にゴミが目立つことがわかりますね？　先ほどのアンチエイリアスの原理を思い出してください。「色数で解像度の不足をごまかす」と言いました。つまり、元は白黒2色だったのですが、解像度の不足を補うために色の数が増えてしまったのです。それに対して透過指定しているのが白1色のため、残りの色がゴミとなってまとわりついているのです。じゃあ、透過指定する色を増やせばよいか？　というとそんなに単純な話でもなくて、透過色を増やしていくと、前景色が減るわけですから、アンチエイリアスの効きが甘くなって、今度はギザギザが目立つようになります。これでは本末転倒ですね。

　じゃあどうすればいいのか？　これもよく考えてみれば答えは簡単で、「背景まで含めてアンチエイリアスをかければよい」のです。早速、先ほどの背景に合わせて作ってみましょう。方法はもう分かりますね。先に背景をサーモンピンクで塗りつぶして、それから縮小すればよいのです。

　ここでは3倍の画像をもう一度作るのが面倒だったので、さっきの画像を一度RGBに戻して、増加モードでサーモンピンクを塗りました。増加モードで塗ると、元画像の白黒の濃さに応じて塗ってくれるので便利です。先ほど紹介したPhoto Magicのアンチエイリアス機能を使う人は、先に背景を塗りつぶして、その上にアンチエイリアス機能を使って普通に文字を書けばOKです。こちらの方がおきらくですね。見れば分かるように、これはまだ透過にしていません。早速透過GIFにしてみましょう。

　今度は背景なしだとゴミが出ますが、背景をつけるとゴミがなくなります。このように、透過GIFとアンチエイリアスを組み合わせる場合、背景に気をつけることが大切です。このページのタイトルや、Shooting Stars Squareのタイトルもこの方法で作られています。試しにShooting Stars Squareのタイトルのバックを明るくしてしまうと、下のようにとても間抜けな状態になります。これを見ると「Shooting...」はちゃんと中抜きになっていて、背景に貼ってある星空が見えるようになっていることも分かりますね？（誰もそんなこと気にしちゃいないって）

　余談ですが、<BODY>タグでBACKGROUND画像を指定している場合、BGCOLOR属性も指定しておいた方がよいでしょう。OSの設定が標準的な配色で、ブラウザの画像表示をしていない人は背景が真っ白になりますから、文字が白の場合、本文がまったく読めなくなってしまいます。さらに余談ですが、画像表示を切っている時にこういうサイトに出くわした場合は、ブラウザの背景色の設定を変更するというのが正攻法ですが、それが面倒な場合はマウスでずりずりやるか、メニューから「編集」「すべて選択」すると読めるようになります（笑）。ショートカットは[CTRL]+[A]ですね。

本館入口 / 百舌鳥のおきらくお絵描き / 透過GIFあれこれ

ご意見・ご要望の送り先はあかもず仮店舗の末尾をご覧ください。