Zeplinで画像を書き出したら色が変わってしまった場合の対処法

こんにちは。MaromaroのChieです。

Maromaroではコーディングの際にPhotoshopからZeplinに変換してから、コーディングを行っているのですが、最近書き出した画像の色が元のデザインデータよりもくすんでいることに気づきました。

人物が入っていない画像などはわかりづらいのですが、人物が入っていると明らかに顔色が悪く、また暖色系の色も落ちているので、全体的にくすんだ印象になっているのがわかります。

原因を調べてみる

PhotoshopとZeplinのカラー設定が異なるのかなと思い、Photoshopのカラー設定を怪しんでみたのですが、特におかしなこともなく、ならばZeplinかと思い調べてみたのですが、そもそもZeplinにカラー設定の項目も見当たらず頭を悩ませていました。

もうお手上げだ〜と思っていた矢先、画像のアセット情報をよく見てみると「optimized bitmap images（最適化した画像）」と書かれた文字の下に、「~71% smaller」と記載があるではないですか。これは怪しい・・・・

OptimizAssetsとは？

「Assets」 → 「OptimizAssets」　を見てみると「PNG、JPG、svg」にチェックが入っていました。

つまり「PNG、JPG、svg」の画像を最適化することを許可しているということなので、このチェックを外して再度書き出しを行ってみたところ・・・・きれいに書き出すことに成功しました！

Photoshopのカラー設定やらプロファイルを調べていたのはなんだったんだろうかというくらい、あっさりと解決。
こちらの機能は、前まではなかった気がするのですが（私が気づいてなかっただけの可能性もありますが）、Zeplinはアップデートが多いので、どこかのタイミングで追加された機能のようです。

まとめ

アセットについてZeplinの記事があったので見たみたのですが、どうやらデフォルトで最適化のチェックが入っているようなので、書き出した画像が綺麗じゃない場合は、まずは「Assets」 → 「OptimizAssets」でチェックが入っていないか見てみてください！

以上、MaromaroのChieでした。