HPを作成しています。
TOPページのメイン画像の上に透明のバナーを貼り、
そこにリンクを貼って別のページに飛ばす、
と言うことをしたいと思っています。
そのときバナーは透明ですが、影で浮き上がらせているようにし
何か押下できるものがあるんだ、と言う感じにしたいです。
バナーはFireworks4で作成しています。
レイヤーの透過を0に近い数字に設定し、ドロップシャドウで影をつけてます。
そこまでは良いような気がしていたのですが、
いざ書き出してみると影の周りに白く縁ができ、下にある画像となじみません。
書き出しの時にインデックス透明カラーを設定しても同じです。
このような時、何か別の方法があるのでしょうか?
ソフトはFireworksを使っていますが、photoshop・Illustratorもバージョンは古いですが持っています。
3つのいずれかのソフトでメイン画像がきれいに透けて見え、
影もけっこうはっきりついて浮いて見えるバナーの作り方を教えてください。
No.5ベストアンサー
- 回答日時:
作り方が間違っているのか、使用されているソフトの問題なのか、お使いのブラウザの問題なのかを特定する必要があるかと思います。
(ちゃんとサーバーにアップして表示を確認・F5キーを使って更新されてますよね?)まずブラウザですが、アップしたHTMLページをFirefoxブラウザで見てみて下さい。Firefoxだったら、PNGの半透明はちゃんと反映されるはずなのです。
これでドロップシャドウがキレイに見えなかったら、作り方の問題(ソフトの問題>古すぎる???)なのかもしれません。
Fireworks以外であれば、フォトショを使ってみるとか。どのバージョンをお持ちかはわかりませんが、「Web用に保存」があれば、「透明部分」にチェックを入れてPNG24で保存します。
あとは、最新バージョンの体験版を使ってみるとか。
Firefoxで半透明で表示できたら、あとはJavascriptを使ってIE6でも反映されるかどうかの確認をします。
この回答への補足
あれから色々調べては作業してを繰り返しているのですが、なかなかうまくいきません。
まだ時間がかかりそうですので、ここで一度締め切らせていただき、お礼とさせていただきます。
それでもできなかったら再度質問させていただきますので、
そのときはまたよろしくお願い致します。
Muller3さん、shut0325さんありがとうございました。
何度もありがとうございます。
Muller3さんのおっしゃっているような確認方法と、
ブラウザもFirefoxで見ているのですが変わらずです…。
ソフトのバージョンが低いことは気になっていたので、体験版で試してみます。
photoshopはちょっと苦手ですがそちらでも確認してみます!
No.4
- 回答日時:
gifではなくpngです。
fireforksでしたら多分最適化設定をPNG8とか32に設定して、透明部分にチェックを入れて書き出すのだと思うのですが…で拡張子は.pngになるはずですが、
Fireworks4使っていたのは大昔なのでうろ覚えです。ユーザーガイドでいうとP314ページかな(^^;
こちらの方がわかりやすいでしょうか。バージョン違うかもしれませんが。
http://caramel-tea.com/2006/05/no_hack_png/
遅くなってすみません。
何度もありがとうございます。
教えていただいたサイトを参考にやってみたのですが、
どうしても回りの白枠(フチ)が取れません…。
書き出しでpng8にし、インデックス透明カラーを選択し、
htmlファイルにbanner.pngを指定しても同じです。
pngのプレビューでは透明になっているのですが、
表示では完全に不透明です。
gifで透明にした時は本体は透明でフチが白かったのですが、
pngではその本体も不透明になってしまいました。
何が原因でしょうか?
No.3
- 回答日時:
いえ、あの、それMovable Typeというブログソフトのテンプレートに入れる方法ですから、そのまま書いてはいけません(^^;
まず、画像は透過PNGで作られましたか?(それが前提)
head終了タグの前に、
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
pngfix.jsの部分は、pngfix.jsを置いた場所へのパスです。topページ(index.html)にこのスクリプトを使うのでしたら&index.htmlと同じ階層にスクリプトをおかれたのなら、多分このままでいいと思います。
英語ですけどこのページも見て下さい。
http://homepage.ntlworld.com/bobosola/pnghowto.htm
でもってデモページ
http://homepage.ntlworld.com/bobosola/pngtestfix …
ページのソースや、画像をローカルに落としてどうなってるか参考にされるといいかもです。
え…(^_^;)
画像は透過pngで作成しました。
書き出しはgifです。
index.htmlファイルの</head>の前に
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
を書き込みました。
index.htmlと同じ場所に保存していますので、
パスは問題ないと思います。
ができません…。なぜでしょうか…。
参考サイトも翻訳しながら読んでみましたが
あまり意味も分かりませんでした。
画像は透過できているのですが、
シャドウの回りが白く縁取られています。
#1のshut0325様に教えていただいたように取れないものなんですよね…。
上記方法でもできない場合、ほかに何か方法はないでしょうか?
お手数おかけしてしまいますが、どうかお力をお貸しください。
よろしくお願いいたします。
No.2
- 回答日時:
PNGを使って、IEには透明PNGライブラリで対応するというのはどうでしょう。
「Movable Type 4 の透過 PNG ロゴを IE6 以下のブラウザで透過する」
http://www.koikikukan.com/archives/2007/08/14-01 …
ご回答ありがとうございます。
教えていただいたファイルをダウンロードし、
index.htmlのある階層に保存し、
</head>の前に以下を書き込んだのですがうまく行きません。
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="<$MTBlogURL$>pngfix.js"></script>
<![endif]-->
何か間違っているのでしょうか?
またバナー作成段階で手直しが必要と言うことでしょうか?
>「デザイン」→「テンプレートモジュール」→「ヘッダ」を選択
ここの部分がいまいち分からなかったので、
書き込み場所が違うのかもしれません…。
何度もすみませんが、もう一度教えてください。
よろしくお願いいたします。
No.1
- 回答日時:
白いフチ(フリンジ)はGIFで書き出す限りついてまわります。
GIFのマットはあるかないかのどちらかなく、「半透明」というものができません。 GIFで実現するにはシャドー部分をパターンディザなどで2値化にして半透明のように見せるか、影のエッジを半透明にしないかの処理をしなければなりません。 PNGを使えばその点は解消されますが、ブラウザによっては半透明を処理できないもの(IE6など)もありますので、状況によって使い分けてください。ご回答ありがとうございます。
>「半透明」というものができません
そうだったんですね!
いくら検索しても、書き出し方法を変えてもできなかったワケが分かりました。
>GIFで実現するにはシャドー部分をパターンディザなどで2値化にして半透明のように見せるか
ヘルプから検索しても出てこなかったのですが、
こちらはFireworksでできるのですか?
影もできれば濃い目の半透明と言う感じで、
あまり重くならないように作りたいと思っています。
何度もすみませんが、もう少しお付き合いください。
よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- その他(プログラミング・Web制作) ホームページビルダー16で画像を保存したら画像がトップページ上に沢山出てきてしまいます 1 2022/12/06 14:50
- Photoshop(フォトショップ) 【至急】 ウェブサイトやアプリとかでよく見かける、添付画像のように背景にあるものをぼかしつつ透過する 2 2023/07/17 10:57
- Illustrator(イラストレーター) Illustratorで白い部分のみを透過させたいです。 2 2022/10/10 22:27
- Photoshop(フォトショップ) Photoshopの画像が重すぎるので軽くしたいです 7 2022/05/13 20:13
- 画像編集・動画編集・音楽編集 画質を落とさず切り取って透過したいです 2 2022/06/08 12:28
- 企画・マーケティング 意味不明?な「検索広告」の意図について(素朴な疑問です) 2 2022/10/20 10:41
- その他(ソフトウェア) ペイントで切り抜いた画像の背景を透明に 2 2022/09/15 10:20
- 電子マネー・電子決済 こんにちは。ペイペイについて。 ペイペイのポイントを使うのにはどうしたら良いですか?支払い方法から「 2 2023/02/09 18:49
- Photoshop(フォトショップ) 塗りつぶした画像を透過させない方法について。上からレイヤーで塗った場合は透過できると聞きましたが、レ 1 2022/10/22 13:41
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Adobe インデザインに詳しい方...
-
画像の背景消しのeps保存について
-
pixia
-
GIFアニメを保存すると、白いふ...
-
背景を透過加工したPNG画像を色...
-
【至急】 ウェブサイトやアプリ...
-
イラストレータに配置すると透...
-
visio で画像を作成してpng形式...
-
スマホで背景透過した画像をパ...
-
フリーソフト「Pixia」で...
-
バナー用に写真の背景を透過
-
Gifのまわりに白い線ができる
-
power pointに貼り付ける画像デ...
-
透過画像を作りたいのですが(出...
-
ロゴマークだけを抜き取って貼...
-
ウェブアートデザイナーのウェ...
-
Pixiaによる透過画像(.pngファ...
-
ポジを普通のスキャナで取り込...
-
写真とgif画像の合成について
-
アルファチャンネル対応のフリ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Adobe インデザインに詳しい方...
-
ロゴマークだけを抜き取って貼...
-
gimpで文字の細工をしたい
-
イラストレータに配置すると透...
-
GIMP2で背景透過の色判定を設定...
-
アイコンの背景を透過させたい
-
背景を透過加工したPNG画像を色...
-
PNG画像を印刷すると背景がきち...
-
Gifのまわりに白い線ができる
-
GIFアニメを保存すると、白いふ...
-
透過背景画像のビットマップ形...
-
BMPファイルを透過する
-
ゆっくりムービーメーカー4で、...
-
画質を落とさず切り取って透過...
-
Access2003でpng画像の透過部分...
-
半透明なGIFの作成方法
-
画像を透過してEXCELに貼り付け...
-
PowerPointに透過画像を貼り付...
-
ピクトベアでの背景透過
-
FireAlpacaの透過、PNG保存の状...
おすすめ情報