はじめに
本記事では、Web制作の現場で実際に役立つ効率的な画像書き出し方法と、作業時間を短縮する便利な小ワザを厳選して紹介します。
なお、macOS版を基準に解説します。Windows版をお使いの方は、適宜読み替えてご覧ください。
（例： command → Ctrl / option → Alt）
また、作業内容によってはPhotoshop以外のツールが適している場合もありますので、そちらも併せて紹介します。
基本となる3つの書き出し機能
まずは、Photoshopの基本的な書き出し機能をおさらいします。
1. レイヤーを右クリックして書き出し
特定のレイヤーやグループを個別に素早く書き出したい時に最適です。レイヤーまたはグループを右クリックし、「書き出し形式…」または「PNG（もしくはJPG/GIF）としてクイック書き出し」を選択します。
2. Web用に保存 (従来)
アートボード全体を書き出すクラシックな機能です。ファイルサイズを細かく確認しながら最適化したい時に便利です。
ショートカット: shift + option + command + S
3. 書き出し形式
モダンな書き出し機能。複数のサイズ（1倍、2倍など）を同時に書き出すことが可能です。
ショートカット: shift + option + command + W
Web制作の主役！「アセット書き出し」機能
レイヤー名（またはグループ名）を変更するだけで、自動的に画像を書き出せる非常に強力な機能です。Web制作のコーディング効率が劇的に向上します。
導入方法
まず、アセット書き出しを有効にする必要があります。
メニューバーから ファイル＞生成＞画像アセット にチェックを入れてください。これだけで準備完了です。
書き出せる種類
.jpg .png .gif .svg で書き出せます。
(レイヤー名の例： logo.png、photo.jpg)
サイズ調節
ファイル名の「前」に数値を入れ、半角スペースを空けます。
大きさ指定（ピクセル）
例）幅250px、高さ150pxで書き出す場合→レイヤー名: 250x150 test.png
大きさ指定（%）
例）200％の大きさで書き出す場合→レイヤー名: 200% test.png
解像度(画質)の指定
・PNG-8で書き出す場合→ レイヤー名: test.png8
・PNG-24で書き出す場合→ レイヤー名: test.png24
・JPG画質100%で書き出す場合→ レイヤー名: test.jpg10 または test.jpg100%
・JPG画質80%で書き出す場合→ レイヤー名: test.jpg8 または test.jpg80%
GIFには書き出しオプションがありません。レイヤー名に .gif と付けるだけです）。
「%」を記入せずとも画質をカスタマイズできますが、他の人が見ても分かりやすいように「%」をつけることを推奨します。
ちなみに、画質の指定なし（例： test.jpg）の場合は画質80%になります。
同じ画像で複数バージョンを書き出す
複数の画像（例：通常版とRetina版、jpgとpngなど）を一度に書き出すには、「,」（カンマ）でつなぎます。「,」の後のスペースはなくても問題ありません
・同じ画像でpngとjpgを書き出す場合→ レイヤー名: test.png, test.jpg
・Retina対応（1倍サイズと2倍サイズ）で書き出す場合→ レイヤー名: 100% test.png, 200% test@2x.png
書き出し先をカスタマイズする
書き出す画像名の前に 「フォルダ名/ 」を接頭辞としてレイヤー名に追記します。
・「icons」フォルダの中にtest.jpgを書き出す場合→ レイヤー名: icons/test.jpg
余白を入れて書き出す（カンバスサイズの指定）
書き出す画像のサイズを固定し、余白を含めて書き出したい場合があります。例えば、アイコンのサイズを「100px × 100px」に統一したい時などです。
この場合、レイヤーマスクやベクトルマスクを利用します。ここでは長方形ツールを使った簡単な例を紹介します。
- 書き出したいレイヤーの上に、長方形ツールで「100px × 100px」など、書き出したいカンバスサイズのシェイプを作成します。
- 作成したシェイプの塗りと線を「なし」にします。
- そのシェイプと書き出したいレイヤーを両方選択し、グループ化（
command + G）します。 - 作成したグループのレイヤー名を、アセット書き出しの命名規則（例:
icon-home.png）に変更します。
こうすることで、グループ内のシェイプのサイズがカンバスサイズとして認識され、その範囲で画像が書き出されます。
svg書き出しを行う際の注意点
カラーオーバーレイなどのレイヤースタイルで色を付けると、書き出したSVGに色が反映されない可能性があります。
また、書き出したSVGがブラウザなどで正しく表示されないこともあります。解決法として、Photoshopで当該のレイヤーを選択した後、書式＞シェイプに変換 を行うと表示できる場合もあります。
以上のことから、PhotoshopでのSVG書き出しは万能ではありません。ロゴなどの重要なSVGは、なるべくIllustratorで書き出すことを推奨します。
参考：https://qiita.com/hibikikudo/items/d5c1a87768f5de2d71bf
pdfを書き出す方法
PDFはアセットでは書き出せませんが、以下の流れでしたら書き出すことは可能です。
ファイル＞書き出し＞アートボードからPDF…
※この機能は、書き出したい要素がアートボードで囲われている必要があります。
作業効率アップ！Photoshop 便利な小ワザ集
Photoshopの基本機能に加えて、知っていると作業が格段に楽になる小ワザを紹介します。
スマートオブジェクトで画像をまとめて差し替える
同じバナー素材や商品画像を複数箇所で使っている場合、そのレイヤーをスマートオブジェクトにしておけば、「コンテンツを置き換え」を実行するだけで全ての箇所が同期して更新されます。
もし変更が自動で反映されなかった場合は、
レイヤー＞スマートオブジェクト＞変更された全てのコンテンツを更新 を試してみてください。
ショートカットキーをカスタマイズ
編集＞キーボードショートカット…
パネルメニュー、ツール、アプリケーションメニューの各項目に設定できます。⌘キーと他の修飾キー（Option, Control, Shiftなど）、および英数字やファンクションキーの組み合わせで設定します。
CC 2019からの新機能「簡易計算」
幅や高さなどの数値を入力するフィールドで、簡単な計算ができる機能です。「全体の幅は1200pxだけど、それを5等分した幅で長方形を作りたい…」といった、計算が面倒な時にオススメです。
入力欄に 1200/5 と入力してEnterキーを押すだけで、計算結果の 240px が適用されます。
※ +（加算）、-（減算）、*（乗算）、/（除算）、%（百分率） が使えますが、(100+50)/2 のような複雑な組み合わせ計算はできません。（100+50 や 100/2 といった単一の計算のみ可能です）
※ 計算結果に小数点以下（.5以下）が含まれる場合、切り捨てられます。
画像からフォントの種類を特定する「マッチフォント」
デザインデータがラスタライズ（画像化）されていても、使われているフォントを特定したい場面があります。テキストレイヤーならフォント情報が分かりますが、画像としてもらったテキストでは手がかりがありません。
そんな時は「マッチフォント」機能を使いましょう。
- 1. 画像の中にある検索したい文字を、選択ツールで囲みます。
- 2. 書式＞マッチフォント… を選択します。
これだけで、選択範囲の文字に近いフォントを、自分のPCにインストールされているフォントやAdobe Fontsの中から探してくれます。
テキストオプションで「日本語」か「欧文」かを指定して探すこともできます。（欧文フォントに比べて、日本語フォントはまだ対応範囲が少ない場合があります）
画像のサイズが足りない時の対処法
クライアントから提供された画像でバナーなどを作成する際、「もう少しだけ背景の幅（高さ）があれば、デザインが収まるのに…」と思うことがあります。背景が単色なら簡単ですが、グラデーションがかかっていたり、複雑な模様だったりすると大変です。
そんな時は「コンテンツに応じた切り抜き」を試してみましょう。
- 1. 切り抜きツール（
Cキー）を選び、カンバスを広げたい方向へドラッグします。 - 2. オプションバーにある 「コンテンツに応じる」にチェックを入れます。
- 3. Enterキーで切り抜きを確定します。
これだけで、Photoshopが画像の端を解析し、自動で背景を自然に（それっぽく）生成してくれます。
応用編：コンテンツに応じて拡大・縮小
上の作業の応用編です。画像の内容によってはうまくいかない場合もありますが、非常に便利な機能です。
例えば、対談バナーなどで二人の人物の間隔だけを詰めたい、といった場合に便利です。
編集＞コンテンツに応じて拡大・縮小
この機能を使うと、Photoshopが「重要」と判断した部分（人物など）を保護しながら、背景など「重要でない」と判断した部分だけを伸縮させることができます。
機能を拡張する（スクリプト・外部アプリ）
外部アプリを使って複数の画像を一括でリサイズ・リネームする
ブログ記事用の画像や事例紹介の写真など、大量の画像のサイズ（特に幅や高さ）を一度に揃えたい場合にオススメです。この作業はPhotoshopのバッチ処理でも可能ですが、専用のアプリを使うとさらに効率的です。
ここではmacOS用の「iMage Tools」というアプリを紹介します。（もちろん、他の類似アプリでも構いません）このようなツールを使うと、リサイズだけでなく、一括でのリネームや連番の付与なども簡単に行えます。
参考： https://pc-karuma.net/mac-app-image-tools-resize/
Script（スクリプト）を使って機能を拡張する
複数のオブジェクトを「等間隔に分布」させたい時、Photoshopの標準機能を使うと、メニューの奥深くにあって毎回クリックするのは大変です。さらに、この「分布」機能には、デフォルトでショートカットキーが割り当てられておらず、カスタマイズもできません。
そんな時はScript（スクリプト）を使って、機能を拡張しましょう！
今回の場合は下記のURLで配布されているスクリプトデータをダウンロードします。
オブジェクトが横に並んでいるときには「Distribute Layer Spacing Horizontal 0-2-0.jsx」、縦に並んでいるときには「Distribute Layer Spacing Vertical 0-2-0.jsx」を使います。
Adobe Photoshop Scripts | Trevor Morris Photographics | Horizontal 0-2-0.jsx
Adobe Photoshop Scripts | Trevor Morris Photographics | Vertical 0-2-0.jsx
Scriptの導入手順
- 1. 欲しいScriptのデータ（
.jsxファイル）を探してダウンロードします。 - 2. Finderを開き、
アプリケーション＞Adobe Photoshop [バージョン]＞Presets＞Scriptsフォルダに、ダウンロードした.jsxファイルを保存します。
※jsxのデータ名は自分が分かりやすいように変更してもOKです。 - 3. Photoshopを再起動します。
- 4. メニューの ファイル＞スクリプト を見ると、追加したスクリプトが一覧に表示され、実行できるようになります。
- ※スクリプトが反映されたら、「キーボードショートカットのカスタマイズ」（前項参照）から、このスクリプトに独自のショートカットキーを割り当てると、さらに便利です。
参考： http://www.dtp-transit.jp/adobe/photoshop/post_2093.html
Adobe Exchangeで便利な拡張機能を入手する
Photoshopの拡張機能を充実させてくれる公式のマーケットプレイスです。これはPhotoshopだけではなく、IllustratorやAfter Effectsなど、他のAdobe製品の拡張機能も探せます。
有料のものから無料のものまで、また評価が高い順などで検索することも可能です。（ちなみに、筆者は整列系の拡張機能（Align and Distributeなど）をよく使っています）
リンク ：https://www.adobeexchange.com/creativecloud.photoshop.html#pfa
よくある質問（FAQ）
- Web制作初心者です。書き出し方法がたくさんありますが、どれを使えば良いですか？
- 「アセット書き出し」を推奨します。レイヤー名に「.png」や「.jpg」と付けるだけで自動で書き出されるため、コーディング作業と並行して画像を管理できます。
デザイン修正が入った時も、Photoshopのデータを更新するだけで画像が自動で上書きされるため、Web制作者にとって最も効率的な方法です。 - PhotoshopでのSVG書き出しに注意が必要なのはなぜですか？
- Photoshopはピクセル（点の集まり）を扱うのが得意なソフトですが、SVGはIllustratorのようなベクター（計算式）ベースの形式です。
そのため、PhotoshopからSVGを書き出すと、レイヤースタイル（カラーオーバーレイなど）が反映されなかったり、意図しない表示崩れが起きたりすることがあります。簡単なシェイプなら問題ない場合もありますが、確実性を求めるならIllustratorからの書き出しを推奨します。 - アセット書き出しで画質を調整する際の目安はありますか？
- レイヤー名で画質を細かく指定できます。目安として、JPEG（.jpg）の場合は
.jpg8（80%） が画質とファイルサイズのバランスが良い標準設定です。
より高画質が必要なら.jpg10（100%）、ファイルサイズを軽くしたいなら.jpg6（60%）などを試してみてください。
PNGの場合は、色の少ないロゴやアイコンは.png8、写真のように色数が多い場合は.png24を使うと良いでしょう。