Photoshopで加工した写真の背景を透明にしたい

いつもお世話になっています。
フォトショップで円形に切り抜いて境界線をぼかした画像を
ブログ（ＦＣ2)に掲載したいのですが、
切り抜いた部分（円の外側）が白色に掲示されてしまいます。

切り取った部分を透明にして、ブログの背景を出したい
（つまり、切り取った円の画像だけを背景に載せたい）
のですが、どのようにすればよいでしょうか？
ご存知の方、教えてください。

追伸：フォトショップを使わなくても、ブログ上のHTMLの編集でも
　　　できるようですが、ボケる範囲がどこまでになるか…など
　　　よくわかりません。もし、こちらのほうが簡単であれば、
　　　こちらの操作方法でもかまいません。よろしくお願いします。

No.1 回答者： sunbravery 回答日時： 2009/07/09 11:34

Web用に保存でGIF形式かPNGで保存します。

JPEGで保存すると背景は白になります。

本来はPhotoshopで前掲背景とも作ることができれば理想ですが。
Photoshopは立派なソフトです。
十分使いこなしましょう。

この回答への補足

おっしゃる通り、jpegで保存していました！
GIFかPNGですね！　どちらのほうがよいとか、違いはありますか？

補足日時：2009/07/09 15:49

No.2 回答者： sunbravery 回答日時： 2009/07/09 11:40

蛇足ですが、切り取った写真の背景は「マジック消しゴムツール」などで透明にしていますよね。

この回答への補足

元画像から円形に切り取った画像を、新規のキャンパスに張り付ける（または選択範囲を反転させて、円の外側を削除する）という方法でやっています。消しゴムで消すのと、結果は同じですよね？（自身ないので念のため）

フォトショップ内だと、これでレイヤーを重ねればまわりも透明になっていたのですが、今回、WEB上では同じようにできないということがわかりました。

補足日時：2009/07/09 15:50

No.3 回答者： salonpath 回答日時： 2009/07/09 12:22

こちらも蛇足ですが

IE6は（基本的に）透過pngに対応していません。

ので、IE6に境界線をぼかした画像を表示させるのは
ちょっと面倒ですが何個か方法があるので参考ページを載せておきます。
http://enjoyjob.blog116.fc2.com/blog-entry-186.h …

この回答への補足

この回答は、ちと難しくてわからなかったのですが
「IE6では対応していない」ということは、つまり、GIFで保存した画像を使った場合、
私はIE7なので上手くできた！と思っても、IE6を利用している読者の画面では背景が白くうつるということなんですね。

FC2ブログのマニュアルでも「alpha」フィルタのことが書いてありました。それを参考にやってみたのですが、
(1)うまくいかない→おそらく、タグの記述位置が間違ってるのかな？
　styl=　で、記述することになっているのですが、すでに画像の右側　に文章をかけるようにするための支持をstyl=で記述しているので、　ダブルでは指示できないのかな？

(2)フォトショップであればぼかしの幅を指定しますが、このマニュアル
　の「alpha」フィルタの説明では
　・グラデーションの形状（円か長方形か…）の指定
　・始点と終点の透明度の指定
しかないのですよね～
写真の中央からどの範囲の円にするのかとか、さっぱりわからない。
私のもってるマニュアルが簡単すぎるのでしょうかねぇ。
ご存じでしたら教えてください。

補足日時：2009/07/09 15:54

No.4 回答者： salonpath 回答日時： 2009/07/09 17:28

「IE6では対応していない」ということは、つまり、GIFで保存した画像を使った場合、

私はIE7なので上手くできた！と思っても、IE6を利用している読者の画面では背景が白くうつるということなんですね。

gifはIE6でも透明に見えますし、白くなりません。
pngの書き間違いだったら、そのとおり、そうなります
ただ透明の部分は白くはならず、なんて表現するんだろう？青と緑の中間みたいな変な色です。

目的地まではちょっと遠いスタートになりますが
Webで使うgifとpng、jpgの違い（特徴）を簡単に説明します。

■gif
使える色数は256色までなので写真などの保存形式には向きません（グラデーションが綺麗に出ないから）
その代わりに透明を使えます。

■jpg
色もたくさん使えて（1670万色くらい？）写真などに向いてます、画質を落として画像の容量をコントロールできます。
透明には出来ません

■png
jpg+gifのいい所が合わさった感じです、たくさんの色を使えて透明度の情報も保持できます。その代わりjpgよりちょっと容量が大きい。


判りますかね、gifは透明でpngは透明度です
gifは、見えているか/見えていないか、のどちらかだけですが
pngだと半分見えている（透けている）画像も作れます。


今回最初に、Hisagonさんが「円形に切り抜いて境界線をぼかした画像」とおっしゃっているので
pngの使い方を提示しました。

境界線のぼかしをしないのなら、gifで保存してそのまま使えてIE6でも透明に写りますよ。

それと、FC2ブログのマニュアルの「alpha」フィルタのページが見つけられなかったので
1と2の方は良くわかりません、すみません。

この回答への補足

丁寧な回答感謝いたします。だんだんわかってきました。

が、「Web用保存→png24」と進んでやってみたのですが、
やはり白い部分が残ってしまい透明になりません。
なんででしょう？？？　

Web用に保存のところで、
・インターレース→チェックなし
・透明部分→チェックあり

になっていますが、何か設定が間違っているのでしょうか？

度々すみませんが、もう一度　教えてください。

補足日時：2009/07/09 18:06

No.5 回答者： salonpath 回答日時： 2009/07/10 01:34

「Web用に保存」の前の段階で背景を非表示にしておく必要があるんですよ

こっちだと透過しません。

No.6 回答者： salonpath 回答日時： 2009/07/10 01:37

背景を非表示にするか、レイヤー毎削除するかして

見えない状態にしてから「Web用に保存」です

そうすれば、透明部分にチェックを入れると透明に、チェックを外すとたぶん白い背景がでると思います。

透明部分にチェックを入れて保存ですね。

この回答への補足

salonpath様　すごくわかりやすい説明、涙がでます！　ありがとうございます。

で、「背景をレイヤーごと削除→Web用に保存→PNG24（透明部分にチェック有」の順でやってみたのですが、今度は円の外側が黒になってしまいました。

むむむ～　今度こそいけると思ったのですが、
思い当たる手順もれありますか？

補足日時：2009/07/10 09:09

No.7 回答者： amanda97 回答日時： 2009/07/10 01:59

透明にできるのはＰＳＤ（Photoshop形式）とPNG形式とGIF形式になります。

Web（ブラウザ）で表示できるのはGIFもしくはPNG形式となります。


なおPNG24形式の場合は対応するブラウザでしか透明状態にはなりません。

ＧＩＦはＩＥ６以前（ＩＥ３でも）透明で表示されます、またＰＮＧ８とかも透明になります

標準の設定ＩＥ６では透明になりませんので、サイトを構築する時にhtmlのタグを設定して透明になるようにしなければいけません。

ＩＥ７以降でしたら、特別なタグを組む事無く透明になります。

No.8 回答者： salonpath 回答日時： 2009/07/10 16:06

円の外側が黒ですか？

ん～画像が見れたらすぐわかりそうですけど、その説明だけだとわかりませんねぇ。
たとえば、外側とはどこまででしょうか？
円の周りだけ？png画像全体？
黒くなりかたは？
塗りつぶし？グラデーション？
薄い線？太い線？
円にドロップシャドウやレイヤー効果が付いているか？
htmlで開いたとしたら、background-colorが黒になっていないか？とか
具体的にどのような状態がわからないのでなんともいえないです。

手順で間違うようなトコロはとくにないと思いますが、
練習で背景が透明のただの円をpngで書き出してみたりするといいかもしれないですね。
以下の手順で試しにpngを書き出して確認してみてもらえますか
1：新規でファイルを作成
2：背景を#000fff（青）で塗りつぶしてから非表示
3：新規レイヤー作成（レイヤー1）
4：レイヤー1に#ff0000（赤）の色で適当に円を書く
5：Web用に書き出し（png24、透明部分にチェック）

確認
1：書き出したpngをphotoshopで開く
#6に添付した画像のような背景なら成功です。
2：書き出したpngをIE7で開く
白背景に赤い円が表示されたら成功です。

どうなりますか？

この回答への補足

salonpath様　丁寧に教えていただいて、本当にありがとうございます。

おっしゃるとおりにやってみました。
確認１）こちらは成功です。
　　　　バックに格子模様のキャンパスが見える状態です。
確認２）IE7で開くとは、ブログに貼り付けて見るということで
　　　　よいでしょうか？　これは、やはり周りが黒くなります。
　　　　キャンパスに当たる部分が真っ黒にベタ塗りになっている
　　　　見え方です。（黒い四角の紙に赤い○を貼った状態）

　　　　フォトショップで画像を作るときに、ブログにアップした
　　　　時の大きさがわからないため（サイズ設定がわからない）
　　　　適当な大きさで作ってから、FＣ２の機能で、画像を丁度
　　　　よい大きさに縮小してからアップしています。

　　　　これがよくないのかな…
　　　　（ピクセルの概念がよくわからなくて、新規キャンパスの
　　　　　サイズのピクセルをあわせて作ればよいだけ？）

　　　　こんなに親身に教えていただいているのに、
　　　　透明バックが作れないなんて、悔しいです～！！！　
　　　　大きさに縮小してから
　　　　アップしているのですが、

補足日時：2009/07/10 18:47

No.9 回答者： salonpath 回答日時： 2009/07/10 20:43

FC2ブログ作ってみました。

FC2ブログで画像をアップロードするときに
設定｜サムネイル：同時に作成する(jpg、gif、png) 横幅:□ 縦幅□
のところにチェックを入れてサムネイルを作成すると
png24がpng8に変換されて黒くなっちゃうみたいですね。

結局、黒くなるのはFC2ブログが作ったサムネイル画像だけですね。
記事中の黒くなったサムネイル画像をクリックした後の元の画像は透明のままでした
けど、ポップアップウィンドウで開いてしまうので透過pngにした必要もなくなってしまいます。

背景を透けてみせるには、画像をアップロードするときに
サムネイルの同時に作成するのチェックを外しておく（サムネイルを作らない）と大丈夫だと思います。

この回答への補足

salonpath様　度々、ありがとうございます。
サムネイルのチェックをはずしてやってみたのですが
やはりバックが黒になります（涙）。

ですが、どうもＦＣ2に原因があるように思えて、
フォトショップで最初から画像を小さく作ってやってみました。
（今まではＦＣ２の画像縮小機能を使っていました）
すると、ぼかした部分が不完全ですが透明？な感じになりました。
以下、よかったら見てみてください。右上の服をきたかえるです。

http://berandabararose.blog66.fc2.com/

フォトショップ上では、きれいにぼけて（境界線をぼかす→100）
透けていたのですが、ブログ上では元画像の線が残って見えます。
でも、今までで一番ましかな…

何か、これを見て　さらに思いつかれることがあれば教えてください。
（もし、最終的にうまくいかなくても、とても勉強になりました。
　ありがとうございます）

補足日時：2009/07/10 21:50

No.10 回答者： salonpath 回答日時： 2009/07/10 20:48

photoshopで透過してたから問題ないと思いますが

確認方法2：書き出したpngをIE7で開く
のやり方は
IE7に先ほどのpngをドラッグ＆ドロップしてみてください。
ブラウザで画像が表示されると思います。
それの背景が白なら成功で
（さっき試しに作ったファイルなら）#000fff（青）だったら失敗ですね。

たぶんもう透過pngの作り方は問題ないと思いますよ。