Photoshopの「画像アセット生成」を活用しよう

Photoshopで画像の書き出しを行う際、どんな方法を使っていますか？
この記事では画像アセット生成をプラグインで簡単に行う方法をご紹介します。

画像アセット生成とは？

画像アセット生成とは、書き出したい画像のレイヤーやレイヤーグループの名前の最後に拡張子を記述しておくと1クリックで自動的に書き出しを行ってくれる便利な機能です。
スライス作業が不要で、重なり合う部分のある画像もレイヤーが異なればそれぞれ書き出すことが可能です。

画像アセットの有効化

まずは画像アセット機能の有効化をしましょう。
簡単です。

メニューバーから「ファイル」→「生成」→「画像アセット」
こちらにチェックを入れましょう。

あとは保存する度に書き出しが行われます。

もしうまく書き出されていなければ画像アセットのチェックを外したり入れたりを試してみてください。

画像アセットの命名規則とは？

書き出したいレイヤーやレイヤーグループの末尾に「.jpg」「.gif」「.png」といった拡張子を記述するだけで書き出し自体は完了します。

ですが、画像アセットをさらに活用していきましょう。
画像アセットでは

• 出力画質指定
• サイズ指定
• 2倍サイズの画像の同時書き出し

等が行えます。

画質指定の方法

JPG画像の場合

画質80%の場合　nekochan1.jpg8
画質100%の場合　nekochan1.jpg10

PNG画像の場合

画質8の場合　nekochan2.png8
画質24の場合　nekochan2.png24

※GIF画像の画質指定はできません。

サイズ指定の方法

画像のサイズを指定する際には、相対値やpx、cm、mm等の単位を指定します。

300×300の場合　300 x 300 nekochan1.jpg
元のサイズから300%の場合　300% nekochan1.jpg

2倍サイズの画像の同時書き出し

Retina対応などで2倍サイズの画像が必要な場合、「,（カンマ）」で区切り命名することで同時に書き出すことができます。

nekochan1.jpg8,200% nekochan1@2x.jpg8
nekochan2.png8, 200% nekochan2@2x.png8

Adobe Layer Namerで簡単に

画像アセット生成、とても便利ですよね。
でもいちいち覚えるのも入力するのも面倒だと思いませんか？

そこでぜひ「Adobe Layer Namer」を活用しましょう。

Adobe Layer Namerとは

無償のプラグインで、3クリックでレイヤーに名前をつけてくれる便利なプラグインです。
Adobe公式からダウンロードができますので安心して利用可能です。

プラグインの追加方法

メニューバーから「ウインドウ」→「エクステンション」→「Adobe Layer Namer」と選択していくとプラグインが表示されるようになります。

Adobe Layer Namerを使ってみよう

使い方はとても簡単で、書き出したいレイヤーやレイヤーグループを選択した状態でAdobe Layer Namerのウインドウから使用したい拡張子を選び画質や2倍サイズを作成するかをチェックし、名前を変更するだけ。

あとは保存をするだけで書き出されます。
フォルダも自動的に作成し、その中に保存されていきます。

2倍サイズの画像も同時書き出しをしたので、このように保存されています。

さいごに

Adobe Layer Namerを使うことで入力ミスで想定外の画像を書き出してしまう心配が解消されます。
他にも便利なプラグインがたくさんありますので、しっかり活用していきましょう！