ドロップシャドウを透過PNGで書き出すと影の色が白くなる
- タイトルとURLをコピーする
- Tweet
ドロップシャドウ付きで透過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
- タイトルとURLをコピーする
- Tweet