カテゴリー
log

Photoshop CC の画像アセット

Adobe CC ようやく導入した。
これまでSlicy.app つかってたけど、画像アセットに移行しよ。

画像アセットとは

psdのレイヤーから画像書き出しするやつ、スライスいらず。

手順

1. レイヤーをグループ化

レイヤーを選択して、Command + g で書き出したい画像単位でグループ化
(単体レイヤーの場合は省略)

2. レイヤー/レイヤーグループに以下のルールで名前をつける

特に指定がない場合、PNGは32-bit(フルカラー24-bit + 透明部分)、JPEGは画質90%で、[psdファイル名]-assets ディレクトリに保存される

  • JPEG 画質40%で保存したい場合は button1.jpg4 もしくは button1.jpg40% とする
  • PNG-8bitで保存したい場合は button1.png8 のように、拡張子の後ろに数字を付ける
  • [subfolder]/Ellipse_4.jpg のようにすることでサブディレクトリ指定ができる

*高解像度版の画像も必要な場合レイヤー名にカンマ( , )を入れ、「200%」のように高解像度版の倍率と、
「button1@2x.jpg」高解像度版画像のファイル名も書いておくことで、PDFファイルを保存した際に高解像度版も出力される
ex. レイヤー名を btn.png, 200% btn@2x.png, 300% btn@3x.png

3. 生成

Photoshopで、ファイル > 生成 > 画像アセット をチェック、すると、psd更新ごと(保存しなくてよい)に画像が書き出される。

初期設定の指定

生成されたアセットに対してドキュメント全体の初期設定を指定できる。

1. 空のレイヤーをつくる

2. レイヤーの先頭に default 〜 で画像アセットの書き出し方法を定義

default [拡大率] [サブディレクトリ名]/[ファイル名の接頭詞]

3. 一度に複数書き出す場合はルールを + でつなげる

ex. default 1x/ + 200% 2x/@2x

  • [psd name]/1x/ に等倍画像を保存
  • [psd name]/2x/ に200%画像をファイル名末尾に@2xをつけて保存

無効にする

すべてのドキュメントの画像アセット生成を無効にするには

  1. 編集/環境設定/プラグインを選択します。
  2. 「Generator を有効にする」の選択を解除します。
  3. 「OK」をクリックします。

拡張

SVGファイルを書き出す

Photoshop CCの画像アセット機能でSVGを書き出す裏技 | Stocker.jp / diary を参照

参考: