乗算などのレイヤーモードを使ったデザインからコーディングするとき、レイヤーモードが使われている部分を透過PNGにしようとすると、そのままでは色が変わってしまう、ということがあります。現在は透過したい部分の色をスポイトでとって塗りつぶし、レイヤーモードを通常に戻し、不透明度でレイヤーモード適応時の色に近いように調整するという手段を取っていますが他に何か効率的な方法はないでしょうか。
どのソフトを使ってどのように書き出ししているか知らないけど、色が変わる事はありえないかと思われます。やり方がおかしいのでは?
乗算ほんと困りますよね。これ実装されないかなぁ・・・
こんな提案があるんですね、初めて知りました。本当に早く実装してほしいです…
すみません、色が変わるという表現はおかしかったです。画像のように、木目のパターンを敷き、#ccccccの正方形の塗りレイヤーを不透明度90%のレイヤーモード乗算で配置します。その時の透明度のまま正方形の塗りレイヤーを透過PNGに書き出したいとし、背景を非表示にして透過PNGに保存すると、ただの#ccccccの不透明度90%の透過PNGで書き出されてしまいます。木目のパターンの上であれば、もっと透けているように見えるので、その透けている感じで透過PNGにする方法があればと思っています。
演算マスクは現在のところPNGにもCSSにも実装されてないハズ。諦めるしかないかな。
ありがとうございます、現状では無理なんですね。 やはりデザインの時点でレイヤーモードを使わないでもらうか、手動でモード変更と色・不透明度を調整するしかないのでしょうか…
デザイナーに文句言うべきです
トピ主さんの悩みに心底同感です。コーディングの基礎も知らないデザイナーさんには説明しても理解してもらえず。。細かい部分で時間を取られるので本当に困りますphotoshopの効果で付けるドロップシャドウとか、デフォルトで乗算になっているのでデザイナーにしてみれば通常に直すのは手間なんでしょうが、コーディングの際にひとつひとつ確認して直して書き出しするのはやはり苦痛です
みんなの回答 4 件
どのソフトを使ってどのように書き出ししているか知らないけど、
色が変わる事はありえないかと思われます。
やり方がおかしいのでは?
乗算ほんと困りますよね。これ実装されないかなぁ・・・
CSS Blending 入門 | Adobe Developer Connection
http://www.adobe.com/jp/devnet/html5/articles/css-blending.htmlすみません、色が変わるという表現はおかしかったです。
画像のように、木目のパターンを敷き、#ccccccの正方形の塗りレイヤーを不透明度90%のレイヤーモード乗算で配置します。
その時の透明度のまま正方形の塗りレイヤーを透過PNGに書き出したいとし、背景を非表示にして透過PNGに保存すると、ただの#ccccccの不透明度90%の透過PNGで書き出されてしまいます。
木目のパターンの上であれば、もっと透けているように見えるので、その透けている感じで透過PNGにする方法があればと思っています。
デザイナーに文句言うべきです
関連するトピックス