Photoshop CC 画像アセット(Generator)機能を使ってみた
- Switch Staff
- Staff
HTMLコーディングの際にデザインカンプからスライスをするのですが、
これが時間掛かる作業でして、どうにか短縮できないか調べていた所、
「Photoshop CCの画像アセット(Generator)機能が便利!」
みたいな記事を見つけたので早速やってみました。
1) 以下のようにテキストと長方形をグループ化して、グループ名に「menu.png」と付けます。
2) メニューの「ファイル>生成>画像アセット」にチェックを入れておきます。
3) PSDを保存するとPSDと同じフォルダー内に「PSDファイル名-assets」というフォルダーができ、
その中にボタンの画像が書き出されます。
たったこれだけです
背景レイヤーを透明にしたり、画像に名前をつける必要がないのです
もうちょっと細かい設定もできるみたいです。
ファイル形式の指定
PNG は 32bit(フルカラー+透過)、JPEG は画質 80% で書きだされるそうですが、
PNG を 8bit(256色)で書き出したい場合は「menu.png8」
JPEG を画質 60% で書き出したい場合は「menu.jpg6」
と名前を変更すれば
高解像度画像の生成
高解像度版の画像が必要な場合は、レイヤー名にカンマ( , )を入れ、倍率と高解像度版のファイル名を入れる
すると、
こんな感じで、通常画像と高解像度画像が書きだされます。
デザインカンプの作り方にもよるかもしれませんが、
使えそうな機能なので簡単にご紹介しました。
Mac使いの人は
Slicyの方が便利です