ドロップシャドウを透過PNGで書き出すと影の色が白くなる

ドロップシャドウ付きで透過PNGで書き出してみたら、
なぜか影がPhotoshopで見るときよりも白くなっていて。
そんな時、対処した方法です。

PSD上での比較

PSDだと気づきずらいんです。
見てみるとこんな感じ。

※わかりやすいように、影を大きくとってます。

だいたい同じくらいになるようにしてますが、
(むしろちょっと#555555の方が黒く感じるほどですね)
コレを透過PNGでスライスしてアップすると。。

ページ上での比較

どうでしょう?
白いですねーw

対処方法

PSDでは同じように見えるように透過具合で調整してます。
ですが書き出してみると、白が入っている分だけ、#555のほうは白い。

なので、Webで使う場合は特に、
ドロップシャドウを設定する際に、
#000にしたままで濃さなどを調節する方が良いってことですねー。

影が白くなって焦った方の助けになれば幸いです。

ちなみにCSS3でやった場合

css3でやっても同じで、
影が白くなりました。

-moz-box-shadow: 5px 5px 10px #000; /* Firefox用 */  
-webkit-box-shadow: 5px 5px 10px #000; /* Safari,Google Chrome用 */  
-moz-box-shadow: 5px 5px 10px #555; /* Firefox用 */  
-webkit-box-shadow: 5px 5px 10px #555; /* Safari,Google Chrome用 */  

css3
#000000

css3
#555555

この記事に関連する記事

コメントをどうぞ