画像で背景透明のテキストがにじむのです

質問

こんにちは。
いつもお世話になります。

webのバーをイラストレーターCS3で作成してます。
別途、背景に模様の画像を配置しておるので
ここは背景が透明のテキストだけの「画像」にしたいのですが
gifで保存をいくら試しても文字がぎざぎざしてしまいます。
pngでも変わらず。

背景の画像が黒っぽいので、テキストは白で
0.5～1ほど黒の縁取りをしたりしても同じです。

画像にせずテキストのみのバーにしてもいいのですが
デザイン上ちょっと避けたいのです。
なんとか解決策は無いでしょうか。

もしかしたらとんでもなく初歩的なことを聴いてて恥ずかしいのですが
ちょっと急ぎで困ってます。
よろしくお願いいたします。

回答No.1

dezimac · ベストアンサー

通常画像を滑らかに見せるにはアンチエイリアス（徐々に背景色と同じになる）処理が施されます。
濃度が「100%→50%→0%（透明）」と出来れば滑らかに表示できるのですが、透過GIFでは1色しか透明に出来ません。
100%→0%なのでどうしてもジャギー（ギザギザ）が発生しまいます。

PNGでも同じです。
PNG-24ならαチャンネル扱える（半透明も表現できる）ので滑らかに出来ますが、最大勢力を誇るIEが一向に対応しないので使えません。

背景が単調なら、Web用に保存するときにマット処理をすることで、ジャギーを目立たなくする事は可能です。
http://www1.linkclub.or.jp/~nobuki/tips/matcolor.html
http://web.kyoto-inet.or.jp/people/hikeda/justnet/smu/smu06A/smu06A.html#Anchor-44591

> 縁取りをしたりしても同じです

始めから縁取りをつけるよりも、マット処理をした方がうまくいきます。

お礼

早速の回答ありがとうございます。
なるほど～詳しい説明よくわかりました。
マット処理でなんとかうまくいきそうです！
いままであまり背景に透明を使わなかったのですが今後いろいろ使えそうです。
助かりました！

回答No.2

grumpy_the_dwarf

GIFやPNG-8では256色のパレットの中から指定した1色だけを透明と
して扱います。だから文字をくっきり抜くとアンチエイリアス出来
なくてギザギザするし、美しくアンチエイリアスすると不透明な輪
郭が出来てしまいます。

アンチエイリアスして背景画像にきれいになじむように書き出せる
のは、PNG-24だけ。そしてこれはIE6は対応できません。
http://www.med.yamanashi.ac.jp/~cmr/ のタイトル画像がPNG-24で
すが、ドロップシャドウを透明度のマスクで作ってあるので、IE6で
は変な模様に見えるはずです。私はIE6を切り捨てましたが、対応し
ないとマズいなら「png transparency hack」でググって小細工して
あげるといいらしいです。

お礼

早速の回答ありがとうございます！
参考ページ拝見しました。
pngがIEで対応してないのは聞いたことがありますが
実際に比較したことが無かったので、勉強になりました。
operaで見たら大丈夫ですね。
なるほど～png transparency hackは今度時間があるときに
見てみますね。
ありがとうございました。