透過GIFのギザギザ
GIFで透過保存した時にでるギザギザ
知らない顔して、GIFで透過保存してきましたが、どうにもギザギザが気になります。何か良い方法はないのかしら？
条件付ですが、ひとつ方法が分かったので、次の順番で、お話は進みます。
GIMPの導入手順については、記事「GIMP2の導入手順」が参考になります。
どうしてギザギザになるの？
どうしてギザギザになってしまうのか？答えてくれセニョール！
1：透過GIFとは？
透過GIFは、画像内の背景が透過状態にあるGIFのことです。
例えば、次のようにWebサイトの背景が白色の場合は、あまり違いが分かりませんが・・・。
 |
 |
透過GIF |
背景白色GIF |
次のようにWebサイトの背景に色が付いていると、違いがよく分かります。
|
|
透過GIF |
背景白色GIF |
つまり、透過GIFにしておけば、Webサイトの背景がどのような色であっても、対応してくれるわけです。こりゃ便利だね。
2：ジャギー
とても便利な透過GIFですが、ジッと見てみると、斜め線や曲線のあたりが、ギザギザになっていることに気が付きます。
このギザギザは、「ジャギー」と呼ばれており、どうやら、解像度が低い場合に起こるようです。
「デジタル画像の基本的なこと」でも書きましたが、きれいに表示するには、それなりの解像度（ピクセルの密度）が必要なのです。
3：GIFで透過保存した場合
ただ、今回の透過GIFについてのギザギザ（ジャギー）は、低解像度だけの話ではなさそうです。
なぜなら、「GIMP2でファイルを保存する」で試したように、解像度が同じでも、pngで透過すると、gifよりギザギザ（ジャギー）は目立ちませんでした。
gifに何か問題がありそうです。
調べてみると、どうやらgifは、画像を保存する場合に色数を減らすようです。（インデックスカラーかグレースケールでしか保存できない）
つまり、根本的な原因は低解像度ですが、今回の透過gif問題は、低解像度を補う技術による効果が、色数を減らすことで消失してしまっていると考えられます。
4：アンチエイリアス
どうして色数が少ないと、ギザギザに見えてしまうのか？
それは、隣り合っているピクセルの色が、はっきりと違いすぎてしまうために、ギザギザ（ジャギー）が強く感じられるからです。
これを解消するために、「アンチエイリアス」という技法にて、境界となる箇所に、中間色を配置し、視覚的な色の段差をゆるやかにします。
gifで保存したときに、ギザギザ（ジャギー）になるのは、このアンチエイリアスによる中間色が、色数の減少に伴って消失しているからだと思います。
しかし、Web素材を配布しているサイトを拝見すると、たいていGIFで配っています。そして、素材を見ると、ギザギザを感じさせることがありませんから、何かしら方法があるはずです。
ギザギザを軽減する方法
今回ご紹介する方法は、条件付きです。Webサイトの背景が分かっている場合にだけ有効な方法になります。
1：新規ファイルの作成
次のような形で、新規の画像ファイルを作成して試してみましょう。
- （01）ファイルの新規作成をクリックする。（[ファイル]-[新規]）
- （02）サイズを100×100に設定する。
- （03）表示サイズがあわなければ、合わせる。
- （04）新規レイヤーを作成する。
2：文字を書く
（05）
道具箱の「文字ツール」を、クリックします。
（06）
適当な文字を入力してください。フォントは、曲線の多いものを選んだ方が分かり良いです。
私は、次のようにしました。（アンチエイリアシングは、ONになっています）
- フォント「CommercialScript BT」
- 大きさ「130px」
3：文字の位置を調整
（07）
文字を入力したら、位置がへっぽこな場所にあると思うので、移動ツールで調整しましょう。
4：エッジを作る
（08）
レイヤーを切り替えます。
（09）
レイヤーを、Webサイトの背景と同じ色で塗りつぶします。
（10）
レイヤーを切り替えます。（文字のレイヤーにします）
（11）
文字のレイヤーを右クリックし、メニューを表示させて、「下のレイヤーと結合」を選びます。
レイヤーが結合されて、レイヤー1つと、背景だけになります。
（12）
上部メニュー「選択」から「色で」を選びます。（[選択]-[色で]）
（13）
画像の塗りつぶした方を、クリックします。（文字以外が選択されます）
（14）
「編集」から「消去」を選びます。（[編集]-[消去]）
これを行うことで、文字の回りに少しだけ背景色が残るわけです。（エッジが作成されました）
5：背景はいりません
（15）
忘れずに「背景」を、不可視にしましょう。
6：確認
（16）
GIFで保存して、比較してみましょう。
右側のひと手間加えた透過GIFの方が、ギザギザが少ないのが分かるかしら。
|
 |
透過GIF |
ひと手間 |
次のようにWebサイトの背景が同じ色であれば、さらに効果を発揮します。なめらかプリン並になめらかです。
|
|
透過GIF |
ひと手間 |
しかし、弱点はこれです。色の薄い背景に合わせて作ると、色の濃い背景では、チラチラが出てしまいます。
|
|
透過GIF |
ひと手間 |
うーん、世の中ってば厳しいね。
あとがき
1：チラチラは無くせるか？
前述のチラチラを無くす方法を調べてみると、いろいろと出てきますが、試してみてもうまくいきませんでした。
- アンチエイリアスをOFFにする。
- ぼかす。（[フィルタ]-[ぼかす]-[ガルシアンぼかし]）
結局のところ、チラチラが無くなったら、今度はギザギザが出てきます。背景色の濃淡に関係なく、ギザギザもチラチラも無くせる色があれば良いんだけどねぇ。
継続して、調べてみます。
2：png使っちゃいなよ
pngを使えば、すべて解決するのですが、残念ながら現状IE6がネックになっているようです。
「古いブラウザならしょうがないかな」とも思うんですけれど、本当にMicrosoftはいつもいつも、どうしてこう・・・。
2007年1月頃に、「to-R」さんで、pngのIE6問題を、JavaScriptで解決するための方法が紹介されています。この方がスマートかもね。「アルファ画像を扱うalphafilter.jsライブラリ」
次回予告
次回は、よく見かける「床が鏡面になって文字が映っているような感じ」をやってみようかと思っています。
関連記事
画像編集ソフトGIMPに関連する記事を、ご紹介します。
1：GIMP2の導入
2：GIMP2で写真を編集する
3：GIMP2の基本
4：無料Web素材の作り方
作成日：2008/02/15 更新日：2008/02/15
« 「Web素材の作り方（数字1）」｜「Web素材の作り方（ロゴ1）」 »
コメントありがとうございます。
コメントの投稿
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/187-bff1f75b
