【Photoshop】PSDから画像ファイル（jpg/pngなど）を書き出す方法

Webサイトのデザインデータは、PSDで共有されるのが主流ですが、そのままサイト上で使うことはできません。

「デザインデータを基に、Webサイトに画像を設置してみたい」ときなどは、PSDから画像ファイルのみを書き出して、それらをアップロードする必要があります。

というわけで今回は、PSDから画像ファイルを書き出す最も簡単な方法を解説いたします。

PSDから画像を書き出すには「画像アセット」を使う

Photoshopの「画像アセット」機能を使うのが便利です。PSDの中からレイヤーを指定するだけで瞬時に書き出してくれます。操作は簡単な次の3ステップです。

1. 画像として書き出したいレイヤーを選ぶ
2. 名前を変更する（画像の拡張子をつける）
3. 生成（画像アセット）にチェックを入れる

スライス機能のように、PSD上で書き出したい画像の範囲を選択する必要はありません。

1. 画像として書き出したいレイヤーを選ぶ

例えば、次のデザインデータ（PSD）から赤枠箇所の画像を書き出したいとしましょう。

まずは、対象のレイヤーを選択します。

2. 名前を変更する（画像の拡張子をつける）

次に、レイヤーの名前を変更します。

レイヤー名の箇所をダブルクリックで編集できます。.jpg/.png/.gif/.svgのいずれかの末尾になるよう変更すればOKです。

整理しやすい名称にしておくと後々わかりやすいです（top_page_headerの部分）。

複数の画像を一発で書き出したい場合は、対象のレイヤー名をすべて変更しておきます。ここで名前を変更したレイヤーが画像として一括で書き出されます。

ちなみにレイヤーグループごと書き出すことも可能です。

同じ要領でレイヤーグループ名の末尾に拡張子を追加すればOKです。複数のレイヤーからなるデザインも1枚の画像として書き出してくれます。

3. 生成（画像アセット）

名前の変更が済んだら、左上の「ファイル」から「生成」>「画像アセット」を選択します。

これで完了です。元のPSDが置いてあったフォルダ内に「（元のPSD名）-assets」というフォルダが出現します。

上記の例では、「top.psd」というファイルから画像を書き出したので、「top-assets」というフォルダ名なっています。

この中に、先ほど名称を変更したレイヤーが画像として書き出されているわけです。

1枚からでも書き出してくれます。ここまでが基本的な使い方です。

また、これは「画像アセット」にチェックを入れたタイミングで生成されるのではなく、チェックを入れている状態であれば、レイヤーの名前の末尾に拡張子を加えるだけで生成してくれるようになります。

画像アセットの便利なオプション

画像アセットには、画像サイズや画質を指定できるオプションもあります。どちらもレイヤー名を変更する際に一工夫加えるだけで使えるので、ここにメモしておきます。

サイズを指定する

書き出すレイヤー名の先頭に「200%」というように倍率を書くだけです。

レイヤー名の前に半角スペースを空けておきましょう。この場合は、原寸の2倍のサイズで書き出してくれます。

すでに原寸サイズで書き出している場合はエラーが起きるので、ファイル名を変更するなど対策するといいでしょう（logo@2x.jpgなど）。

ちなみに「原寸サイズと2倍サイズの両方で書き出したい」という場合は、このように「,」を間にいれて指定することも可能です。

これで両サイズの画像が同時に別ファイル名で書き出されます。

画質を指定する

画質を指定できるのはjpgとpngの拡張子のみで、それぞれレイヤー名の末尾に数値を入力することで指定できます。

jpgの場合は、このようにスペース無しで「1〜10」の数値を指定します。10%単位で指定できます。

pngの場合もスペース無しでOKですが、ビット数で指定するため「8, 24, 32」のいずれかになります。最高画質は32です。

書き出す拡張子によって指定方法が違うことだけおさえておけば、簡単に指定できますね。

まとめ

PSDから画像ファイルを書き出す「画像アセット」機能について解説いたしました。

一度設定しておけば、レイヤーの末尾に拡張子をつけるだけで、自動で書き出してくれます。PSDから複数の画像を書き出すケースは少なくありませんが、画像アセットを使えば作業を効率化できますね。

少し毛色が異なりますが、他にもPhotoshopでの作業を効率化する記事があります。よろしければご覧ください。