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](http://stocker.jp/diary/photoshop-generator-svg/) を参照

## 参考:
– [PhotoshopCCで劣化しない@3x対応 – Qiita](http://qiita.com/nofrmm/items/9ff3967a38f7a45aa898)
– [Photoshop ヘルプ | レイヤーからの画像アセットの生成](http://helpx.adobe.com/jp/photoshop/using/generate-assets-layers.html)
– [使い方・活用法 – スライスより便利!画像アセット機能でWeb用にパーツを保存する | Adobe Creative Station](http://www.adobe.com/jp/jos/creativestation/howto/plusone/photoshop09.html)

コメントをどうぞ

メールアドレスが公開されることはありません。 が付いている欄は必須項目です