私の作っているHP用のロゴを素材屋さんに作っていただいたのですが
透過されていないため、ロゴの周りの部分だけ白くなってしまいます。
壁紙などにあわせるにはどうしたらいですか??
設定の仕方など、教えてください。よろしくお願いします。

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

A 回答 (5件)

なんとなく見てて思ったのですが、HTMLの方で、


<img src="a.gif" border=0>
とすると、画像の周りのわくは消えます。
これは関係ありませんよね?

透過の件を考えると、
制作者さんにお願いするのが一番確実だと思います。
というのに賛成です。

今回は、完全に作ってもらうということでしょうけど、
透過させるかどうかは、ファイルの方の作り方、
ということになります。

なので、
製作者さんにお願いするしかないといっても問題がありません。
もし、意地でも自分でしたい。ということなら、
画像ファイルが、~.gif
のgifファイルなら、透明GIFにする。
~.jpg
のJPEGファイルなら、
pngのファイルに変換する。
というのが一番だと思います。

ちなみに、win98以降のwinに入っているペイントは
透過gifも作れます。

gifで保存した後、
キャンパスの色とサイズで、
設定ができます。

そんなとこで。
    • good
    • 0

No.2の方がおっしゃる通り、制作者さんにお願いするのが一番確実だと思います。


また透過処理を行っても、素材によっては「薄い色の壁紙」に合わせないとまわりがぎざぎざしていて見栄えがよくない、ということもあります。

後、No.2の方の補足になりますが、.png形式の透過はネットスケープ4.7以前のバージョン(4.7も含む)では透過されませんので、御注意ください。あまり使わない方が無難です。勿論、.gif形式であれば透過のものが閲覧できます。
    • good
    • 0

きれいに合わせるには、背景色にあわせて透明GIFのロゴを作り直さなければなりません。


リピートした多色模様の画像を使用している場合は、完全にシンクロさせるには制約が出ます。
    • good
    • 0

素材屋さんに依頼するのが1番だと思いますが、ご自分で画像を加工されたいのであれば、フリーのソフトウェアもあります。

画像の透過のみをされたいのでしたら「GIX]というソフト(シェアウエア)もあります。PNGですと参考URLにフリーソフトもありました。
sonataさんの書込みのように周りのぎざぎざは結構手間がかかると思いますが。

参考URL:http://www.vector.co.jp/soft/win95/art/se194167. …
    • good
    • 0

自分でフォトショップなどの画像処理ソフトを使って透過処理をするか、そのままを白色か出来るだけ色の薄い壁紙を使っていく・・・というのが一般的な方法だと思います。


ただ、作ってもらった画像がどんなのかわからないのでなんとも言えないのですが、透過処理はアンチエイリアスという画像の縁がフワッと自然な仕上がりになるように施す機能がきつめに使ってあると、処理をしても周りにグレーのギザギザのようなものが残ってしまう場合もあります。
    • good
    • 0

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

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

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

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

Q画像と壁紙の模様をあわせたいです

HPを作成してるんですが、画像の背景を壁紙とまったく同じにしたいので白色の部分を透過色にすることはできないでしょうか。
加工の段階で壁紙と同じ背景を貼り付けても、アップロードすると画像と背景では模様の位置がずれてしまいうまくいきません。(細かい模様ですので・・・)

HTMLでできるのか何かソフトが必要なのかまったくわからないのでこのカテで質問させてもらいます。ソフトが必要な場合、ホームページビルダーなどの支援ソフトは使っていないので無料でできる方法でお願いします。

Aベストアンサー

こんにちは

画像背景の透過処理をしたいということでしょうか?

それでしたら『透過gif』や『画像 透過』などで検索すればソフトや色々なやり方が出てきます

位置関係はスタイルシートのmarginやpadding、あるいはpositionなどを使用してこちらで微調整できないこともないですけど・・・
質問的には画像の透過のほうなのかな?

Q影付き(透過)ロゴタイトルの表示ないし背景との同調について

影付き(透過)ロゴタイトルの表示ないし背景との同調について

只今HPを作成しているのですが、今回背景にボーダーを使い、その上にタイトルロゴを表示させようと思っています。デザイン的にそのロゴに影を付け、初めは.gifで透過保存させようと思ったのですが、荒々しい風に出来てしまいました。pngでは美しく出来たのですが、pngはネットブラウザ環境によっては表示されないと聞いたのであまり使いたくなくて・・・。
そこで今度はそのロゴにあらかじめボーダー画像を加えて、cssで上手に背景と溶け込ませて表示させようと思ったのですが、上手に表示出来ません。

ちなみにそのタイトルを表示させる部分は
#wrapper{
margin:0px;
padding: 0px;
text-align: center;
}

#contents{
width: 880px;
margin-left:auto;
margin-right:auto;
}

で内包してあります。html上で簡単に書くと



<body>
<div id="wrapper">
<div id="contents">
ここに画像タグ
</div>
</div>
</body>
といった感じです。

背景は横一列で固定するようにしています。

body{
font-size: 13px;
line-height:160%;
background-image: url(img/back.gif);
background-repeat:repeat-x;
background-position: 0% 0%;
}

こんな感じです。

CSSでこの問題を解決するか、それともgifで上手に透過画像を作るのか、はたまたpng保存で良いのか、分かりやすく解説して下さる方、宜しくお願いします。分かりにくーーい質問で申し訳ありません・・・。

影付き(透過)ロゴタイトルの表示ないし背景との同調について

只今HPを作成しているのですが、今回背景にボーダーを使い、その上にタイトルロゴを表示させようと思っています。デザイン的にそのロゴに影を付け、初めは.gifで透過保存させようと思ったのですが、荒々しい風に出来てしまいました。pngでは美しく出来たのですが、pngはネットブラウザ環境によっては表示されないと聞いたのであまり使いたくなくて・・・。
そこで今度はそのロゴにあらかじめボーダー画像を加えて、cssで上手に背景と溶け込ませて表示...続きを読む

Aベストアンサー

普通は透過GIFで上手く加工します。
PNGで可能ならGIFでサイズは大きくなりますが再現可能です。

背景一体レイアーの場合、
contentsがセンター配置ですからブラウザの可変でずれるのは当然です。
contentsを左配置にして画像を左からmargin-leftで配置するか、
今のまま画像をwrapperに対してのposition配置にするか。
画像を固定して、中の文章をセンター配置にする方法や、
wrapperに対してロゴを背景固定にする方法もありますね。

QPCで作るHPの素材と携帯HPの素材

私はあまりPCに詳しくはないのですが、何度かPCでHPを作ったことがあります。
素材を借りて作ったりしていました。
最近は携帯用のHPを作り始めたのですが、PCのHPで使ってた素材は携帯HPでも使えるのでしょうか?
デコ画というのがありますよね??
素材とデコ画て同じことですか??
容量の違いなのでしょうか・・・。
質問の意味分かりますでしょうか??
分かりにくければ補足します!!

Aベストアンサー

携帯用との事ですが、キャリアなどによって表示出来る画像の形式と出来ない形式があります。
PCのHP用素材でしたら、jpgかgifだと思います。たまにpngもありますが、大体この3つが殆どではないでしょうか。
jpgはドコモ・ボーダフォン・au(ezweb)で対応しているので問題ないと思いますが、gifはボーダフォンが対応していません。逆にドコモがpngが駄目だった…と記憶しています。ezwebは全て対応しています。
jpgでしたら大概はどの携帯でも見られると思いますが、ボーダフォン(というより旧Jフォンでしょうか)の非パケ機は1ページ6kbまでしか表示出来ませんので、あまり画像が大きいとページ自体が見られないという事になります。
最近の携帯は、背景画像も表示出来る事がありますので、素材を上手く使ったらとても素敵なサイトが出来ると思います。

デコ画と言うものを聞いた事がなかったので検索してみたのですが、ドコモのメールで使われる画像なのでしょうか。
ドコモを使った事がないのでイマイチ要領を得ないのですが…。
検索して調べてみるのも一つ手ですよ。

古い知識でしたら申し訳ありません。

携帯用との事ですが、キャリアなどによって表示出来る画像の形式と出来ない形式があります。
PCのHP用素材でしたら、jpgかgifだと思います。たまにpngもありますが、大体この3つが殆どではないでしょうか。
jpgはドコモ・ボーダフォン・au(ezweb)で対応しているので問題ないと思いますが、gifはボーダフォンが対応していません。逆にドコモがpngが駄目だった…と記憶しています。ezwebは全て対応しています。
jpgでしたら大概はどの携帯でも見られると思いますが、ボーダフォン(というより旧Jフォン...続きを読む

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

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

Aベストアンサー

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

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

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

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

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

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

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

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

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

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

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

Aベストアンサー

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

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


人気Q&Aランキング

おすすめ情報