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

解決済みの質問

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

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

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

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

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

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

投稿日時 - 2008-11-07 15:12:07

QNo.4460379

暇なときに回答ください

質問者が選んだベストアンサー

通常画像を滑らかに見せるにはアンチエイリアス(徐々に背景色と同じになる)処理が施されます。
濃度が「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


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

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

投稿日時 - 2008-11-07 15:39:55

お礼

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

投稿日時 - 2008-11-07 23:32:19

ANo.1

3人が「このQ&Aが役に立った」と投票しています

[  前へ  |  次へ ]

ベストアンサー以外の回答(1件中 1~1件目)

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

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

投稿日時 - 2008-11-07 15:44:47

お礼

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

投稿日時 - 2008-11-07 18:05:35

あわせてチェックしたい
  • イラストレーターで透明 ...
  • フォトショップで背景透明化してイラストレーターへ ...
  • png形式の背景透明化について。 ...
PR
【回答募集中】花粉にひと言、物申す![ 詳細 ]

OKWaveのオススメ

教えて弁護士さん!

お金の悩みQ&A特集はこちら