AssetExpress -PhotoShopの画像書き出し-

はじめに

この記事で紹介するのはAssetExpressという、PhotoShopスクリプトの紹介です。筆者がWEB制作経験を積む中で、どうも良い書き出しツールが無かったので自作しました。PhotoshpにはGeneratorという画像書き出しの機能が追加されていますが、これはGeneratorを使わない単体のスクリプトです。なので、細かくは確認していませんが、古いバージョンのPhotoShopでも利用することが出来ます。インストールは以下からお願いします。
https://github.com/Takepepe/AssetExpress

画像スライスの時間、無駄ですよね。

過去、画像書き出し作業はとても時間と労力がかかっていました。

• 画像名を書き出しの度に考える
• 置きたい場所に、既に同じ名前の画像があった。
• 既にある画像の更新はその画像名を調べる
• 書き出した画像を該当ディレクトリに移動させる
• 簡単なスプライト画像も位置を動かして微調整
• Retina用にサイズ違いを用意する

AssetExpressを利用するメリット

• どこに・どんな名前で保存するか考えるのは、最初だけ。
• 冗長な名前をレイヤー1つずつに着けなくて済む。
• 合理的な名前が自然と決まる。（考える必要がない）
• ショートカットを併用して1発書き出し。
• 移動して欲しい場所に直に飛んでいく。
• PSDがhtmlと整合性のある作りに自然となる。
• PSDが整頓され綺麗になる。
• 無料

機能紹介

GithubのリポジトリにPhotoshop用のショートカットを用意してあるので、そのショートカットを割り当てていることを前提に解説していきます。

レイヤーグループ名で画像書き出し

.jpg .png .gif の拡張子が付いたレイヤーグループを書き出しします。グループ内レイヤーの全ピクセルがぴったり収まったサイズで書き出されます。書き出し先は、デフォルトではPSDと同ディレクトリです。以降、拡張子の付いたレイヤーグループを対象グループと呼びます。※レイヤー単体の書き出しには対応してしていません。

Retina対応書き出し

対象グループと同名の画像を@2xサフィックス付きで書き出します。元のPSDは倍の解像度で作る必要があります。ここまでは普通の書き出しツールと機能は変わりません。

親グループ名の継承

親グループの名前を参照し、プレースホルダ「^」を置き換えます。「^」がある限り祖先の名前を参照します。cssプリプロセッサのネストからアイデアを得ているので、それと相性が良いです。上手くネストすると、一つ一つのレイヤーに長い名前をつける必要がなく、名前が競合する機会が減少します。

ファイル名の継承

PSDファイル名を参照します。デフォルトのプレースホルダは「@」です。サンプル画像では親グループを継承しつつPSDファイル名を継承しています。

書き出し先の指定

名前に「/」が入っていると、ディレクトリと見なします。ディレクトリが無い場合は新たにディレクトリを生成します。相対パス「../」で上の階層に書き出すことも出来ます。

書き出し先の指定

PSDと同階層に「psd-config.json」というものを用意すると、書き出しするディレクトリを保持出来ます。"images_dir"に相対パスで指定します。その画像が、何という名前で書き出され、どこに保存されているのか、都度気にしなくても修正出来る様になります。「⌥ ⌘,」のショートカットで該当ディレクトリに「psd-config.json」が新規作成されます。

psd-config.json

{
    "*.psd":{
        "images_dir":"./img/"
    }
}

2枚仕立てのスプライト画像書き出し

ボタンのon・offスプライト画像を、それぞれ「on」「off」というグループ名で対象グループ配下に入れると、上下にくっついた状態で書き出しされます。cssメタ言語でスプライトボタンのmixinを用意しておけば、スプライトボタンを作るのは一瞬で済みます。

子階層をまとめて書き出し

スクリプトを発火させた時に選択されているグループ配下の対象グループを全てを書き出します。今のところ、同時に複数枚書き出す方法はこれのみです。孫階層は参照しません。

ドキュメントサイズで書き出し

スクリプトを発火させた時に選択されている対象グループ名で、ドキュメントサイズのまま書き出しします。子階層まとめて書き出しには対応しておらず、PSDで見えている状態をそのまま書き出します。

子フォルダ操作

スクリプト発火時に表示されるGUIに配列を渡すと、その規則に沿ってフォルダを移動させます。ルーチンワークに便利です。配列のセパレータは、スペースとカンマに対応しているので、CSSプリプロセッサで定義した配列をそのまま使うことが出来ます。

子フォルダの複製

スクリプト発火時に表示されるGUIに配列を渡すと、その規則に沿ってフォルダを複製します。ルーチンワークに便利です。配列のセパレータは、スペースとカンマに対応しているので、CSSプリプロセッサで定義した配列をそのまま使うことが出来ます。

psd-config.json

AssetExpressの設定を記述するものです。
先に述べたbase_dirの設定の他に、デフォルトでは画像Qualityや色数が指定出来る様になっています。
プレースホルダを別の記号に変えることも出来ます。設定はワイルドカードの他、psdファイル名を指定し、個別に設定を上書きすることが出来ます。jsonを以下の様に記述すると、「img.psd」は「img」ディレクトリに保存され、jpegの書き出し品質は「60」pngは24ではなく8で書き出しされます。

psd-config.json

{
    "*.psd":{
        "images_dir":"./",
        "bg_color":null,
        "resize_even":false,
        "jpg":{ "quality":80 },
        "gif":{ "colors":256 },
        "png":{ "colors":256, "PNG8":0 }
    },
    "img.psd":{
        "images_dir":"./img/",
        "bg_color":null,
        "resize_even":false,
        "jpg":{ "quality":60 },
        "gif":{ "colors":256 },
        "png":{ "colors":256, "PNG8":1 }
    }
}