media archive

Photoshopの書き出しでPSDからWebで扱える画像を書き出す!基本の書き出し方法について知ろう!

PhotoshopでWebデザインカンプやバナーなどを制作した場合、WebではPSDを扱えない(ブラウザが表示できない)ため、PSDからWebで扱える画像形式に変換して書き出すという作業が必要になります。
本記事では、その基本的な書き出し方法について解説していきます。

本記事の内容
非表示

動画での解説

下記動画は、この記事の動画での解説です。

動画のインデックスは下記の通りです。

  1. 書き出しの必要性(00:16〜)
  2. Photoshopで画像形式を変換して保存する方法(00:43〜)
  3. [書き出し形式]で書き出す方法(03:24〜)
  4. アートボード(カンバス)全体を書き出す方法(03:33〜)
  5. レイヤーまたはレイヤーグループを書き出す方法(05:03〜)
  6. [書き出し形式]の設定について(06:40〜)
  7. [クイック書き出し]で書き出す方法(10:42〜)
  8. まとめ(13:10〜)

以下で、テキストと写真での解説をしています。

どうして書き出しが必要なの?

デザインカンプやバナーなどをPhotoshopで制作した場合、ブラウザが表示できる画像形式に変換したり、コーディングに必要な個々の画像を取り出したりする必要があります。

Photoshopから個々の画像を書き出す

その画像形式の変換や、個々の画像として保存するときに使う機能書き出しです。

Photoshopで画像形式を変換して保存する方法

Photoshopで画像形式を変換して保存するには、大きく分けて

  • 別名で保存から形式を選択して保存する
  • 書き出しを行う

の2つの方法がありますが、まずはそれぞれ簡単にみてみましょう。

別名で保存から形式を選択して保存する方法

別名で保存から形式を選択して保存するには、[ファイル]メニュー→[別名で保存]から[フォーマット]を選択して保存します。

[別名で保存]での[フォーマット]選択

この方法を使うのは、主に印刷に使用する画像データの場合です。
[別名で保存]で画像形式を変換して保存した場合、

  • 解像度
  • カラーモード
  • Exif情報

などは保たれます。

コラム

Exif情報って?

Exif(Exchangeable image file format)情報とは、

  • カメラの機種
  • 撮影時のカメラの設定
  • 撮影した日時
  • 撮影場所の位置情報

など、画像に埋め込まれている様々な付加情報(メタデータ)のことです。下記は、購入したストックフォトのExif情報の例です。

購入したストックフォトのExif情報の例
Exif情報の例

書き出しを行う方法

書き出しを行うには、[ファイル]メニュー→[書き出し]から、書き出したい項目を選択して書き出します。

[ファイル]メニュー→[書き出し]

書き出しの項目はたくさんありますが、Web用に書き出す場合に使用するのは、

  • 書き出し形式
  • クイック書き出し
  • Web用に保存(従来)

の3つの項目で、[クイック書き出し]の設定として[書き出しの環境設定]も使います。

書き出し形式、クイック書き出し、書き出しの環境設定、Web用に保存(従来)

3つの項目はそれぞれ、

  • 書き出し形式:書き出しで基本となる方法
  • クイック書き出し:よく使う画像形式をあらかじめ設定しておき、手早く書き出す場合に使用する方法
  • Web用に保存(従来):アニメーションGIFを書き出す場合に使用する方法

のように使い分けます。

[Web用に保存(従来)]は、過去バージョンのPhotoshopでWeb用に画像を書き出すときに使われていた機能ですが、[書き出し形式]の方が機能が追加されていたり便利なので、基本的には[書き出し形式]を使います。

しかし、[書き出し形式]はアニメーションのGIFには対応していないので、アニメーションGIFを書き出す場合のみ、[Web用に保存(従来)]を使う必要があります。

書き出しでは

  • JPG
  • PNG
  • GIF
  • SVG

の4つの画像形式に変換でき、これらの形式はブラウザでの表示に対応しています。

JPG、PNG、GIF、SVGの4つの画像形式

それぞれの画像の特徴について詳しくは、Webで扱える画像について知ろう!基本の4つの画像形式とその特徴まとめをご覧ください。

以下では、使用頻度の高い

  • 書き出し形式
  • クイック書き出し

の使い方を解説していきます。

[書き出し形式]で書き出す方法

まず最初に、書き出しで基本となる[書き出し形式]で書き出す方法を解説していきます。初めに書き出しの流れを説明したあと、書き出しの設定について説明します。

アートボード(カンバス)全体を書き出す方法

単一のアートボードを書き出す場合

単一のアートボード(カンバス)全体を書き出すには、[ファイル]メニュー→[書き出し]→[書き出し形式]を選択します(ショートカット→Mac:command+option+shift+W、Win:ctrl+alt+shift+W)。

[書き出し]→[書き出し形式]

すると、設定ダイアログが出てきますので、

書き出し形式のダイアログ

任意の設定をして[書き出し]をクリックします。設定については後ほど解説します。
そして、保存場所とファイル名を指定して、

保存場所とファイル名を指定して[保存]

[保存]を選択すると指定した場所に書き出されます。

複数のアートボードを書き出す場合

複数のアートボードを書き出す場合は、

複数のアートボードがある場合
複数のアートボードの例

書き出された画像のファイル名は、自動的にアートボード名になります。

複数のアートボードを書き出す場合、チェックボックスでそれぞれのアートボードを切り替え、

選択チェックボックスでのアートボードの切り替え

それぞれ個別に書き出しの設定をする必要があります。

レイヤーまたはレイヤーグループを書き出す方法

単一のレイヤーまたはレイヤーグループを書き出す場合

単一のレイヤーまたはレイヤーグループを書き出すには、レイヤーパネル上で書き出したいレイヤーまたはレイヤーグループを選択した状態で、パネルメニューを開くか、

レイヤーパネルのパネルメニュー
パネルメニュー

選択したレイヤーまたはレイヤーグループを右クリックします。すると、メニューの中に[書き出し形式]がありますので、

[書き出し形式]

それを選択します。
あとは先ほどのアートボード(カンバス)全体を書き出す方法と同様に、任意の設定をして保存場所とファイル名を指定して書き出します。

複数のレイヤーまたはレイヤーグループを書き出す場合

複数のレイヤーまたはレイヤーグループを書き出す場合は、レイヤーパネル上で複数選択して書き出します。

複数のレイヤーまたはレイヤーグループを選択した状態
複数のレイヤーまたはレイヤーグループを選択した例

このとき、書き出された画像のファイル名は、自動的にレイヤー名になります。

複数のレイヤーまたはレイヤーグループを書き出す場合、チェックボックスでそれぞれのレイヤーまたはレイヤーグループを切り替え、

選択チェックボックスでのレイヤーまたはレイヤーグループの切り替え

それぞれ個別に書き出しの設定をする必要があります。

[書き出し形式]の設定について

ここからは、書き出し形式の設定について詳しくみていきましょう。

書き出し形式の設定ダイアログ
書き出し形式の設定ダイアログ

すべて拡大・縮小

画像そのものの大きさを基準に、書き出す画像の倍率サイズを指定できます。

書き出し形式の設定-すべて拡大・縮小

サイズ1xは等倍サイズで、例えば2倍サイズで書き出したいときは2xにします。

2倍サイズで書き出し

1xからサイズを変更したときに接尾辞が付きますが、これはファイル名の最後に自動的に付くもので、特別な理由がない限り自動付与される接尾辞のままでOKです。

また、プラスボタンを押せば、複数のサイズを追加でき、削除ボタンを押せばサイズを削除できます。

サイズの追加と削除

チェックボックス

どの画像を書き出すのか、チェックして選択できます。

書き出し形式の設定-チェックボックス

また、複数のアートボードや複数のレイヤー/レイヤーグループの書き出しの場合、ここで現在どの画像に対する設定を行っているのかを切り替えます。

プレビュー

現在の設定のプレビューが表示されています。

書き出し形式の設定-プレビュー

2アップ

元の設定と変化後の設定を見比べることができます。

書き出し形式の設定-2アップ

ファイル設定

書き出す画像形式と、画質などオプション項目があればオプションの設定ができます。

書き出し形式の設定-ファイル設定

画像サイズ

画像そのものの大きさに関する設定ができます。

書き出し形式の設定-画像サイズ

カンバスサイズ

画像ではなくカンバスの大きさを設定できます。通常、変更する必要はありません。

書き出し形式の設定-カンバスサイズ

画像サイズより大きくすると余白ができ、

カンバスサイズを画像より大きくした場合
画像サイズよりカンバスサイズを大きくした場合

画像サイズより小さくすると画像がトリミングされます。

カンバスサイズを画像より小さくした場合
画像サイズよりカンバスサイズを小さくした場合

メタデータ

これは最初の方に述べたExif情報のことです。

書き出し形式の設定-メタデータ

通常[なし]を選択し、メタデータは削除しますが、必要であれば[著作権情報および問い合わせ先]を選んでください。

メタデータを削除すると、ファイル容量もその分軽くすることができます。

色空間情報

ここは簡単にいうと色の再現性に関する設定です。

書き出し形式の設定-色空間情報

色の再現性高めるために、ここは全てチェックを入れておきます。

その他[書き出し形式]の注意点

[書き出し形式]はWeb用の機能なので、[書き出し形式]で書き出したJPG、PNG、GIFは自動的に解像度が72ppiに変更されます。

また、例えば印刷用のCMYKカラーのデータから書き出すと、書き出された画像はRGBになるなど、カラーモードが変更される場合もあります。

以上が[書き出し形式]で書き出す方法でした。

[クイック書き出し]で書き出す方法

次に、[クイック書き出し]で書き出す方法を解説します。

[クイック書き出し]は、あらかじめ書き出す画像の設定をしておき、手早く書き出す場合に使用します。[書き出し形式]の簡易版のようなもので、設定や操作感も[書き出し形式]に似ているため簡潔に説明します。

[クイック書き出し]ではまず最初に、[ファイル]メニュー→[書き出し]→[書き出しの環境設定]から、書き出す画像の設定をしておきます。

[書き出し]→[書き出しの環境設定]

[書き出しの環境設定]を選択すると、[環境設定]の書き出しに関する設定が表示されます。

[書き出しの環境設定]画面
書き出しの環境設定画面

ここで書き出す画像形式や書き出し場所などの設定をします。

書き出しに関する設定をする項目

アートボード(カンバス)全体を書き出す方法

アートボード(カンバス)全体を書き出すには、[ファイル]メニュー→[書き出し]→[○○○としてクイック書き出し]を選択すると書き出せます。○○○は設定した画像形式により変わります。

[書き出し]→[○○○としてクイック書き出し]

複数のアートボードがある場合は、全て書き出されます。

レイヤーまたはレイヤーグループを書き出す方法

レイヤーまたはレイヤーグループを書き出すには、書き出したいレイヤーまたはレイヤーグループを選択した状態で、パネルメニューを開くか、

レイヤーパネルのパネルメニュー

選択したレイヤーまたはレイヤーグループを右クリックします。すると、メニューの中に[○○○としてクイック書き出し]がありますので、

[○○○としてクイック書き出し]

それを選択すると書き出せます。

複数のレイヤーまたはレイヤーグループを選択してクイック書き出しすることもできます。

以上が[クイック書き出し]で書き出す方法でした。

最後に

PhotoshopでWeb用に画像形式を変換するには、別名で保存からではなく、書き出しで行いましょう。[書き出し形式]では、細かな設定や、サイズ(倍率)違いなどの書き出しもできて便利です。

ただ、書き出す枚数が多くなってくると、書き出し作業が大変です。そこでPhotoshopには、書き出しを自動化する「画像アセット生成」という強力な機能があります。

「画像アセット生成」については、画像アセット生成は一括指定(初期設定)もできる!Photoshopの画像の書き出しをさらに効率化しよう!で詳しく解説していますので、そちらも参考にしていただければと思います。

Webで扱える画像について詳しく知りたい方は、Webで扱える画像について知ろう!基本の4つの画像形式とその特徴まとめをご覧ください。

デザインカンプの作り方が解説してある本

レタッチでオススメの本

ホームページの制作、Webデザインから、
パンフレットやチラシなど紙媒体の制作、グラフィックデザインまで、
制作のご相談やお見積もりなど、まずはお気軽にお問い合わせください。

お問い合わせはこちら
TOP