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で質問しましょう!
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
GIFアニメを保存すると、白いふ...
-
ロゴマークだけを抜き取って貼...
-
透過背景画像のビットマップ形...
-
背景を透過加工したPNG画像を色...
-
FireAlpacaの透過、PNG保存の状...
-
アイコンの背景を透過させたい
-
半透明なGIFの作成方法
-
Paint Shop Proで背景を透過さ...
-
Photoshopで加工した写真の背景...
-
gimpで文字の細工をしたい
-
背景を透明にしてGIFで保存
-
Adobe インデザインに詳しい方...
-
Photoshopで、背景色と色が混じ...
-
画像の加工:方眼紙のような画...
-
画像の透過処理のやり方
-
フレーム/透過の際のギザギザを...
-
フォトショップエレメンツで画...
-
aviファイルの背景の透過
-
Access2003でpng画像の透過部分...
-
印鑑透過方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ロゴマークだけを抜き取って貼...
-
透過背景画像のビットマップ形...
-
GIFアニメを保存すると、白いふ...
-
BMPファイルを透過する
-
Gifのまわりに白い線ができる
-
画質を落とさず切り取って透過...
-
イラストレータに配置すると透...
-
アイコンの背景を透過させたい
-
Adobe インデザインに詳しい方...
-
背景を透過加工したPNG画像を色...
-
ゆっくりムービーメーカー4で、...
-
PNG画像を印刷すると背景がきち...
-
Access2003でpng画像の透過部分...
-
gimpで文字の細工をしたい
-
visio で画像を作成してpng形式...
-
フォトショップデータからキレ...
-
Pixiaによる透過画像(.pngファ...
-
AviUtlで指定した場所を透過したい
-
半透明なGIFの作成方法
-
スマホで背景透過した画像をパ...
おすすめ情報