スライス不要!画像アセット生成で効率的に画像を作成しよう

画像アセット生成とはPhotoshopの機能で、レイヤーやグループに拡張子をつけるだけでJPEGやPNG等の画像を作る機能です。この画像アセット生成をつかえば面倒なスライス作業は必要ありません。

走るとり
めちゃくちゃ簡単なので覚えておきましょう!

画像アセットを使う場面

  • 複数のアードボードを一気に画像にしたい
  • スライス作業が面倒なので効率よく画像にしたい

職場でサイズ違いのバナーを複数作るときがありますが、PSDファイルをいちいち何個もつくるのは面倒ですし、編集するときに1個ずつファイルを開いていては非効率です。

そんなときに画像アセット生成ができれば、1つのPSDファイルから複数のバナーデザインを編集し書き出すことができます。

書き出しは自動で行われるのでいちいち保存する動作は不要となります。

画像アセット生成をするための簡単な手順

1.レイヤーなどに拡張子を与える

グループ名、アートボード名にも設定することができます。

2.ファイル→生成→画像アセット生成にチェックを入れる

3.サブフォルダに画像が生成される

3ステップの簡単な操作で画像が生成されます。生成先はソースのPSDファイルと同じ場所に保存されます。

一度有効にするとドキュメントを開くたびに有効になり、画像アセット生成を解除するにはもう一度ファイルから画像アセットを選択すると解除されます。

生成できる画像拡張子一覧

生成できるファイル形式は、PNG、GIF、JPEG、SVGの4つです。
デフォルトの書き出し設定は表の通り。

PNG 32bit
GIF 透過GIF
JPEG 80%
SVG

 

サブフォルダに保存する方法

(フォルダ名)/test.jpg

上記のようにすると、生成された画像アセットをドキュメントのアセットフォルダー直下のサブフォルダーに保存できます。

デフォルトでは「PSDファイル名-assets」となっています。コーディングの際に参照するフォルダ名をあらかじめ決めておきたい場合に使うとよいでしょう。

アセットのパラメーター

.jpg(1-10) または .jpg(1-100%) のようにアセット名の末尾に追加。必要な出力画像サイズ(相対値または px、in、cm、mm などのサポートされている形式)をアセット名の最初に追加します。これに応じて Photoshop で画像が拡大・縮小されます。以下に例を挙げます。

JPEGの場合
test.jpg/test.jpg8 画質80%
test.jpg1 画質10%
test.jpg10 画質100%
test.jpg10% 画質10%
test.jpg100% 画質100%
200 x 200 test.jpg 200px x 200pxのjpgが生成される

 

PNGの場合
test.png 半透明のアルファチャンネルを持つPNG-24
test.png8 PNG-8
logo.png24 PNG-24

注意としては接頭文字とアセット名の間には必ずスペースを追加するようにしてください。

サイズを「ピクセル数」で指定する場合は、単位を省略できます。

参考:レイヤーからの画像アセットの生成

複数のアセットの生成をする

1つのレイヤーに対して複数書き出したいときには「,(カンマ)」で区切ります。

test.jpg, test.png, test.gif

これで3つの画像ファイルが出来上がります。

余白を設定する

画像アセットの生成は自動的に書き出し範囲を決定します。そこに余白を付けたい場合はレイヤーマスクを使うことで解決できます。

まとめ:簡単にできるからぜひやってみて!

以上、画像アセット生成の簡単な使い方の紹介でした。

仕事で毎日使う機能で、ほとんどのPSDファイルに画像アセット生成を設定しています。

走るとり
使いこなしてどんどん仕事を効率化していきましょう