【Photoshop】とんでもなく便利な機能「画像アセット」

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

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

使い方

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

WordPress Popular Posts

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

WordPress Popular Posts

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

設定

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

WordPress Popular Posts

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

WordPress Popular Posts

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

書き出し

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

WordPress Popular Posts

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

WordPress Popular Posts

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

WordPress Popular Posts

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

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

拡張子

レイヤー名.gif 基本的なアルファ透明度で生成されます。
レイヤー名.png 32ビット画像で生成されます。
レイヤー名.jpg 90%の画質で生成されます。

画質

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

レイヤー名.jpg数値 1~10または1%~100%で画質を指定します。(例:hoge.jpg6、hoge.jpg60%)
レイヤー名.png数値 8、24、32のいずれかでビット数を指定します。(例:hoge.png32)

サイズ

サイズ レイヤー名.拡張子 %、px、in、cm、mmなどでサイズを指定します。
(例:200% hoge.jpg、100px x 50px hoge.jpg)

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

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

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

WordPress Popular Posts

まとめ

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

Writer

suzuki

マンガがすこぶる好きなWebデザイナーです。
基本的に休みの日は泥酔↔寝るを繰り返す偏食のスーパー不健康人間です。

Contact

ご提案依頼、ご相談、お見積もりなど
お気軽にお問合わせください。

03-6403-3259

平日 10:00~19:00

「Web制作について」とお伝え頂ければ
担当者に取次させていただきます。

Mailform

contact@trym.jp
でも受け付けております。