web用の画像で背景を透過する方法！
新潟スイーツ・ナカシマ本日は久しぶりにフォトショップの使い方を投稿してみたいと思います^^
今日はwebにアップする画像の背景画像の消し方です^0^
なんでこんな記事を投稿しようと思ったかといいますと、いつもブログに来て下さるたぬき先生のブログでどうやって消したらいいかとおっしゃられていましたので作成方法を書いてみることにしました♪
まずはたぬき先生のブログでは「薔薇の写真 フレームに入れて 周囲を透明にしたいんですが」とありましたので同じように作って見たいと思います^^
ただ残念ながら薔薇の花の写真がなかったので昨日御紹介させていただいた絵手紙を使ってみました（笑）
まずはフォトショップで額縁などの画像を作っておいて、その背景は白とグレーの升目（透過している部分）を見えるようにしておきます^^
額縁などの画像のレイヤーにチェックを入れておいて背景のチェックを抜いておけばたぶんOKでしょう^-^
ここまでできたら次はこの画像を保存します♪
背景を透過にしたままメニューの【ファイル】から【web用に保存】を選択します＾＾
今回の最大のポイントはココだと思うのですがwebでは画像形式の選択で背景が透過されるか否かが決まります^-^
画像形式は色々あるのですが透過できて一般的に使われるのはGIF形式、もしくはPNG形式だと思います♪
ただGIFでは写真の場合粗くなりPNGはIE6が確かスクリプトをいれないと背景が透過されなかった気がします^^;
ともあれ先ほどの【web用に保存】をクリックすると画像形式を選択するダイアログが右上辺りにあらわれると思います！
この画面でGIF、もしくはPNGの形式を選択すればいいと思います^-^
ちなみに両方とも【透明部分】にチェックを入れるのを忘れないようにしてください♪
それではこれで保存してみた画像を私のブログでもアップしてみようと思います♪
まずはGIFから^^
次はPNGで^-^
こんな感じで表示されます^^
私のブログは背景色が白なのでわかりにくいのですが画像をマウスオーバーしてもらうと背景色が出るので画像の上にマウスを置いてもらって確認していただけたらと思います^-^
GIFの方はやはり画像も粗く、ドロップシャドウをかけているのでシャドウの淡い部分が白く見えますね^^;
PNGはきれいですがIE6を考えるとスクリプト無しで使用するのは気がひけます@-@
どちらも一長一短なのですが…^-^;
とりあえず画像の背景を透過できる方法を書いてみたのですが…たぬき先生、いかがでしょう！？*^-^*
まあ～涙が出るほどうれしいです。
なんて ナカシマさんやさしいの～～！！
昼休みにやってみたいと思いますが・・・・
もし できたらＵＰしますね（＾＾）
どうして 若い方はこんなに 柔軟にソフトを扱えるの
でしょうか？そうよね～うちの長男と一緒だもんね。
ほんとうに ありがとうございますｍ（＿＿）ｍ
こんにちは！
ナカシマさんのパソコン講座♪いつも分かりやすいご説明ありがとうございます＾ワ＾ｖ
GIFもPNGもいいところもあれば悪いところもありますよね。ドロップシャドウはレイヤースタイルから付けられたのでしょうか？？？私も透過を知るまでは試行錯誤してました＞＜；
ナカシマさん
再度のコメント本当にありがとう！
できました～～ぜひ 見に来てください。
ほんと やさしい≪わが息子≫のようです。
うちの息子（２８歳２５歳２２歳男子３人）は
全然やさしくないよ！！！困
こんばんは。
さすがナカシマさん、お詳しい＆分かりやすいです^^
『WEB用に保存』でjpg以外も選べたんですね！
はじめて知りました^^汗
今確認してみました。ありがとうございます☆
私は、今は、フォトショップエレメンツ８を使っているので、同じものを作るにしても、多分、やり方が違うのではと思います。今月発売のWORD2010やパワポ2010を使うと、より一層凝った物が作れるようになるのかな？
こんばんは
やりますねえ
おはようございます
ナカシマさんのフォトショップ講座
いつも有難う御座います
今日の内容も流石です！！
多くの勉強をさせて頂いております
新潟スィーツ･ナカシマさん
おはようございます。
ナカシマさんの書いてあることが理解出来るようになるまでは相当な時間がかかりそうです^^;
色んなテクニックがあるんですねぇ・・・！！
色々と勉強しなくちゃ^^;
おはようございます。
＞GIF、もしくはPNG
どちらも使ったことのない保存形式です。
それで透過写真をアップできるんですね(^^)
レイヤーパレット上の
背景アイコンをWクリックすると
背景がそのままレイヤーになってくれます。