投稿日:

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

    Photoshopアセット出力の罠

    Photoshopのアセット抽出機能。
    アプリやweb開発のデザイナさんならもう使われている方も
    多くいらっしゃるかと思います。便利ですよね。

    便利機能過ぎてつい頼ってしまいがちですが、
    実はいろいろとクセがあるなと気づきまして、
    今回実務で失敗した点を交えて、ちょっとした注意点をご紹介したいと思います。

    まず、アセット機能は、ご存知のようにレイヤー名、及びレイヤーセット名に
    .png、.jpgなど拡張子を加えるだけで自動でパーツを出力される機能ですが、
    pngと書けば必ずpng24で書き出されるというのは実は間違いです。

    透過の無いアセット、透過の無いグレーのみで作られたアセットは
    必ずしもpng24で出力されません(でした)。

    透過部分の無いアセットは実はインデックスカラーpng8で書き出されます。
    つまりフルカラーより減色するということです。
    また透過の無いグレーのみの画像はグレースケールで書き出され
    カラー情報が無くなりました。
    矩形のON、OFFスイッチ画像等作ると、共通部分の色が変わって
    webやアプリ上で遷移させるとおかしなことになってしまう、というわけです。

    これを回避するには、レイヤー名の末尾を.png32等記入し指定します。
    無理矢理フルカラー情報を付加します。

    アセットで出力された画像のカラー情報は、
    念のため確認されることをおすすめします。