• ベストアンサー

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

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

  • CSS
  • 回答数3
  • ありがとう数3

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

  • ベストアンサー
  • sight
  • ベストアンサー率53% (199/370)
回答No.3

GIFは透過フォーマットをサポートしていますが、あくまでON、OFFの 情報しかもつことができません。 一方、PNGはフォーマットとしては256段階の透明化をサポートしていますが、 編集・表示をサポートするソフトがまだ少ない(今後増えるかどうかも謎) ですので、#1の方がおっしゃるように、PhotoShopを始め、複数色を透明色 にすることはできますが、表示するかしないかしかの2択なので、エッジ部分 が不自然になってしまうのは仕方がないことだと思います。 (また、複数色を選択するのは面倒ですし、エッジでない部分まで透明化 されてしまう可能性があります。) エッジの不自然さを回避するのには、画像作成時に背景色を使用するページの 背景色、背景画像に近い色で作成すること。 たとえばページの背景が青、で、表示するのが黒丸の画像でしたら、白地に 黒い丸の画像を描いて、白を透明色として透過GIFにすると、黒丸の画像の 周辺部はグレーの部分が残って、不自然。 しかし、画像作成時、青地に黒い丸の画像を描いて、青を透明色として透過 GIFにすると、周辺部はグレーではなくて青みがかったグレーになっている ので不自然に感じません。 もちろん、ページの配色を変えたら、もう一度画像を作り直す必要があります。 作成時に背景色をレイヤにしておけば簡単、とはいえ、手間がかかることには 違いがありませんが、惜しむことのできない手間です。(もっとも、配色をかえ たら素材も作り直すのが本当でしょうが) それか、多少ギザギザになることを覚悟してはじめからエッジ部分はアンチ エイリアシングしない。 そんなところでしょうか。

yumicott
質問者

お礼

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

その他の回答 (2)

回答No.2

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

yumicott
質問者

お礼

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

  • syunpei
  • ベストアンサー率27% (194/717)
回答No.1

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

yumicott
質問者

お礼

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

関連するQ&A

  • イラストレーターで作るgif透過画像について、色々調べてやってみたので

    イラストレーターで作るgif透過画像について、色々調べてやってみたのですが思うように出来ません。バージョンはcs4です。 たとえば「黒背景に浮かぶロゴ」のgif画像で、使うときは後ろの黒背景を表示させないようにするにはどうすればいいでしょうか?

  • gifの周りに白いギザギザができてしまいます。

    どうしてなのか全然わかりません。どうかよろしくお願いいたします。 フォトショップでgif画像を作って背景は透過です。それでドリームウィーバーで画像を配置したのですが、何故か画像の周りに白いギザギザができてしまいます。 フォトショップで確認すると何もギザギザはでてないのですが、gifで書き出すとできているみたいなんです。。。 どうすれば解決するでしょうか?よろしくお願いいたします!

    • ベストアンサー
    • HTML
  • gif画像の背景

    イラストレーターでボタンを作り、フォトショップでウェイブ用に(gif)に変換してキャラクタを作成しました。 実際にHTMLに組み込む時に問題が発生しました。 1.背景が紫なのですが、gif画像を挿入時にgifの回りに白い線が出てしまう。 2.フォトショップでデェィザ処理を100%にして見ましたらあまり変りませんでした。 3.マットの色を同系の色にしたのですが、あまり変らない 4.四方八方にふさがれた状態です。 どうか教えて頂けないでしょうか ?

  • GIMPでの背景の透過がイラストレーターで適用されない

    私はフォトショップを持っておらず、何かを作ったりするときはGIMPとPixiaとIllustrater8.0を使っています。Pixiaで前に作っていたイラストと、GIMPで切り抜いて背景を透過させた写真をイラストレーターで組み合わせて使いたいのですが、GIMPの中ではうまくできていたはずの背景の透過処理が、Illustraterに配置すると適用されていません。PNG形式とGIF形式の2通りを試してみたのですが、PNGのときは背景が真っ黒になり、GIF形式のときは背景は白でした。保存のときに、背景の状態を保存するみたいな内容にもチェックが入っていたはずなのに、何度試してもうまくいかず、こちらで質問させていただこうと思いました。申し訳ありませんがどなたか教えてください。

  • フォトショップの透過グラデーションをイラストレーターへ

    こんにちは フォトショップで画像を中心から外側へおおよそ円形に 透過グラデーションを作りました。(psdで保存) イメージ的には、だいたいこんな感じです。 http://www.pet-p.com/tubekubiwa/sankou/keikou_pink.jpg フォトショップで、実際は 中心部あたりは透明度0(画像はくっきり) 中心から外側へは透明度はだんだん大きくなっていき(透明になっていく) (フォトショップで透明度を表すチェックの市松模様があります。) さて、ここからが本題なのですが このフォトショップで作った画像を イラストレーター(8.01)で配置したら 透過されてなく白いままでした。 どうしたらよろしいでしょうか? (もしかしたらイラストレーター(8.01)では、できないのでしょうか?) よろしくお願いします。 [補足1] 透過グラデーションではなく、単なる透過の画像を イラストレーター(8.01)へ配置したら、ちゃんと透過されてました。 (背景がみえる。) [補足2] OS:win98SE フォトショップ 5.5 イラストレーター8.01

  • フォトショップの背景透過

    フォトショップの背景透過 はじめまして。 現在、ポスターを製作しています。 お客様からロゴの写真(データが無いため)を頂いて、 フォトショップで切り抜き、イラストレーターに貼り付けたところ、 後ろに薄っすらと背景が出てしまいます。 ポスターがピンクなので、それより若干薄いピンクの四角い枠が… フォトショップのデータは切り抜きで、背景は白とグレーの市松模様です。 似たような質問をみて色々試してみたのですがうまくいきません… どなたかご教授お願いいたします。

  • エクセルと透過GIF

    CADデータ(平面図でモノクロ)を透過GIFに変換して、 エクセルの挿入→図→ファイルから貼り付けて印刷すると 貼り付けた透過GIFが黒い部分と赤っぽい黒で印刷されます。 それと、ぼやけた感じがします。 透過GIFにしないと問題なく黒で印刷出来ます。 会社に複数のパソコンがあり(OSはXP、ME、98SE)で試して 見ましたが同じ現象になります。 解消方法を教えて下さい。 宜しくお願い致します。

  • 背景画像の上に透過GIF背景をのせる方法

    はじめまして。 メモ帳にHTMLタグ打ち込みでWEBページを作ってるのですが、 bodyで背景画像を指定し、その上に透過GIFをおき、さらにその上にテキストを表示させるにはどうしたらよいのでしょうか。 具体的には、「テキストを表示させるブロック(tableやdiv)の部分」を半透明の透過GIFをフィルターみたいにかぶせて、その上に書くテキストを見やすくさせたい、という動機です。 divのなかのstyle、またはtableでbackgroundを定義しても、もとのbodyの背景が反映されなくなってしまうのですよね。 一応、自分で考えた策としては ・ブロックの背景そのものを、ある程度薄い色に変えた画像を用意してそれをtableの背景にする というものがあるのですが、これはやはりつなぎ目の部分でズレてしまって見栄えがあまりよくないのです。 かなり細かいところにこだわりすぎな感じもするんですが、 ぜひとも叶えたいのでどなたか方法をご存知でしたら教えていただきたいと思います。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 透過して画像を背景に貼り付ける方法

    背景に写真を切り抜いた画像を貼り付けてHPにUPしたいと思っていますが、自分で色々やってみましたが出来ません。 jpgの背景画像にjpgの写真(綺麗に形を切り抜いた物)を合成はできるのですが、 切り抜いた画像の周りを透過させて、別の背景に貼り付けて、合成したいのです。 透過させると、gifかpngで保存ですよね。でその画像を背景と合成させるのができません。背景にそれを貼り付け、コピーなどすると、透過できなくて、画像の周りに四角く枠ができます。画像編集ソフトで、gifが読み込めません。でpngに変更して、保存すると透過出来なくて! 困っています。最初から素材でpng透過してある物も、出来ません。ソフトはwinxpに標準でついているもの(フォトレタッチとビルダーv6.5ライト)意外はIrfan とPict Bear(ペイントソフト)のようなものしかありません。 あまり、画像処理ソフトの使い方が分からずにいます 上記のフリーソフトも使いこなせずにいる、初心者です。 良い方法があったら教えてください 市販のソフトでないと、このような事は出来ないのですか。 どうぞ宜しくお願いいたします 説明が分かりづらくてすいません

  • Photoshop7.0での透過GIF保存

    いくつかネット上で調べても駄目なので改めて教えていただきたくて投稿します。 ネット上のゲームに使う画像ということで、依頼されてGIFの画像を作りました。 背景透過にして欲しいと頼まれました。 もともとはPhotoshop7.0を使って彩色し、 背景部分はなしで製作していました。 見えやすいように、レイヤーで白い背景はおいていましたが、 直前に捨てました。(ブルーのチェックが見えている状態) その後、Web用に保存→GIF形式を選択→透明のチェックボックスにチェック というように保存しました。 自分でPhotoshopで見る限りは透明に見えているので (Web用に保存のプレビューでもそう見えます。) てっきりできていると思い、 依頼主に送ったところ 背景が透過できていない、と言われました。 確かに試しにIrfanViewを使ってみたところ 確かに背景が白いまま残って見えます。 これはなぜなのでしょうか? ちなみに、ネット上で 「Photoshopで透過GIFを…」という項目で 検索をかけたところ、インデックスカラーに変更した後、書き出し→GIF98aを選んで保存、と書いてありましたが 私のPhotoshopでは、書き出しのところには Illustrator用の書き出ししか選択できません。 一般的にネットゲームなどで使用する画像の背景透過と Photoshopの背景透過は意味が違うのですか? それとも背景透過のやり方が違っていますか? 教えてください。