• ベストアンサー

gifのボタンの周囲を透明にしたい

gifでボタンやイラストを作成し、HTMLLのテキストにはめ込むと、そのgifの絵は表示するのですが、周囲も表示され違和感があります。 (例えば、○のボタンを作成すると、その4隅の部分がブラウザの背景色とならずにgifのボタンの背景色となる) POWER POINTかPHOTOSHOPかPAINTを使って、このgifの背景色を透明にして、ブラウザの背景色となるようにできませんか? それとも別のソフトが必要ですか? 分かる方がおられたら教えてください。

  • HTML
  • 回答数4
  • ありがとう数4

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

  • ベストアンサー
  • chanpu
  • ベストアンサー率42% (61/144)
回答No.3

こんにちは。 ペイントでgifを扱えるのならOffice2000がインストールされていると思いますので、Officeツールの『Microsoft Photo Editor』を使った簡単なやり方も出来ると思います。 『プログラム』→『Microsoft Office ツール』→『Microsoft Photo Editor』を起動して、そこに透過処理したいgifファイルを開きます。 上部にメニューアイコンがあると思いますが、右端の画像サイズのパーセンテージを表示するボックスの左がわに、3つアイコンが並んでいると思います。 その真ん中の青いペンのようなアイコン(マウスカーソルを合わせると『透過色に変更』という説明ポップアップが出ます)をクリックしたあと、gif画像の透明にしたい場所をクリックすればOKです。 ただしその場所と同じ色を他にも使っていると、そこまで透明になってしまいます。 予め、絵に使っていない色で透明にしたい場所を塗りつぶしておきましょう♪ ……でもせっかくPhotoshopという素晴らしいソフトをお持ちなのなら、そちらでのやり方をマスターされたほうが、良いかな~~っとは思います(汗/笑)。

greenhope
質問者

お礼

さっそくのアドバイスの通り行ってみました。確かに極めて簡単に透明になりました。たいへんありがとうございました。

その他の回答 (3)

  • kenkenkent
  • ベストアンサー率30% (565/1854)
回答No.4

私のところでは未だにPhotoshop5.0なので、 Mac版の5.0で説明しますが、まず、GIFにするところ まではできているんですよね? そうしましたらまず、四隅の透明にしたい部分を、 ボタンなど、必要な部分で使っていない色にします (ボタンに白を使っていなければ白でも可)。 次に、『ファイル』>『別名で保存』でGIFにする・・・ のではなくて、『ファイル』>『データ書き出し』> 『GIF89a書き出し』にしてやります。 すると、さらにいくつかの設定項目が出て来ますので、 そこから『透明』と言うのをチェックしてやります。 すると、任意の1色を透明として扱う、選択ができる 様になりますので、四隅に使った色を選択してやります。 これでオッケーです。もし、間違ってボタンに使って いる色を四隅に使ってしまうと、ボタンの中のその色 の部分も、一緒に透明になってしまいます。

greenhope
質問者

お礼

さっそくのアドバイスありがとうございます。Photoshopにそのような便利な機能があるのですね。活用させていただきます。

  • eub55
  • ベストアンサー率39% (58/147)
回答No.2

photoshopはいくつのバージョンを使っていますか? 5.5ならば、自分がやっている方法を紹介します。 1)新規作成で、背景色をなしにしてキャンバスをだします。 2)絵を書きます。 3)ファイル(F)→Web用に保存→自分の希望のサイズになるように減色したり。 ってカンジでしょうか。 よかったら試してみてください。

greenhope
質問者

お礼

さっそくのアドバイスありがとうございます。Photoshopにそのような便利な機能があるのですね。活用させていただきます。

  • sesame
  • ベストアンサー率49% (1127/2292)
回答No.1

Photoshopを使った方法を紹介します。 1.レイヤーを作り、そこに絵を描く。 2.背景を不可視に。 3.ファイル(F)→データ書き出し(R)→GIF89a書き出し

関連するQ&A

  • GIFやBTPファイルでボタンを作りたいのですが。

    GIFやBTPファイルでボタンを作りたいのですが。 XP,2007ユーザーです。HPのソースをタグを手書きで書いております。いわゆる「ボタン」が描けないので、表の<td>~</td>の間にいろいろ記入して何とか済ませておりますが、どうも見栄えが悪いので、他のHPのソースを覗いたら、GIFやBTPなどがJPGファイルと同じような使い方で出ておりました。  btpは、WORDで描いたものをPRINT SCREEN でPAINTに載せて、名前を付けて保存しておりますが、トリミングがうまくできないのでMICROSOFT PICTURE MANAGER で画像処理しております。 ところが、特に円や隅切りの長方形などでは余白が映ってしまいしまして、どうも細かいボタンの作成には適していないようです。 というわけで、手際良くGIFボタンを作る方法を教えてください。宜しくお願いします。

  • Photoshopで画像をgif保存すると崩れる

    背景を透過させ、文字のみの画像をPhotoshop7.0で作成し gifで保存したものを、 ブラウザで確認すると文字がかなり崩れて表示されてしまいます。 何かの設定が悪いのでしょうか? 分かる方いらっしゃったら教えてください。 jpgではそんなことないのですが、 透過ができないので意味がありません。

  • gif ってぼかしは効かないのでしたっけ?

    Photoshop でロゴを作成しようとしています。 ページの背景にパターンを使用しているため、ロゴの背景を透明にしてページ背景のパターンが見えるようにしたいのです。 ロゴは、gif で作ろうとしています。 Photoshop のテキストでロゴを入力し、ラスタライズし、gif で保存するためインデックスカラーに変換します。 すると、ロゴの輪郭がカクカクしてしまって、うまくぼやけてくれません。 gif は、輪郭のぼかしは出来ないのでしたっけ? 別のソフトでは、出来たような気がするのですが、Photoshop での 透過gif の作り方を教えてください。

    • ベストアンサー
    • CSS
  • GIFをブラウザで表示すると劣化する

    Webサイトを作成するにあたりGIF画像を使用したいのですが、作成したGIFをブラウザ上で表示すると劣化してしまいます。 私がPhotoshopでWebサイト用の素材を作成し、GIFで保存した物をフォルダでひとまとめにし、これをZIP形式で圧縮、Web製作会社にメールで送っています。送る前のGIFはPhotoshopやIE6等のブラウザで開いても綺麗に表示されるのですが、Web製作会社が作成したWebサイト上で表示すると、明らかに送る前の状態より劣化しているのです。 劣化の状態というのは、例えば左から右になめらかなグラデーションをかけた画像だとすると、これが4色ぐらいの荒いグラデーションになってしまうというものです。 この件についてWeb製作会社に原因の調査をお願いしましたが、本日に至るまで原因が分かっていません。アドバイスをいただければ幸いです。

    • 締切済み
    • CSS
  • Photoshop Elements3でgif形式の画像の加工も保存も出来なくなってしまいました。。

    Photoshop Elements3を、Macで使っています。 初心者です。 何日かぶりに、Photoshopを使って、背景が透明の画像を作ろうとしましたら、 「web用に保存」が選べなくなっている(字が薄くなっている)し、 「別名で保存」を選択して、次にファイル形式を選ぶ選択肢の中から、 「gif形式」がきれいさっぱり無くなっていました。 (たしかもともと選べるものですよね) また、photoshopで前に作って保存してあったgif画像も、photoshop上で開けなくなっています。 (photoshopの「ファイルブラウザ」にgif画像のデータが表示されないのです。) (「ファイルを開く」からむりやり開こうとしたら、「要求された操作を完了出来ません。有効なPhotoshopドキュメントではありません」とメッセージが出て開けません。) 一体どうしちゃったのでしょうか、、 何か変なところをいじってしまったのでしょうか。 色々なところで調べてみましたが分かりません。 分かる方いらっしゃいましたら、教えてください。 よろしくお願いします。

  • Photoshop Elements 2.0でボタンを作りました。

    Photoshop Elements 2.0のシェイプを使って 丸を作り、それにスタイルのプラスチックを使って 透明なボタンを作りました。今度はそれをWebページ の背景を透かして表示させたいのですが、 影などが邪魔をして白い部分が出来てしまい どしても綺麗に背景を透かす事が出来ません。 透明化は70%掛けてあるのですが、どうやったら 良いのでしょうか?僕のはWin XPです。

  • power pointにイラストを抜き出して貼り付けるには

    power pointでスライドを作成しているのですが、イラストを貼り付ける時に背景を透明にして貼り付けたいのですがよい方法はないでしょうか。通常のイラストの挿入だけでは背景が白く残ってしまいます。photo shopで画像のみをコピーして貼り付けてもうまくいきません。 どなたか教えていただけないでしょうか。

  • GIFアニメーターとパワーポイント

    パワーポイントで、結婚式用のスライドを作成しようと思っています。主に、写真や画像を取り込んで作成するのですが、それがない場面では、イラストやアニメーションを取り入れたいと考えています。FLASHは高額なので、GIFアニメーターを購入したのですが、パワーポイントに取り込むにはどうしたらいいのでしょうか。GIFアニメーターのマニュアル等は、店頭で販売してますでしょうか。また、GIFアニメーターを作成する上で、気をつける点等があれば教えてください。お願いします.

  • gif画像でたまに背景がグレーになってしまいます。

    はじめまして。 現在、ホームページの画像を作成しています。 photoshopで作成しているのですが、「web用に保存」でgifでしたところ、背景に色がついてしまうときがあります。 ちなみに、背景に色がついてしまうときはかなり小さい範囲の背景を残した時です。 たとえば、四角の枠に画面いっぱいの角丸長方形を作成したときの角の部分などです・・・ これはphotoshop側の問題なのでしょうか? それともWEB表示上の問題なのでしょうか? また、1px単位の境界線を引いた時もカーブがかかっているとかなりギザギザに表示されるときとされないときがあります。 同じレイヤースタイルのものを文字だけ変えて画像にしたときなどにも起こるのですが、これも原因不明で困っています。 どなたか原因と解決方法に心当たりのあるかたはどうかよろしくお願致します。

  • gifはダメなの?

    仕事でホームページを作成しています(Webデザイナーではありません)。 私はPhotoshopで画像などを作成し、HTMLを書くのは業者に依頼してます。 その際、写真はJpegで、文字の書かれているボタンなどはGifに変換しています。Gifにする理由は、Jpegだと文字がボケた感じになるからです。 ところが、業者はGifで送ったものを勝手にJpegにしてしまいます。やはり、文字がボケた感じになってしまい、できればGifのままにしてほしいのですが…。 わざわざJpegに変換するのも手間だと思われるのですが、Gifを使ってくれない理由としては、どういったことが考えられるのでしょうか…。

専門家に質問してみよう