【Photoshop】とんでもなく便利な機能「画像アセット」｜Blog｜株式会社トライム

いままで画像の書き出しはスライスや切り抜き機能を使用していましたが、
「画像アセット」という機能を知って震えました。

PhotoshopのバージョンCCから採用されたとのことなのですが、
これがとりあえず、便利で早い！！
今までの何倍も早く書き出しができるので、知らないと損をしますよ！
今回はそんな「画像アセット」について紹介します。

使い方

今回はサンプルとして下記のようなものを作ってみました。

レイヤーだとこんな構造です。

これをレイヤーごとに別々の画像で書き出してみたいと思います。

設定

まずは、画像アセットの機能をオンにします。
ツールバーの「ファイル」→「生成」→「画像アセット」をクリック。

オンになると「画像アセット」の文字の左にチェックマークがつきます。

生成の項目がグレーアウトになっている方は
「編集」→「環境設定」→「プラグイン」の「Generatorを有効にする」の項目にチェックを入れましょう。

書き出し

そして、ここからがホントに簡単！
下記のようにレイヤー名もしくはグループ名を「ファイル名.拡張子」という形式に変更してPSDを保存するだけ。

保存したPSDのディレクトリと同階層に「（PSD名）-assets」というディレクトリが自動的に作られます、その中にさきほど拡張子を付けたレイヤー、グループの画像が書き出されていきます。

書き出された画像はこんな感じになります。

拡張子・画質・サイズの指定

書き出しが簡単なだけでなく、レイヤー名・グループ名を変更するだけで、拡張子・画質・サイズを変更することができます。

拡張子

画質

画質は拡張子の後に追加することで変更できます。

サイズ

一つのレイヤー、グループから複数の画像を書き出す

「通常用」の画像と「Retina Display用」の2倍画像を一度に書き出すことも可能なんです！
「,」でレイヤー名を区切ることで複数の画像が書き出せます。（例：example.png,200% example@2x.png）

Retina Display用にも画像を書き出したい場合は、大きいサイズの画像をまずはスマートオブジェクト化することを忘れないようにしましょう。
レイヤーのアイコンで見分けられるので覚えておくと良いと思います。

まとめ

Web制作でPhotoshopをお使いの方でしたら、時間短縮にもなりますし、なにより結構楽しいです。
「画像アセット」。ぜひ、活用してみてください。