• ベストアンサー
  • すぐに回答を!

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

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

共感・応援の気持ちを伝えよう!

  • 回答数14
  • 閲覧数1464
  • ありがとう数22

質問者が選んだベストアンサー

  • ベストアンサー
  • 回答No.14
  • tsucu
  • ベストアンサー率62% (71/113)

私は独学ですよ。というか、仕事でやりながら覚えたという感じです。お金を出してスクールで学ぶ人も多いと思いますが、私はお金をもらいながら学びました。幸せ者ですね(^^) でも、仕事では納期やらなんやらで、細かい部分がおざなりになってしまいがちなので、自分のサイトなんかを作りながら 「どうやったらこんなことが出来るのだろう?」 「どうやったら効率よく表現できるだろう?」 なんてのが、結局は身になってきたのだと思います。 勉強!!なんて堅苦しく考えなくてもいいと思いますよ。 せっかくなんだから「なんでだろ?」「やった出来た!」って感じで楽しんじゃってください。 onyanさんも「なんでだろう」ってのを常にもってがんばってください。そうすれば、ちょっとづつでも前に進めますよ。 「まぁいっか」は無しでね(^^) それではこのへんで失礼します。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

職場で学ばれたのですね。 実はこんなにスキルがないのですが、私も似たようなことを仕事としています。恥ずかしながら。。。 それだけにできない自分に焦ってしまいジタバタもがいていました。 でもtsucuさんのおっしゃるように好奇心をもってやってみます。 そして楽しんで前進していきます(^_^) 今回は質問の回答以上の色々なものをいただいた気がします。 悩んだり迷っていたときだったので、tsucuさんのコトバは今後の大きな支えになってくれそうです。 姿形も見えないPCをかいしての繋がりだけど、とっても意味のある時間でした。 本当にどうもありがとうございました。 私の想像するお仕事であればきっと忙しいと思います。 お体に気をつけてがんばってくださいね(*^_^*)

関連するQ&A

  • 背景の透明化教えて下さい *画像の上に画像

    WEBを作る際に画像の背景をGIFで背景を透明化を選択して保存すると、周りがギザギザになってしまいます。 マットで処理できればいいんですが、その画像の下にHTMLで画像での背景があるため、Backgroundの色が指定ができないんです。 画像自体にページ背景を合わせて保存すればと思ったんですが、HTMLページ全体の背景(リピート)になってるので、画面のサイズを変えるとその背景も移動するため、画像に背景をつけて保存してもどうしようもない状態です。 なんか背景背景ばっかでこんがらがりますよね汗 要は画像1(ページ背景)の上に画像2(ロゴ)の背景を透明化させたものをWEBで表示したいんです。 PhotoShopでもFireworksでも大丈夫です。 どうかご指導よろしくお願いします。

  • DreamweaverCS4で表の背景画像

    DreamweaverCS4を使用しています。 以前は、Dreamweaver8を使用していました。 8では、表の背景に画像を表示するときに、プロパティーに 「表の背景」のところにイメージを表示できるようにフォルダ参照ボタンがあったのですが、CS4には背景にはカラー設定しかありません。 なぜでしょうか?直接HTMLのコードに下記のように書き込まなければいけなくなってしまったのでしょうか? background="画像.gif" それとも、何か設定があるのでしょうか? どなたかわかる方よろしくお願いします。

    • ベストアンサー
    • HTML
  • 画像の背景色とHTMLファイルの背景色

    私がWebページを制作している環境は下記のようになっています。 OSはWindowsXP。 モニターは液晶モニター。 DreamWeaver3でWebページを制作。 FlashMX、FireworksMXを使って、ムービーコンテンツ、画像を作成。 Fireworksで制作した画像をPhotoshop7でJPG形式に変換。(最高画質・低圧縮率で変換) 【ここからが質問です】 DreamWeaverで設定したHTMLファイルの背景色&Flashコンテンツの背景色と PhotoshopでJPGに変換した画像の背景色を 同じカラーコードにしても、 ウィンドウズのプロパティで画面の色を16ビットにすると Webブラウザ上で違った色に見えてしまいます。 (32ビットだと大丈夫) Fierworksで制作したPNG形式の画像をUPすると 色の違いが無くなるのですが JPG形式に変換した画像だとダメです。 このブラウザ上での色の見え方の違いを解決することは出来ないのでしょうか? 仕方のないことなのでしょうか? お分かりになる方、教えてくださると助かります。 よろしくお願いします。

その他の回答 (13)

  • 回答No.13
  • tsucu
  • ベストアンサー率62% (71/113)

一つ前の書き込みにしたということですよね。 これですよね? body { line-height:1.4; color:#333; font-family:Arial, sans-serif; font-size:0.7em; background:url(img/bg.jpg) repeat-x center top; } <body>タグの定義を消してしまってますので、margin: 0 padding: 0;をCSSに追加してください。下記のようになります。 body { line-height:1.4; color:#333; font-family:Arial, sans-serif; font-size:0.7em; background:url(img/bg.jpg) repeat-x center top; margin: 0; padding: 0; } これで、隙間はなくなったと思います。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

すごいです!思っていた通りにできました! 相談サイトでこんなに親切で丁寧にご回答いただいたのは初めてで、本当に嬉しいです。 なんだか感動さえ覚えてしまいました。ありがとうございます。 tsucuさんとこれで最後かと思うとなんだか名残惜しいくらいです。 最後にもうひとつだけお聞きしても良いですか? いまCSSの勉強をしているのですがなかなかはかどりません。 tsucuさんはどのように学ばれたのですか? 何か良い方法やポイントはありますか? すっかり別の質問になってしまい、こちらの趣旨と違って申し訳ないのですが、 こんなに使いこなせているtsucuさんに少しでも近づきたいな、なんて思ったので質問させていただきました。

  • 回答No.12
  • tsucu
  • ベストアンサー率62% (71/113)

やはり、そうですか・・・。いや、デザイン的に何かしらコンテンツが入るからそういう記述になってるのかと深読みしましたが・・・はずしましたか。 当然、#bgでの指定(横幅900)と #main での指定(横幅900)が同じなので、下にすっぽり入って隠れてしまいます。だから見えなくなったのでしょう。 bodyの設定だけ変える、一つ前に書いた方法ではだめでしたか? 具体的にbg.jpgとmain.jpgはどのように扱いたいのか教えてください。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

今作っているページはサイトのTOPページになるのですが、 メイン画像の上にリンクボタンがあるというシンプルなものになります。 メイン画像以外はbg.jpgで色と模様のついたものを指定して、と考えています。 メイン画像は左右に対しては真ん中ですが、上下に対しては真ん中ではなく、上付けにしたいです。 教えていただいたものでリンクボタンは透明に、そして位置も固定されたのですが、 メイン画像の上に隙間ができてしまいました。 完全にお願いしてしまって本当に申し訳ないのですが教えてください。 よろしくお願いします。

  • 回答No.11
  • tsucu
  • ベストアンサー率62% (71/113)

ちょっと追記します。 <body>タグへのバックグラウンド指定が気になりました。先ほど書いたもので、真ん中への固定は出来ますが、onyanさんの求めるデザインとは違うような気もします。 もしそうなら<body>タグへの width 指定は意味ないので、新しく<div>で囲んで背景指定してみてはどうでしょう。ついでに<body>の属性もCSSにしてしまいましょう。 body { line-height:1.4; font-family:Arial, sans-serif; font-size:0.7em; margin: 0; padding: 0; } #bg { margin-left: auto; margin-right: auto; width : 900px; color:#333; background:url(img/bg.jpg) repeat-x center top; } ■<body>部分 <body> <div id="bg"> <div id="contents"> <div id="main"> <a href="#" id="bt1"><img src="img/bt1.png" width="180" height="50" /></a> <a href="#" id="bt2"><img src="img/bt2.png" width="180" height="50" /></a> <a href="#" id="bt3"><img src="img/bt3.png" width="180" height="50" /></a> </div> </div> </div> </body>

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ご回答ありがとうございます! いま記述されているCSSのbodyを、教えていただいたbodyと#bgで記述しなおし、 HTML部分の<body></body>を記述しなおすと言うことですよね? 試してみたところbg.jpgが消えてしまい、真っ白になってしまいました。 (背景画像やボタンは残っています) なぜ消えてしまったのでしょうか…不思議です。 お手数おかけしますがよろしくお願いします!

  • 回答No.10
  • tsucu
  • ベストアンサー率62% (71/113)

どのような画像が使われているかわからないので、的確なアドバイスは難しいのですが、bodyの margin と width は必要ないのでは? margin は動作に関係ないので、残しておいてもかまいませんが。 下記の body 定義でどうでしょう?こちらの環境(IE6,Firefox)では真ん中に固定されましたよ。 body { line-height:1.4; color:#333; font-family:Arial, sans-serif; font-size:0.7em; background:url(img/bg.jpg) repeat-x center top; }

共感・感謝の気持ちを伝えよう!

  • 回答No.9
  • tsucu
  • ベストアンサー率62% (71/113)

なるほど。いろいろ方法はあると思います。 ■<head>のCSS記述部分に以下を追加してください。 古い#mainの記述(セレクタと宣言ブロック)は全て消してください。 #contents { margin-right: auto; margin-left: auto; background-image: url(img/main.jpg); background-repeat: no-repeat; width: 900px; height: 600px; } #contents #main { width: 543px; top: 350px; left: 123px; position: relative; } ■<body>のテーブル記述を全て消してください。 通常の(javascriptではない)方です。Javascriptの方は前回にならってidをclassにかえてください。 <div id="contents"> <div id="main"> <a href="#" id="bt1"><img src="img/bt1.png" width="180" height="50" /></a> <a href="#" id="bt2"><img src="img/bt2.png" width="180" height="50" /></a> <a href="#" id="bt3"><img src="img/bt3.png" width="180" height="50" /></a> </div> </div> ちょっと検証は甘いですが、これでいけると思います。 今回はCSSで<table>タグの内容も行いましたが、テーブルタグにalign="center"を追加してもいいと思います。ようは、CSSの透過PINGに必要な部分だけを残しておけば、あとはonyanさんが通常行っているHTMLのレイアウトでそのまま使えると思います。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

tsucuさん何度もありがとうございます(>_<) そしてお手をわずらわせてしまってすみません。 教えていただいたように記述したのですが、 やはりボタンがウィンドウサイズを変えるたびにあっちこっちと動いてしまいます。 現在はこのように記述しています。 [CSS] <style type="text/css"> <!-- body { margin-left: auto; margin-right: auto; width : 900px; line-height:1.4; color:#333; font-family:Arial, sans-serif; font-size:0.7em; background:url(img/bg.jpg) repeat-x center top; } img {border: 0; } #contents { margin-right: auto; margin-left: auto; background-image: url(img/main.jpg); background-repeat: no-repeat; width: 900px; height: 600px; } #contents #main { width: 543px; top: 350px; left: 123px; position: relative; } #main img { border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } #bt1,#bt2,#bt3 { float: left; cursor: pointer; } * html #main #bt1 { width:180px; height:50px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/bt1.png); } * html #main #bt1 img { display:none; } * html #main #bt2 { width:180px; height:50px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/bt2.png); } * html #main #bt3 img { display:none; } * html #main #bt3 { width:180px; height:50px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/bt3.png); } * html #main #bt2 img { display:none; } </style> [HTML] <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div id="contents"> <div id="main"> <a href="#" id="bt1"><img src="img/bt1.png" width="180" height="50" /></a> <a href="#" id="bt2"><img src="img/bt2.png" width="180" height="50" /></a> <a href="#" id="bt3"><img src="img/bt3.png" width="180" height="50" /></a> </div> </div> </body>

  • 回答No.8
  • tsucu
  • ベストアンサー率62% (71/113)

>ただ、ブラウザの大きさを変えるとボタンの位置がずれてしまいます。 これはブラウザのウィンドウ枠をドラッグして大きさを変更すると、それに伴ってボタンが動くってことでしょうか? おかしいですねぇ。onyanさんのソース記述にあった position: absolute; をそのまま使っただけなんですが。現在の設定では位置は上から 350px 左から 123px に固定されている状態です。こちらの環境でも大きさを変えてズレていくことはないですよ。 ひょっとして、ウィンドウの大きさを変更しても常に真ん中に固定したいって意味ですか? ずれるの詳細を教えてください。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

背景画像はブラウザの大きさを変更しても真ん中に固定したく、 ボタンはリンクにしたいのでpositionで指定し背景に載せていました。 …これってそもそも間違っていたということですね(・_・;) ブラウザの大きさを変更しても背景が真ん中にきて、 さらにリンクボタンは背景画像に対して上から 350px 左から 123px に設定することはできるのでしょうか??

質問者からの補足

補足欄から失礼します! ブラウザの大きさとは、ブラウザのウィンドウの大きさです。 よろしくお願いします。

  • 回答No.7
  • tsucu
  • ベストアンサー率62% (71/113)

ちょっと訂正させてください。 先ほど、<div>に<a>を使用しておりましたが、ちょっと考えたら、下記の方法がシンプルでHTMLの文法違反もなくいけそうです。 <td>内を下記に変更してください。 リンクのない画像としてお使いの場合、先ほど書いたソースの<a>タグ部分を消して使えると思います。 ■標準 <div id="main"> <a href="#" id="bt1"><img src="img/bt1.png" width="180" height="50" /></a> <a href="#" id="bt2"><img src="img/bt2.png" width="180" height="50" /></a> <a href="#" id="bt3"><img src="img/bt3.png" width="180" height="50" /></a> </div> ■Javascriptを使う方 <div id="main"> <a href="#" class="bt"><img src="img/bt1.png" width="180" height="50" /></a> <a href="#" class="bt"><img src="img/bt2.png" width="180" height="50" /></a> <a href="#" class="bt"><img src="img/bt3.png" width="180" height="50" /></a> </div>

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ありがとうございます。訂正しました! でもなぜかボタンの位置がずれてしまいます(?_?) 先ほどお礼に書かせていただいた内容とも同じ質問になってしまうのかもしれないのですが、 ブラウザの大きさを変えるとずれてしまうのはどうしてなんでしょうか?

  • 回答No.6
  • tsucu
  • ベストアンサー率62% (71/113)

IE6での表示はかなり特殊な方法になります。 この方法は指定されたボックス内の画像ををすり替えて表示させます。 具体的には<img>タグで指定している画像をCSSで見えないように設定して、IEの独自機能のFilterで画像を直接指定して描写します。 しかし、問題点としまして、IE6では<img>に定義した<a>タグが機能しなくなります。 透過PINGはちゃんと表示されても、onyanさんが行おうとしているボタンとしての機能が使えなくなるということです。 回避方法は、私の経験ではボックス自体に<a>タグを使うことなんですが、はっきり言ってHTMLの書き方としては正しくないです。主要ブラウザでは問題なく動作しますが、あまりお勧めできないです。 それを踏まえたうえで行ってください。 onyanさんの書き方に準じてCSSを適用しますと下記のようになります。 これはサイトで紹介されている方法です。透過PINGを全て記述する必要があります。 ■<head>タグ内の記述 <style type="text/css"> <!-- #main { position: absolute; top: 350px; left: 123px; width: 543px; } #main img { border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } #bt1,#bt2,#bt3 { float: left; cursor: pointer; } * html #main #bt1 { width:180px; height:50px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/bt1.png); } * html #main #bt1 img { display:none; } * html #main #bt2 { width:180px; height:50px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/bt2.png); } * html #main #bt3 img { display:none; } * html #main #bt3 { width:180px; height:50px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/bt3.png); } * html #main #bt2 img { display:none; } --> </style> ■<td>タグ内の記述 <div id="main"> <a href="#"><div id="bt1"><img src="img/bt1.png" width="180" height="50" /></div></a> <a href="#"><div id="bt2"><img src="img/bt2.png" width="180" height="50" /></div></a> <a href="#"><div id="bt3"><img src="img/bt3.png" width="180" height="50" /></div></a> </div> Javascriptを使った方法もあります。こちらはいちいち個別に定義する必要はありません。 ■<head>タグ内の記述 <style type="text/css"> <!-- #main { position: absolute; top: 350px; left: 123px; width: 543px; } #main img { border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } #main .bt { float: left; cursor: pointer; margin: 0; padding: 0; } --> </style> <!--[if IE 5.5000 | IE 6]> <style type="text/css"> .bt { filter: expression("progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.firstChild.src + ", sizingMethod=scale)"); width: expression(this.firstChild.clientWidth+"px"); height: expression(this.firstChild.clientHeight+"px"); } .bt img { visibility: expression("hidden");} </style> <![endif]--> ■<td>タグ内の記述 <div id="main"> <a href="#"><div class="bt"><img src="img/bt1.png" width="180" height="50" /></div></a> <a href="#"><div class="bt"><img src="img/bt2.png" width="180" height="50" /></div></a> <a href="#"><div class="bt"><img src="img/bt3.png" width="180" height="50" /></div></a> </div>

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ご回答ありがとうございます! 教えていただいたソースをそのままコピペしたところ 半透明のボタンができました\(^o^)/ ただ、ブラウザの大きさを変えるとボタンの位置がずれてしまいます。 今のポジションが背景の左上からカウントしているからということでしょうか? 質問と違った内容になってきて申し訳ありませんが教えていただけると本当に嬉しいです。 よろしくお願いします。

  • 回答No.5
  • tsucu
  • ベストアンサー率62% (71/113)

>で書き出し、作成したボタンを指定してIE6で確認したのですがマットなままです。 え~と、これが画像自体が透過しているが、IE6での表示で透過しないのかがわからないですね。 画像が透過していないようでしたら、ひょっとしてマットの指定を変な色にしてるのかもしれませんね。 最適化パネルを利用してPNG32を指定していると思いますが、横にマットっていうカラーボックスがありませんか?そこをクリックするとカラーリストが出てくると思います。そこで右上の赤い「/」ボタンを押して透明を選択してください。 Dreamweaver上では透過していますか?Dreamweaverのバージョンは? 先日も書きましたが、まずは書き出したPNGファイルをFireworksで開いてみてください。それで透過しているようなら画像自体に問題はないということです。 IE6では正式に透過PNGには対応していません。これはまったく見れないのではなく透明度が反映されず、要するにマットになります。 これは #2 の方が紹介されているサイトの手法を用いることで解決できます。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ご回答ありがとうございます。 教えていただいたとおりマットを透過に設定してみたところできました!嬉しいです!! ただ、できたのはFirefoxのみでIE6では以前教えていただいたサイトのやり方が必要なのですね。。。 CSSはすでに挫折気味だったのですが何とか理解してやってみようと思ったところ、試してみる前に分からない部分が出てきてしまいました。 サイトの「CSS解説」にある、 「.sampleの高さと幅を、用意したpng画像と同じサイズに固定します。つづいてフィルターを使ってpng画像を読み込みます」なのですが、 今回設定したい透明ボタンは横並びで3つなのです。 それぞれにリンクをはりたいのでひとつの画像としてではなく ばらばらに設定したいのですが、その場合続けて書いてしまってよいのですか? 今現在のソースは下記のものでtableで組んでいます。 その中に入れることもできますか? お手数おかけしますがよろしくお願いいたします。 <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table style="width:900; height:600" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0"> <tr> <td background="img/main.jpg" width="900" height="600"> <div style="position: absolute; top: 350px; left: 123px; width: 540px;"><img src="img/bt1.png" width="180" height="50" /><img src="img/bt2.png" width="180" height="50" /><img src="img/bt3.png" width="180" height="50" /></div></td> </tr> </table>

  • 回答No.4
  • tsucu
  • ベストアンサー率62% (71/113)

>フィットしようとしたのですが、背景画像の大きさに >合わされていてボタンのサイズになりません。 切り抜くのであれば、ツールパレットの切抜きを使ってもいいと思いますが、スマートなのは対象のレイヤー以外を非表示にして ファイルメニュー>修正>キャンバス>キャンバスを切り抜き で、サクっといけます。 もっといえば、切り抜かなくても、スライス指定して書き出し時のみ切り出すようにしてもいいと思います。 >またキャンバスカラーは透明で、書き出しはPNG32で良いのでしょうか? それで、問題ないと思います。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ご回答ありがとうございます。 先ほど教えていただいたように ・キャンバスを切り抜き ・PNG32 ・キャンバスカラー透明 で書き出し、作成したボタンを指定してIE6で確認したのですがマットなままです。 どうしても半透明で下の背景が透けてくれません。 いったい何が原因なのでしょうか? 本当に何度も申し訳ありませんが、どうかご教授ください。 よろしくお願いいたします。

関連するQ&A

  • macromedia fireworks8での、画像編集方法について

    macromedia fireworks8で作成した画像の背景を透過にする設定が見つかりません。 どこにあるのか教えていただきたいのですが、よろしくお願いします。 画像はボタンです。四隅の角が丸いので、htmlに貼り付けると白く見えて汚いです。gif・pngならば、背景色を透過にする設定があるのですが、最近、使い始めた、fireworksのどこをいじればいいのかわからず困ってます。

  • 背景画像が半分しか表示されない

    H.Pをdreamweaver mx 2004で作ったのですが、背景画像が半分しか表示されません。 自分のパソコン内でinternet explorer5.2に、あげると全て表示されています。 しかし、ホームページ先に転送してアップすると、背景の画像が半分しか表示されなくなります。 背景の絵が重いのかと思って、軽くしたりしてますが結果は変わりません。 背景の画像形式はgifです。 分かりにくい文章なうえ、情報も少なくて申し訳ないのですが、タグなどはイマイチ分からない為、貼付けようにもどこまでを貼付ければよいのかわかりませんでした。 原因が分かる方教えては頂けませんか?

    • ベストアンサー
    • HTML
  • PHOTOSHOPからFIREWORKSに画像をドラッグしたら背景がついてくる。

    フォトショップ上にある背景を切り抜いた画像をファイヤーワークスのドキュメントへ、ドラッグすると、背景がないはずなのに、白い背景がくっついてきて困っています。以前、同じようなことをしたときには、切り抜いた部分だけファイヤーワークスに移動できたのに、今日、同じことをしたら、白い背景が残ってしまいます。 もちろん、フォトショ上の画像の背景を透明にして、pngか透明gifで一旦保存すれば、そのファイルをファイヤーワークスで開けば背景は透明になるのですが、それだとたくさんの画像の処理に時間がかかるので、フォトショからダイレクトにファイヤーワークスのドキュメント画面上にドラッグして画像を編集したいのですが、どうやったらいいのでしょうか? 以前はうまくできたのですが…。

  • 小画像の背景を透明化したGIFを【綺麗に作る方法】

    小さい画像の背景を透明化したGIFイメージを 綺麗に作るにはどうしたらいいのでしょうか? lightboxというツールをダウンロードし、 その中に標準で用意されている画像があります。 その画像を自分好みに変えようと試みました。 その綺麗さの違いは添付しました画像 &#65374;左側が&#65374; 【lightboxの画像】 ファイル形式:GIFイメージ サイズ:63×32 容量:1.23KB &#65374;右側が&#65374; 【私が作成した画像】 ファイル形式:GIFイメージ サイズ:85×38 容量:464バイト です。 作成手順は、 イラストレーターで 63×32の四角い枠を作り、 その中にぴったり合うよう作成。 次に上記をフォトショップで透明化。 「インデックスカラー」へ変更 →  「GIF89a」へ書き出し →  透明にしたいところの色を選択 →  保存 →  完成 私の方は斜めが多いから余計に汚く見えるのかもしれませんが、 しかし、真直ぐでも差がでてしまうのは、特殊な方法があるのでしょうか。 お願いします。教えて下さい。

  • DreamweaverCS4での制作しています。バナー等の素材の書き出

    DreamweaverCS4での制作しています。バナー等の素材の書き出しなど、jpgかgifで書き出しをしていたのですが、pigでもOKでしょうか? pigの場合、不具合など出る場合は教えてください。 出来れば、Fireworksで素材など作っているのですが、Fireworksの形式のpigで書き出しも出来れば楽なのですが、どうでしょうか? よろしくお願いします。

  • png形式の背景透明化について。

    png画像で背景を透明化したいのですが、上手くいきません。 利用ソフトはFireworksMX2004を使っています。 新規作成で背景を透明にして保存すると、 Firefoxではちゃんと背景が透明化されて表示されるのですが、 IE6だと上手くいかず、透明部分が薄ーい水色で表示されます。 画像の最適化など自分なりにいじってみたのですが無理だったので質問いたします。 多分、アルファチャンネルだとか書き出しだとかを理解してないからだと思うのですが・・・。 実際にIE6で背景を透明化させて表示しているサイトを見ているので、ブラウザのせいではないと思うのです。

  • jpg画像の背景を透明にしたい

    自作DVDレーベル画像に、フリーソフトのDeepBurnerを使って、ロゴ(gif形式)を付けたいのですが、DeepBurnerではgif形式が使えず、jpgで貼り付けますと、ロゴの背景が四角く白く出てしまいます。 jpg形式で背景を透明化できないものかとフォトショップでいろいろ試してみましたが、できませんでした。 レーベル画像に、背景なしの、文字だけのロゴを付けたいのですが、どうすれば良いでしょうか?説明不足でしたらすみません!

  • 画像(写真)を徐々に表示されるようにしたい

    Fireworks MX でホームページの写真を整理しています。 トップページの写真が徐々に表示されるようにしたいのですがご指導願います。 私が行っているのは (1) メニューバーのファイルから書き出しのプレビューを選択、(2) オプションタブのファイル形式で「JPEG」を選択し、プログレッシブにチェックをいれて書き出しボタンをチェックします。 (3) 書き出しのダイアログボックスが表示されるので、ファイル名、保存先を指定して保存ボタンを押します。 この後 DreamWeaver MX で保存した画像を指定してページに挿入するのですが、 画像は一度に出てきます。 どこがいけないのでしょうか。 OSはウインドウズxpです。 よろしくお願いいたします。

  • Fireworksのボタン!!

    別カテゴリにも質問させていただいたのですが・・・ Fireworks4を使用しています。 シンボルに変換>ボタン にして アップ、オーバー、ダウン、オーバーダウン と作成、プレビューでは見れるのですが GIFに書き出ししてDreamweaverのファイルで使用、 ブラウザでチェックするとオーバーなどのイメージが変化せず アップの状態のままなのです。 書き出しの際”スライスの書き出し”も洗濯しているのですが どうすればボタンとしてアップ・オーバーの イメージが出るようになりますでしょうか。

    • 締切済み
    • CSS
  • dreamweaver☆背景画像の繰り返し

    dreamweaverMX2004で、作っております。テーブル内の背景画像の繰り返しをしたくないのですが、CSSスタイルをタグをtable、セレクタタイプをタグを選択し、新規作成をして、背景を繰り返さないにしたのですが、ページの中にある全てのテーブルに背景画像が出てしまいます。特定のテーブルだけに設定する方法はありませんか?どうぞ宜しくお願い致します。

    • ベストアンサー
    • CSS