投稿日:

    カテゴリー 日常 / プライベート

    Photoshopアセット出力の罠

    Photoshopのアセット抽出機能。アプリやweb開発のデザイナさんならもう使われている方も多くいらっしゃるかと思います。便利ですよね。便利機能過ぎてつい頼ってしまいがちですが、実はいろいろとクセがあるなと気づきまして、今回実務で失敗した点を交えて、ちょっとした注意点をご紹介したいと思います。まず、アセット機能は、ご存知のようにレイヤー名、及びレイヤーセット名に.png、.jpgなど拡張子を加えるだけで自動でパーツを出力される機能ですが、pngと書けば必ずpng24で書き出されるというのは実は間違いです。透過の無いアセット、透過の無いグレーのみで作られたアセットは必ずしもpng24で出力されません(でした)。透過部分の無いアセットは実はインデックスカラーpng8で書き出されます。つまりフルカラーより減色するということです。また透過の無いグレーのみの画像はグレースケールで書き出されカラー情報が無くなりました。矩形のON、OFFスイッチ画像等作ると、共通部分の色が変わってwebやアプリ上で遷移させるとおかしなことになってしまう、というわけです。これを回避するには、レイヤー名の末尾を.png32等記入し指定します。無理矢理フルカラー情報を付加します。アセットで出力された画像のカラー情報は、念のため確認されることをおすすめします。