背景画像が透けて見えるボタンの作り方

ホームーページを作るにあたり、背景画像が透けて見えるメニューボタンを使いたく試していました。
最近よく使われているガラスボタンではなく、下の画像が本当に透けて見えるボタンです。
Fireworksで背景に使う画像をおき、その上にどのくらいの透明度が良いか調整しながら作っていました。
良さそうな感じでできたので、ボタンだけをコピーして新規作成でボタンを貼り付け、いざ書き出してDreamweaverで設定してみるとマットになっています。
周りを透明にしたいのではないのですが、書き出しの時に透明化の設定で透明を選んでみたり…
自分で分かる範囲で試したのですがどうにもうまくいきません。
画像はgif形式で保存しました。

どのような手順で、どのような形式の画像を作れば良いのか教えてください。

よろしくお願いいたします。

No.4 回答者： tsucu 回答日時： 2008/05/19 01:21

＞フィットしようとしたのですが、背景画像の大きさに

＞合わされていてボタンのサイズになりません。

切り抜くのであれば、ツールパレットの切抜きを使ってもいいと思いますが、スマートなのは対象のレイヤー以外を非表示にして
ファイルメニュー＞修正＞キャンバス＞キャンバスを切り抜き
で、サクっといけます。

もっといえば、切り抜かなくても、スライス指定して書き出し時のみ切り出すようにしてもいいと思います。

＞またキャンバスカラーは透明で、書き出しはPNG32で良いのでしょうか？

それで、問題ないと思います。

この回答へのお礼

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

先ほど教えていただいたように
・キャンバスを切り抜き
・PNG32
・キャンバスカラー透明
で書き出し、作成したボタンを指定してIE6で確認したのですがマットなままです。
どうしても半透明で下の背景が透けてくれません。
いったい何が原因なのでしょうか？

本当に何度も申し訳ありませんが、どうかご教授ください。
よろしくお願いいたします。

お礼日時：2008/05/19 02:28

No.3 回答者： tsucu 回答日時： 2008/05/16 19:51

＞キャンバスカラーも透明にし、書き出しもPNG32に

＞設定したのですができません。
＞（PNG32の場合は透明度100%じゃなくても良いのですか？）

100%透明って・・・ボタンが見えなくなりませんか？
ボタンの下に背景になる画像をひいて、透明度をちょうど良い感じに調整すれば問題有りません。書き出しの時に背景画像のレイヤーだけOFFにすれば良いだけです。

書き出されたPNGを何で表示して確かめられていますか？
先ほども書きましたが、IE6以前では透明になりませんよ。

その他のソフトでも透過PNGに対応しているものでご確認ください。一番手っ取り早いのは、書き出したPNGをFireworksで開くことだと思いますが。

この回答へのお礼

ご回答ありがとうございます。
お礼が遅くなりもうしわけありません！

＞100%透明って・・・ボタンが見えなくなりませんか？
はい。まったく見えませんでした…(-_-;)

＞ボタンの下に背景になる画像をひいて、透明度をちょうど良い感じに調整すれば問題有りません。書き出しの時に背景画像のレイヤーだけOFFにすれば良いだけです。

なるほど～！と思いさっそくやってみたのですが、背景やそのほかのテキストなどをOFFにしたところ、
ボタンの大きさ以上のキャンバスサイズであったのでフィットしようとしたのですが、
背景画像の大きさに合わされていてボタンのサイズになりません。
その場合どのような手順で行えばよいのですか？
またキャンバスカラーは透明で、書き出しはPNG32で良いのでしょうか？

書き出したものはDreamweaverで設定し、IE6で確認しています。

初歩的な質問ばかりで申し訳ありませんが、よろしくお願いいたします。

お礼日時：2008/05/19 00:08

No.2 回答者： php504 回答日時： 2008/05/16 19:18

透けて見えるというのは半透明ということですよね

それならgifでは無理でpngで作らないといけません
↓のサイトを参考に
http://www.micwire.net/hap/
IE6では対応してませんが
http://www.stylish-style.com/csstec/hi-level/a-p …
のようなテクニックもあるようです

この回答へのお礼

ご回答ありがとうございます！
そうですそうです、半透明です。
教えていただいた下のサイトがまさにそれです！

CSSも満足に理解できていないためすぐに解決とはいかいですが、
方法が分かったのでどうにかやってみます。
本当にどうもありがとうございました。

もしかしたらまた質問させていただくかもしれませんので、
もうしばらく締め切るのを延長させてください（*^_^*）

お礼日時：2008/05/16 19:44

No.1 回答者： tsucu 回答日時： 2008/05/16 19:06

透過設定したボタンだけ新規で貼り付けたということですが、新規ドキュメントでキャンバスカラーは透明にされていますか？

そして、それだけでもだめです。GIFの透過は「100%透過」か「透過しない」かのどちらかでしか設定できません。背景を透けさせるボタンということですので、透過PNGで保存しなくてはなりません。
Fireworksならば、PNG32です。

しかし、これにも問題があります。Webブラウザーによっては透過PNGに対応していないからです。代表的なものではIE6は対応していません。
特殊な方法で無理やりIE6でも透過PNG表示させる方法もありますが、一般的ではないですね。

通常は背景込みのボタンを使うことになります。

この回答へのお礼

ご回答ありがとうごいざます。
キャンバスカラーも透明にし、書き出しもPNG32に設定したのですができません。
（PNG32の場合は透明度100%じゃなくても良いのですか？）

試しにGIFで100%透明にしてみたのですが、
背景は白いところと色のついた部分とあり、白いところに載ったボタンは白っぽい水色っぽい変な色になってしまいました。

全くの透明ではなく、黒を透明度70％くらいにした色で設定したいと思っています。

たびたびで申し訳ないのですが、何か良い方法はないでしょうか？

お礼日時：2008/05/16 19:18