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

このQ&Aに関連する最新のQ&A

A 回答 (3件)

GIFは透過フォーマットをサポートしていますが、あくまでON、OFFの


情報しかもつことができません。

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

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

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

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

そんなところでしょうか。
    • good
    • 0
この回答へのお礼

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

お礼日時:2002/03/13 13:41

 私も素人なので的をはずしたお答えになるかも知れないと心配ですが。


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

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

お礼日時:2002/03/13 13:30

これは、縁のほうは、円滑に縁取りをするために拡大するとわかりますが、濃淡があって、ぎざぎざにならず、きれいに丸が描かれるのです。


透明化するときに、1色だけしか透明にしていないのです。
フォトショップ5.0では、gifを透明化するときに、スポイトで、何色かを透明に設定できるようになっています。これで、白く見える部分を透明色に指定していきます。
    • good
    • 0
この回答へのお礼

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

お礼日時:2002/03/13 13:28

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qはがきの大きさの背景イラストを無料でダウンロードしたい!!

こんばんわ

最近、はがきにて懸賞に応募しているのですが、
白地のはがきに黒のボールペンで書いても味気ないので
PCで背景を印刷してから応募内容を書いて見ようと思いますが。。。

うまく無料でダウンロードできて「はがき大の背景イラスト」なのが
見つかりません。
どなたか詳しい方いらっしゃいましたらよろしくお願いします

Aベストアンサー

イラストではないですが、こちらのサイトの左下にある「背景」は使えると思いますよ。
「ファミリー」「フォーマル」「和風」と種類があります。
年賀状用のサイトなのですが「背景」には文字が入っていないので、いろいろな使い方ができると思います。
http://cp.c-ij.com/japan/otasuke/nenga/

Q透過GIFが表示されないんですが・・・

初めて自分のホームページに透過GIFを使い、いざアップロードしてみたら表示されていませんでした。他の普通の画像は問題なく表示されています。参考になるかと画像のプロパティを見たところ、使用不可とありました。透過GIFには使用できる環境が決まっているのでしょうか?

参考までに、OSはMEを使用、ブラウザはIE5.5です。

宜しくお願いします。

Aベストアンサー

普通のアップロードが駄目ということはありませんよ。。
前回はアップロードした場所が違ったために、
たぶん表示されなかったんでしょう。
オフラインできちんと表示されているのであれば、
そのままのファイル構造でアップロードすればいいわけです。

何で違う場所にアップロードしたのか???
画像はフォルダの中にあるのに、アップロードはHTMLファイルと同じ場所に・・・
なんてことはないですか?
フォルダの中にあるのなら、そのフォルダも作ってあげなくてはいけません。
FFFTPで、左でフォルダを選択して「↑」ボタンを押せば、
フォルダごとアップロードしてくれます。

また、左の画面(PC側)でフォルダを開いたら、
右(サーバー側)のフォルダも開いて・・・。とやっていますか?
何となく、違う場所にアップロードしちゃったんじゃあないかな~
って思いましたので、。

今回の問題は、透過、ミラーリングアップロード、の問題ではなく、
HTMLのファイルの記述と画像ファイルのある場所が一致しているかどうか?
の問題だと思います。
では、頑張ってくださいね。

↓ここからは蛇足です。

これを機会に、パスの記述を覚えては?
※width,height,border="0"は省略

■ファイルと同じ場所に画像
<img src="画像"> 例:<img src="gazou.gif">

■同じ階層のフォルダ(imageとする)の中
<img src="フォルダ名/画像"> 例:<img src="image/gazou.gif">

■1つ上の階層
<img src="../画像"> 例:<img src="../gazou.gif">

■1つ上の階層にあるフォルダ(image2とする)の中
<img src="../フォルダ名/画像"> 例:<img src="../image2/gazou.gif">

普通のアップロードが駄目ということはありませんよ。。
前回はアップロードした場所が違ったために、
たぶん表示されなかったんでしょう。
オフラインできちんと表示されているのであれば、
そのままのファイル構造でアップロードすればいいわけです。

何で違う場所にアップロードしたのか???
画像はフォルダの中にあるのに、アップロードはHTMLファイルと同じ場所に・・・
なんてことはないですか?
フォルダの中にあるのなら、そのフォルダも作ってあげなくてはいけません。
FFFTPで、左でフォル...続きを読む

Qフリーのイラストを集めたいのですが、背景が邪魔です

無料の素材サイトから、人物や物(電話機、自動車など)のイラストを集めたいのですが、背景が邪魔です。

素材集では、ほとんどの素材の背景は白になっていると思いますが、背景がクリア(無色)の素材はどこかにありますか?

それとも、やはり、一つずつ切り抜いていかなければならないのでしょうか?

Aベストアンサー

こんにちは。

時々フリーの素材サイトでも、透過ファイルで提供しているサイトがありますよ。
下記はいずれも、商用利用・加工可能です。

http://www.emstudio.jp/
http://sozaizchi.com/index.html
http://sozai.7gates.net/info/kiyaku.html


ちなみに、Photoshopですと、次の方法で背景を削除できます。

1.背景色が1色の場合
 自動選択ツールで背景をどこか選択 → 削除

2.背景が複雑な場合
 フィルタメニュー→抽出、で画像全体を選択


他にもいろいろな方法で画像のみ、残すことができます。

下記のようなサイトもありますので、ご参考まで。
http://www.dougamanual.net/photoshop.html

Q透過gif画像の上に文章を重ねるには?

四角形でなく、変形した画像のぎりぎりまでhtmlで文字を入れたいのですが、透過gif加工した画像を使っても、文字が原画の四角形のところで分断されてしまいます。
透過済みのgif画像の透明部分に、htmlで書いた文字を重ねることはできないのでしょうか?
今はその画像の余白部分を拡大して、壁紙にしてhtml文字を重ねているのですが、機種によってかなりのズレが生じてしまい、何とかしたいのですが・・・。
どうか宜しくお願いします。

Aベストアンサー

いろいろな方法で文章を載せることができます。
(1)htmlで枠のない表を作る。
(2)変形した画像を表の背景に貼り付ける。
(3)表に文字を挿入し、スペースや右寄せなどで調整する。
これで自由に文字が入るはずなんだけど。

Qイラストの背景が黒くなる

インターネットでイラストをダウンロードしていました。マイピクチャーの中に気に入ったイラストを入れておくと便利なので。ところが、「開く」で見るとイラストの背景が白なのに、「保存」すると背景が黒になってしまいます。さっきまで他のイラストは平気だったのに急にそうなり、それ以降はみんな同じ現象です。何か設定が変わっちゃたのでしょうか? どうすれば白い背景にもどりますか? OSはXPです。イラストをダウンロードしていたサイトはプリントアウトファクトリーというサイトです。

Aベストアンサー

プリントアウトファクトリーというサイトは、http://www.printout.jp/
ですよね?

で、どのイラストからそのような現象が起きてるのでしょうか?
また、それまで正常だったイラストも、背景が黒になってしまいますか?

考えられる対処方は、ブラウザの一時ファイル(キャッシュ)のクリアを試してください…改善されるかも。

または、元々そのイラストには、背景色は無く透明だった…と云う可能性もありませんか?

Qスペーサーの透過GIFの大きさ指定が出来ない

セル内でスペースをとる為に1×1pxの透過GIFを使用しようとしたのですが、
<img src="space.gif" width="15" height="1" alt="">
記述はこれであっていると思うのですが、結果ブラウザに表示されると、15×15の等倍になってしまいます。横のスペースを確保したいので縦を取られるとレイアウトが崩れてしまいます。自分で作った透過GIFだけでなく配布されている同様の透過GIFも使ってみたのですが結果は同じでした。どうしてこうなるのでしょうか?

Aベストアンサー

<img src="space.gif" width="15" height="1" alt="">
ソースにもちゃんと縦横を指定してありますでしょうか?縦だけ、横だけ、になると等倍になったりすることがあるみたいです、私もそうでした。
確認のためにborder="1"と入れて見るとどういう状態なのか判りやすいと思います。

Qイラストの背景を透明にしたい

イラストの背景を透明にしたい

初歩的な質問かもしれませんが、よろしくお願いします。

フォトショップのイラスト(背景が白)をインデザインに貼り込んだ際、
背景が白いままでなく透明になるようにするには、
どうしたらよいでしょうか?

例えば添付画像で示した★の部分がイラストとして、
インデザイン上で背景に色をしいて、★をのせるようなことをしたいのですが。

よろしくお願いします。

Aベストアンサー

レイヤーをダブルクリックしてレイヤー0にする
背景が白とか単色だったら色域選択して、編集→消去してPSD形式で保存

>イラストの微妙なエッジがなくなるのは覚悟することになるでしょうか?
エッジが白で無い限り、エッジは無くなりません

エッジが白の部分は選択範囲を足せばいいんだし

Q透過処理をしたGIFファイル画像の周りのギザギザ・・・・

いつも助かってます!今回も宜しくお願いいたします。
HPビルダーでHPを作成してます。透過処理をしたGIFファイルを開いて確認するとそれなりに綺麗に見えるのですが、ブラウザで見ると周囲がギザギザになって非常に見苦しいものになってしまいます。
この「ギザギザ」は処理できるとどこかで読んだ記憶があるのですが、どなたかご存知ではないでしょうか。
宜しくお願いいたします。

Aベストアンサー

アンチエリアシングを有効にして保存した場合、
ギザギザを目立たなくさせることができます。
が、透過GIFの場合は透明色に指定した色と背景色を
工夫しないと色が残ることがあります。

参考URL:http://www.geocities.co.jp/SiliconValley/4634/cg_gif.html

Qイラストの背景を純白の白にするにはどうしたらいいですか?

イラストの背景を純白の白にするにはどうしたらいいですか?

今、知人が書いたイラストを自分のパソコン(Windows Vista)を使ってスキャンしています。スキャンするソフトウェアはEPSON Scanを使っています。複合機本体の型番は「PM-A900」を使用しています。

そこで質問なんですが、イラストをスキャンすると何故か背景が薄ピンクがかった色になります(白い背景の時もあります)
イラスト自体の背景の色は白なんですがスキャンするとこうなります。
特にイラストをピンク色で染めて書くと背景まで薄ピンク色になります。
これは何故でしょうか?

そして背景を純白色にする方法(ソフトウェアでも構いません)は何かありませんか?
宜しくお願い致します。

Aベストアンサー

どの方法についてでしょうか?

・スマート修正の場合、白くしたいポイントはいくつでも増やすことが可能です。(どちらかというとワンタッチ)
・背景消しゴムの場合、こするようにドラッグしつつ動かすことによってエッジにある微妙なカス(?)も一緒に消えてくれます。
・メークオーバーツールの場合、クリックすればするほどその範囲が広がっていきます

先ほどの方法とは違う方法もあげてみます。
◆カーブを使う方法
・方法1
 1.[調整(A)]→[明るさとコントラスト]→[カーブ]を選択
 2.ウィンドウ右下の白いボタンをクリック後、その画像で一番明るく指定したい部分をクリック
 3.ウィンドウ右下の黒いボタンをクリック後、その画像で一番暗く指定したい部分をクリック
・方法2
 1.RGBとなっている部分を「赤」にし、少し右下の方にカーブを動かしてあげると赤の出力が減る

◆カラーチェンジャー
 1.ラーニングセンターより「画像をレタッチ・復元する」より「カラーチェンジャー」を選ぶ
 2.色を白を選択し、白くしたいところに流し込む

画像によってベストポイントは違うので、良い感じのポイントをみつけるまで
スポイト→リセットをしてみてください。
実際、どれぐらい画像が赤くなっているかがわからないのでこんな形の説明になってしましたが、
また分からなければ補足願います。

どの方法についてでしょうか?

・スマート修正の場合、白くしたいポイントはいくつでも増やすことが可能です。(どちらかというとワンタッチ)
・背景消しゴムの場合、こするようにドラッグしつつ動かすことによってエッジにある微妙なカス(?)も一緒に消えてくれます。
・メークオーバーツールの場合、クリックすればするほどその範囲が広がっていきます

先ほどの方法とは違う方法もあげてみます。
◆カーブを使う方法
・方法1
 1.[調整(A)]→[明るさとコントラスト]→[カーブ]を選択
 2.ウィンドウ右...続きを読む

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

はじめまして。

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

かなり細かいところにこだわりすぎな感じもするんですが、
ぜひとも叶えたいのでどなたか方法をご存知でしたら教えていただきたいと思います。
よろしくお願いします。

Aベストアンサー

ブラウザの環境にある程度左右されない方法として、
私の場合、逆に非常にベタなやり方で同じ効果を狙ってページを作っています。
透明部分と白(画によっては背景画像のカラーと同系の薄い色が良いかと)の
市松模様GIFを作って、それをtable背景にしています。


人気Q&Aランキング

おすすめ情報