お取り寄せランキング
店長おすすめ商品
新潟スイーツ・ナカシマでは、お客様のセキュリティー保護の観点から、個人情報の入力が必要なページで高度な暗号化通信を導入しています。
2010年06月08日投稿
web用の画像で背景を透過する方法！
本日は久しぶりにフォトショップの使い方を投稿してみたいと思います^^
今日はwebにアップする画像の背景画像の消し方です^0^
なんでこんな記事を投稿しようと思ったかといいますと、いつもブログに来て下さるたぬき先生のブログでどうやって消したらいいかとおっしゃられていましたので作成方法を書いてみることにしました♪
まずはたぬき先生のブログでは「薔薇の写真 フレームに入れて 周囲を透明にしたいんですが」とありましたので同じように作って見たいと思います^^
ただ残念ながら薔薇の花の写真がなかったので昨日御紹介させていただいた絵手紙を使ってみました（笑）
まずはフォトショップで額縁などの画像を作っておいて、その背景は白とグレーの升目（透過している部分）を見えるようにしておきます^^
額縁などの画像のレイヤーにチェックを入れておいて背景のチェックを抜いておけばたぶんOKでしょう^-^
ここまでできたら次はこの画像を保存します♪
背景を透過にしたままメニューの【ファイル】から【web用に保存】を選択します＾＾
今回の最大のポイントはココだと思うのですがwebでは画像形式の選択で背景が透過されるか否かが決まります^-^
画像形式は色々あるのですが透過できて一般的に使われるのはGIF形式、もしくはPNG形式だと思います♪
ただGIFでは写真の場合粗くなりPNGはIE6が確かスクリプトをいれないと背景が透過されなかった気がします^^;
ともあれ先ほどの【web用に保存】をクリックすると画像形式を選択するダイアログが右上辺りにあらわれると思います！
この画面でGIF、もしくはPNGの形式を選択すればいいと思います^-^
ちなみに両方とも【透明部分】にチェックを入れるのを忘れないようにしてください♪
それではこれで保存してみた画像を私のブログでもアップしてみようと思います♪
まずはGIFから^^
次はPNGで^-^
こんな感じで表示されます^^
私のブログは背景色が白なのでわかりにくいのですが画像をマウスオーバーしてもらうと背景色が出るので画像の上にマウスを置いてもらって確認していただけたらと思います^-^
GIFの方はやはり画像も粗く、ドロップシャドウをかけているのでシャドウの淡い部分が白く見えますね^^;
PNGはきれいですがIE6を考えるとスクリプト無しで使用するのは気がひけます@-@
どちらも一長一短なのですが…^-^;
とりあえず画像の背景を透過できる方法を書いてみたのですが…たぬき先生、いかがでしょう！？*^-^*
http://www.okasi-nakasima.com/blog-nakashima/digital-days/6718.html/trackback/
現在のカートの中
商品カテゴリー
安心の御利用ガイド
モバイルサイトのQRコード
http://www.okasi-nakasima.com/
FOOD ACTION NIPPON（フードアクションニッポン）
新潟スイーツ・ナカシマでは日本の食を次世代に残し、作るために食料自給率向上に向けて運動するFOOD ACTION NIPPONを応援いたします。
まあ～涙が出るほどうれしいです。
なんて ナカシマさんやさしいの～～！！
昼休みにやってみたいと思いますが・・・・
もし できたらＵＰしますね（＾＾）
どうして 若い方はこんなに 柔軟にソフトを扱えるの
でしょうか？そうよね～うちの長男と一緒だもんね。
ほんとうに ありがとうございますｍ（＿＿）ｍ
たぬちゃんより投稿日時：2010年06月8日 11:10 AM
こんにちは！
ナカシマさんのパソコン講座♪いつも分かりやすいご説明ありがとうございます＾ワ＾ｖ
GIFもPNGもいいところもあれば悪いところもありますよね。ドロップシャドウはレイヤースタイルから付けられたのでしょうか？？？私も透過を知るまでは試行錯誤してました＞＜；
モルタル・マジックより投稿日時：2010年06月8日 11:21 AM
ナカシマさん
再度のコメント本当にありがとう！
できました～～ぜひ 見に来てください。
ほんと やさしい≪わが息子≫のようです。
うちの息子（２８歳２５歳２２歳男子３人）は
全然やさしくないよ！！！困
たぬちゃんより投稿日時：2010年06月8日 2:12 PM
こんばんは。
さすがナカシマさん、お詳しい＆分かりやすいです^^
『WEB用に保存』でjpg以外も選べたんですね！
はじめて知りました^^汗
今確認してみました。ありがとうございます☆
誕生日プレゼント工場より投稿日時：2010年06月8日 6:39 PM
私は、今は、フォトショップエレメンツ８を使っているので、同じものを作るにしても、多分、やり方が違うのではと思います。今月発売のWORD2010やパワポ2010を使うと、より一層凝った物が作れるようになるのかな？
Y's工房より投稿日時：2010年06月8日 7:58 PM
こんばんは
やりますねえ
伯爵より投稿日時：2010年06月9日 12:52 AM
おはようございます
ナカシマさんのフォトショップ講座
いつも有難う御座います
今日の内容も流石です！！
多くの勉強をさせて頂いております
吉野聡建築設計室より投稿日時：2010年06月9日 5:09 AM
新潟スィーツ･ナカシマさん
おはようございます。
ナカシマさんの書いてあることが理解出来るようになるまでは相当な時間がかかりそうです^^;
色んなテクニックがあるんですねぇ・・・！！
色々と勉強しなくちゃ^^;
溶射屋より投稿日時：2010年06月9日 7:37 AM
おはようございます。
＞GIF、もしくはPNG
どちらも使ったことのない保存形式です。
それで透過写真をアップできるんですね(^^)
レイヤーパレット上の
背景アイコンをWクリックすると
背景がそのままレイヤーになってくれます。
TWINSより投稿日時：2010年06月9日 8:14 AM