透明バナーの作成方法

質問

HPを作成しています。
TOPページのメイン画像の上に透明のバナーを貼り、
そこにリンクを貼って別のページに飛ばす、
と言うことをしたいと思っています。
そのときバナーは透明ですが、影で浮き上がらせているようにし
何か押下できるものがあるんだ、と言う感じにしたいです。

バナーはFireworks4で作成しています。
レイヤーの透過を０に近い数字に設定し、ドロップシャドウで影をつけてます。
そこまでは良いような気がしていたのですが、
いざ書き出してみると影の周りに白く縁ができ、下にある画像となじみません。
書き出しの時にインデックス透明カラーを設定しても同じです。
このような時、何か別の方法があるのでしょうか？

ソフトはFireworksを使っていますが、photoshop・Illustratorもバージョンは古いですが持っています。
３つのいずれかのソフトでメイン画像がきれいに透けて見え、
影もけっこうはっきりついて浮いて見えるバナーの作り方を教えてください。

回答No.5

Muller3 · ベストアンサー

作り方が間違っているのか、使用されているソフトの問題なのか、お使いのブラウザの問題なのかを特定する必要があるかと思います。（ちゃんとサーバーにアップして表示を確認・F5キーを使って更新されてますよね？）

まずブラウザですが、アップしたHTMLページをFirefoxブラウザで見てみて下さい。Firefoxだったら、PNGの半透明はちゃんと反映されるはずなのです。
これでドロップシャドウがキレイに見えなかったら、作り方の問題（ソフトの問題＞古すぎる？？？）なのかもしれません。

Fireworks以外であれば、フォトショを使ってみるとか。どのバージョンをお持ちかはわかりませんが、「Web用に保存」があれば、「透明部分」にチェックを入れてPNG24で保存します。
あとは、最新バージョンの体験版を使ってみるとか。

Firefoxで半透明で表示できたら、あとはJavascriptを使ってIE6でも反映されるかどうかの確認をします。

お礼

何度もありがとうございます。
Muller3さんのおっしゃっているような確認方法と、
ブラウザもFirefoxで見ているのですが変わらずです…。

ソフトのバージョンが低いことは気になっていたので、体験版で試してみます。
photoshopはちょっと苦手ですがそちらでも確認してみます！

補足

あれから色々調べては作業してを繰り返しているのですが、なかなかうまくいきません。
まだ時間がかかりそうですので、ここで一度締め切らせていただき、お礼とさせていただきます。

それでもできなかったら再度質問させていただきますので、
そのときはまたよろしくお願い致します。

Muller3さん、shut0325さんありがとうございました。

回答No.4

Muller3

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

Muller3

いえ、あの、それ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/pngtestfixed_JS_inc_file.htm
ページのソースや、画像をローカルに落としてどうなってるか参考にされるといいかもです。

お礼

え…(^_^;)

画像は透過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

Muller3

PNGを使って、IEには透明PNGライブラリで対応するというのはどうでしょう。
「Movable Type 4 の透過 PNG ロゴを IE6 以下のブラウザで透過する」
http://www.koikikukan.com/archives/2007/08/14-015513.php

お礼

ご回答ありがとうございます。

教えていただいたファイルをダウンロードし、
index.htmlのある階層に保存し、
</head>の前に以下を書き込んだのですがうまく行きません。

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="<$MTBlogURL$>pngfix.js"></script>
<![endif]-->

何か間違っているのでしょうか？
またバナー作成段階で手直しが必要と言うことでしょうか？

>「デザイン」→「テンプレートモジュール」→「ヘッダ」を選択

ここの部分がいまいち分からなかったので、
書き込み場所が違うのかもしれません…。

何度もすみませんが、もう一度教えてください。
よろしくお願いいたします。

回答No.1

shut0325

白いフチ（フリンジ）はＧＩＦで書き出す限りついてまわります。ＧＩＦのマットはあるかないかのどちらかなく、「半透明」というものができません。　ＧＩＦで実現するにはシャドー部分をパターンディザなどで２値化にして半透明のように見せるか、影のエッジを半透明にしないかの処理をしなければなりません。　ＰＮＧを使えばその点は解消されますが、ブラウザによっては半透明を処理できないもの（ＩＥ6など）もありますので、状況によって使い分けてください。

お礼

ご回答ありがとうございます。

>「半透明」というものができません

そうだったんですね！
いくら検索しても、書き出し方法を変えてもできなかったワケが分かりました。

>ＧＩＦで実現するにはシャドー部分をパターンディザなどで２値化にして半透明のように見せるか

ヘルプから検索しても出てこなかったのですが、
こちらはFireworksでできるのですか？

影もできれば濃い目の半透明と言う感じで、
あまり重くならないように作りたいと思っています。

何度もすみませんが、もう少しお付き合いください。
よろしくお願いします。