タイトルのとおりの状況です。
基本的な質問でスミマセン。ここでつまずいています。
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背景をのせる方法

はじめまして。

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

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

Aベストアンサー

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

Q英語 "Free" という言葉の起源とは?

英語のFree=自由な、つながれていない、自発的ななど意味がある言葉の起源が知りたく質問させていただきました。

多くの英語は、ラテン語が起源となっていることがありますが、このFreeという言葉を調べてると、Old Englishがオリジンとなっているとしか分かりませんでした。

Freeの言葉の起源、またこの言葉がいつごろ、どういう歴史的背景があって使われたのかなどご存知の方がいらっしゃいましたら、ご教授いただけると幸いです。

よろしくお願い申し上げます。

Aベストアンサー

古期ゲルマン系言語の親愛な、愛されている、が語源との事です。英語より古そうですね。
http://www.etymonline.com/index.php?search=free&searchmode=none

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

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

Aベストアンサー

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

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

QPhotoshop 背景に縞模様のパターン

Photoshop CS を使う初心者です。Photoshopでホームページのメニュー・バーを作成しようとしているのですが、背景を縞模様にしたいのです。パターンの中を探しても、見つからないのですが、何か良い方法はないでしょうか?宜しくお願いします。

Aベストアンサー

■パターンを定義する
フォトショップでは自分でブラシやパターンを作成して定義し、使用することができます。

フォトショップ6.0では...
まずパターンを定義します。
適当に縞模様を作り、それを"短形選択ツール"で選択し、上記メニューより"編集(E)"を選びます。
下のほうに"パターンを定義(D)..."と出ている思うので、選択します。
名前を決めてOKを押します。これでパターンが保存されました。
次にもう一度"編集(E)"を選択して、"塗りつぶし(L)"を選択します。
使用をパターンにし、カスタムパターンより先ほど保存したものを読み込みます。
すると塗りつぶされます。

■パターンを作る際のコツ
背景は無しにし、透明にする。
パターンはレイヤーを全部統合した形で記憶するので描画したものだけ定義したい場合は背景を透明にする必要があります。

パターンを定義する場合はあらかじめ新規作成で作るのが無難です。

パターンで塗りつぶされた場合にどのように全体に反映されるのか良く考えて作らなければなりません。
例えば今回の場合は...
縦1px横2pxの絵を作成すれば縦縞模様のパターンとなります。
■□
こんな感じのパターンとなります。

頭を使うというのは...

これだけを定義すると、塗りつぶした際に全部真っ黒になりますよね。

■□■
これの場合は縦縞模様にはなりますが、黒い縦縞は太くなりますね。


パターンを作る際は、パターンとする絵を中心に縦横斜めに同じ物を置いた場合どのようになるのか考える必要があります。

■パターンを定義する
フォトショップでは自分でブラシやパターンを作成して定義し、使用することができます。

フォトショップ6.0では...
まずパターンを定義します。
適当に縞模様を作り、それを"短形選択ツール"で選択し、上記メニューより"編集(E)"を選びます。
下のほうに"パターンを定義(D)..."と出ている思うので、選択します。
名前を決めてOKを押します。これでパターンが保存されました。
次にもう一度"編集(E)"を選択して、"塗りつぶし(L)"を選択します。
使用をパターンにし、カスタムパター...続きを読む

Q背景に透過画像を重ねて、背景が透けて見える状態にしたい

http://www.iris-interactive.fr/accueil/ACC_index.asp
こちらのサイトのメインコンテンツ部分で背景が透けて見えます
これはどうやるんでしょうか?教えてください

Aベストアンサー

<div id="page">について、
透明なpngを背景にしてあるだけですが??pngでなくてgifでもできるようですね。
サイトのソースと、スタイルシートをご確認ください。

Qかわいい無料素材サイトを教えてください

フェアリー系、パステル系、ネオン系、80srockの無料素材サイトを教えてください!!

背景画、デコメもあると嬉しいです♪

Aベストアンサー

無料でデコメから動く待ち受け合成や自分で作れるデコメ作成アプリなど何でもあります。メール送受信画像が作れたり、顔文字辞典、セリフ画、など無料とは思えないくらいの機能が揃ってます。
マイページには自分が作った画像が保存できます。

無料版
http://m.gal-deco.com/

公式サイトの方はもっと凄いです。
どちらを選択するかはおまかせします。
公式サイト
http://gal-deco.com/

参考URL:http://gal-deco.com/

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

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

Aベストアンサー

Photoshopのバージョンは?

5.5以降ならWeb用に保存があるので、保存時の設定でマットを無しにするか、HPで使用されている背景の色に設定してあげると目立たなくなるかと思います。
Photoshop上と全く同じ8bitで抜いてくれる訳ではないので、ある程度は仕方が無いと思います。

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

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

Aベストアンサー

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

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

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

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

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ランキング