透過PNGにした画像は乗算や焼き込みカラーが反映されないのですよ

by sakaki0214[smart phone]
2013-03-16 10:27:31
[ページ移動: 1 2]

透過pngで書きだしたい画像に乗算やオーバーレイや焼きこみカラー...などなど、描画モードが「通常」以外のものが使われていること、ありますよね?

書きだしてから
「あれ...なんかデザインと違う...まさか...。あーやっぱり乗算だったー(泣」

っていうこと、ありますよね?(私だけですか...)

自分でちょちょいと修正できるときはいいんですけど、どう考えても無理な時とか、あまりに色々なところに乗算などを使われていると、

「次からはできればもうちょっと気をつけていただけるとありがたいです!」

と言いたい。

がしかし、なんで描画モード変更しちゃいけないの?と言われるとうまく説明できない。

できなかったので...
サンプル作っておいておくことにしました。

(描画モードが変更されているパーツを透過pngで書きだすと、描画モードは反映されないんですよ、って説明してたんですけど...そもそもこれであっているのかも不安。どういう言い回しがいいんでしょ。)

サンプルその1

<画像:ph_1-a.jpg>

【サンプルデザインその1】*1

スマホのデザインで、こんなのがあったとします。

角丸・グラデーションの背景だし、テキストだけ画像にしてあとはCSSで対応しよー

<画像:ph_1-b.jpg>

スライスして書きだして

コーディング完了。

<画像:ph_2-a.jpg>

あれ...なんか文字が太い...というかシャドウが濃い...

<画像:ph_2-b.jpg>

やはり...
(サンプルでは焼き込みカラーにしましたが、乗算になってる率が高いです。デフォルトだから仕方ない...)

このぐらいなら、ドロップシャドウの描画モードを「通常」に変更して不透明度を適当に調整すれば、まぁなんとかなります!

もしくは、背景をcssで対応するのをやめてまるっと1枚画像で書き出すとか。

サンプルページ

描画モード:焼きこみカラー/不透明度:80%
描画モード:通常/不透明度:20%

*1 【サンプルデザインその1】のテキストのドロップシャドウは「描画モード:焼きこみカラー/不透明度:80%」で作成されています

サンプルその2

<画像:ph_4.jpg>


[ページ移動: 1 2]
[*]前の記事 | [#]次の記事
TOP



Powered by MT4i 3.0.8X1
携帯アクセス解析