カラーの背景に透過GIFを貼り付けると周りが白くなります

質問

タイトルのとおりの状況です。
基本的な質問でスミマセン。ここでつまずいています。
HPのページ背景を赤に指定します。
作成したGIF（例えば、黒の丸●）（透過済み）をそのページに貼り付けると、そのGIFの外側が一回り白くなります。これはどうしてこうなるのでしょうか？使用しているソフト（フォトショップ、イラストレータ、ビルダー）で何とか直りますか？
よろしくお願いします。

回答No.3

sight · ベストアンサー

GIFは透過フォーマットをサポートしていますが、あくまでON、OFFの
情報しかもつことができません。

一方、PNGはフォーマットとしては256段階の透明化をサポートしていますが、
編集・表示をサポートするソフトがまだ少ない（今後増えるかどうかも謎）

ですので、#1の方がおっしゃるように、PhotoShopを始め、複数色を透明色
にすることはできますが、表示するかしないかしかの２択なので、エッジ部分
が不自然になってしまうのは仕方がないことだと思います。
（また、複数色を選択するのは面倒ですし、エッジでない部分まで透明化
されてしまう可能性があります。）

エッジの不自然さを回避するのには、画像作成時に背景色を使用するページの
背景色、背景画像に近い色で作成すること。
たとえばページの背景が青、で、表示するのが黒丸の画像でしたら、白地に
黒い丸の画像を描いて、白を透明色として透過GIFにすると、黒丸の画像の
周辺部はグレーの部分が残って、不自然。
しかし、画像作成時、青地に黒い丸の画像を描いて、青を透明色として透過
GIFにすると、周辺部はグレーではなくて青みがかったグレーになっている
ので不自然に感じません。
もちろん、ページの配色を変えたら、もう一度画像を作り直す必要があります。
作成時に背景色をレイヤにしておけば簡単、とはいえ、手間がかかることには
違いがありませんが、惜しむことのできない手間です。（もっとも、配色をかえ
たら素材も作り直すのが本当でしょうが）

それか、多少ギザギザになることを覚悟してはじめからエッジ部分はアンチ
エイリアシングしない。

そんなところでしょうか。

お礼

どうもありがとうございました。
sightさんをはじめ皆さんの意見は大変参考になりました。
結局、イラストレーターでロゴを作る→フォトショップのレイヤーの背景をHPの背景色と同じにするということで解決しました。さっき自分が作ったのより、全然満足しています。せっかく思うようにデザインしたものが、あのギザギザ（エッジ）によって、暗い気持ちになっていたので、今は晴れ晴れと次の作業に取り掛かろうと思います。本当にありがとうございました。

回答No.2

samarukando

私も素人なので的をはずしたお答えになるかも知れないと心配ですが。
　その透明ＧＩＦ画像を作ったときに白い地色の上に作られ、その白色を透明にされたとおもいます。ところが画像の周囲が本当の白でなかったら、当然そこは透明にならないですね。
　対策は、黒い地色でＧＩＦ画像を作ってみて、その黒を透明にしてみるのですね、このときも画像の周囲には本当の黒でない黒が残りますが、白よりは目立たないのではないかと思います。
　一番よいのはＨＰ上で背景にしたいなあと思っていらっしゃる色を地色にすることです。これですと透明にしなくてもいいわけですが、模様のある背景には乗せられませんね。
　とにかく白か黒かどちらかの地色の透明ＧＩＦ画像を作って、感じのよい方を使うのが実用的ですね。
　フリーの素材集などを提供してくださっているサイトなどでは、黒と白の両方の地色で同じ模様の画像を用意してくださってますね。

お礼

ありがとうございまいした。とても参考になりました。

回答No.1

syunpei

これは、縁のほうは、円滑に縁取りをするために拡大するとわかりますが、濃淡があって、ぎざぎざにならず、きれいに丸が描かれるのです。
透明化するときに、１色だけしか透明にしていないのです。
フォトショップ5.0では、gifを透明化するときに、スポイトで、何色かを透明に設定できるようになっています。これで、白く見える部分を透明色に指定していきます。

お礼

ありがとうございました。
まだまだはじめたばかりで、フォトショップで何色かを透明にできることすら知りませんでした。とても参考になりました。