• ベストアンサー

Illustratorの「Web用に保存」で白い丸が残ってしまう。

Illustratorの「Web用に保存」をクリックして、作成したリンクの為のボタンの形を保存しようとしました。 JPEGに設定すると、ボタンの周りに大きな白い余白ができてしまいます。でもこれは本に記されていたので納得しました。 次にGIFで「透明」にチェックを入れて保存したところ、四角い余白はでませんでしたが、ボタンと同じくらいか少し大きめの白い丸い形が一緒に保存されてしまいました。 2アップ画面や4アップ画面にした時に、保存前の元の図は周囲が灰色と白のギンガムチェックになっているだけですが、保存後のプレビューの画面はギンガムチェックの上に白い丸が載っていて、その上にボタンが載っている形です。 ホームページ作成ソフト(ホームページビルダー)で、保存しておいたそのボタンをページに挿入すると、やはりプレビュー画面で見たのと同じものになりました。 何を直せば、周りが透明なボタンだけを保存できるでしょうか?

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

  • ベストアンサー
  • hiroleta
  • ベストアンサー率64% (1114/1719)
回答No.1

そのボタンの外周に影響する様な「ぼかし」や「ドロップシャドウ」を使ってないですか? 使ってる場合にその部分はGIFでは透明になりません。 HPのボタンの背景色が単色なら、Illustratorで白い部分が隠れる大きさの背景を付けてGIF保存するか、重くなりますがPNG-24だと背景無しで透明に出来る場合があります。

hpmake
質問者

補足

ご回答ありがとうございます。 結果としては、GIFで保存して透明にはなっております。 (ぼかし、ドロップシャドウは最初から使っていませんでした。) 問題点は、ボタンと同じ位の大きさの、変な白い丸い形が、ボタンの下に重なってしまっており、ボタンとこの白い丸形以外がきれいに透明になっています。 透明オブジェクト以外を透明にする事についてはうまくいっていますが、本にも書いていない(謎の?)白い丸い形が描かれてしまっている事です。 PING-24という方法についても試してみたいと思います。

その他の回答 (1)

  • SortaNerd
  • ベストアンサー率43% (1185/2748)
回答No.2

基本的にNo1さんの言われる通りですが、少し補足しますと、 gifでは「半透明」が表せません。 そのため、ぼかしがかかっているとその部分は半透明にならず、白い背景の上に半透明な色を乗せたような色になります。 ぼかしはかけてないということですが、アンチエイリアスはかかっているでしょうからわずかにぼかしているのと同じことです。 解決策としてはまずアンチエイリアスを切ること。縁が多少ドットが見えるようになりますが白い縁取りはなくなります。 またNo1さんの言っているように、その画像を置く予定の場所の背景と同じ色を使えば白ではなくその色の縁取りになり見えなくなります。背景が単色でなくてもなるべく似た色を使えば案外見えなくなるものです。 また、pngなら良いというのは、pngはgifでは扱えない半透明が扱えるのです。IE6は対応していないのがネックですが、IE8まで出ている今IE6を使う人は少なくなりつつあります。何が何でも全ての環境で見えるようにと思わないのであれば、切り捨ててもさほど問題はないと思います。

hpmake
質問者

お礼

ご回答ありがとうございます。 PNGでやってみたいと思います。 アンチエイリアスを切って、再度単純な四角形だけで保存を試みましたが、GIFでは、問題の白い丸はなくなりませんでした。(PNF-24の場合だけ、うまくいきます。) <IE6は対応していないのがネックですが、IE8まで出ている今IE6を使う人は少なくなりつつあります。> 今後の少数派となるIE6を考慮しないでPNG-24で保存しようと思います。

関連するQ&A