photoshopの画像書き出し方法

更新2021/12/21

photoshopで画像を書き出す方法のメモ。

画像アセットで書き出す

photoshopでの画像書き出しはいくつか方法がありますが、レイヤー名に拡張子をつけるだけで自動で書き出してくれる、画像アセットでの書き出しが一番簡単。
特に問題がなければこの方法で書き出すことがほとんどです。

書き出し方法

画像で書き出したいレイヤーの名前に画像名+拡張子をつけます。

「ファイル」>「 生成」>「 画像アセット」をクリック。チェックが入っていればOK。

テキストも画像書き出しできます。同じように名前をつけるだけです。

操作は以上。これでPDSデータと同じ場所に「PSD名-assets」というフォルダができ、その中に画像が入ります。

レイヤーデータを変更した時、そのままの名前にしておくと、前の画像は上書きされます。前に書き出した画像を残しておきたい場合は、別の場所に移動させるなどの対応が必要です。

複数書き出し

一つのレイヤーで複数のサイズや拡張子を一気に書き出すこともできます。

複数の書き出しの場合は、カンマで画像名を区切ります。

【例】img.jpg, images.png

書き出せる拡張子

書き出せる拡張子は以下のもの。

  • PNG
  • JPEG
  • GIF
  • SVG

画質設定

画質を変更することもできる。

JPEG

指定なしは90%で「0~100」まで指定できる。

レイヤー名の例画質
sample.jpg90%
sample.jpg110%
sample.jpg60%60%

PNG

指定なしは32bit。その他8、24が指定できる。

レイヤー名の例画質
sample.pngPNG-32(透過あり、1,670色の表現)
sample.png8PNG-8(透過あり、256色の表現)
sample.png24PNG-24(透過なし、1,670色の表現)

参照 : Photoshop でのレイヤーから画像アセットの作成 – Adobe

サイズ設定

画像名の前にサイズを入れることで、任意のサイズで書き出すことも可能。

使える単位は「px、in、cm、mm」。単位を省略した場合はpxで書き出し。「%」は拡大縮小。

レイヤー名の例書き出される画像
200% img.jpg2倍の画像
100mm × 20mm img.png100mm × 20mmの画像
10in × 20in img.png10in × 20inの画像

1つのデータから複数の画像を書き出すときは名前の変更を忘れずに。1倍画像と2倍画像を書き出すなら2倍には@2xをつけるなどわかりやすいように。

【例】image.png, 200% image@2x.png

全てのレイヤで同じように書き出すように設定する

全ての画像書き出しで2倍の画像が必要な場合、一つ一つ名前を設定するのは面倒です。そんな時、デフォルトで設定することもできます。

空のレイヤをつくって、「default 200% 2x/@2x, 1x/」という名前にします。

こうすると「1x」と「2x」というフォルダが自動的に生成され、「1x」フォルダには等倍画像、「2x」フォルダには2倍画像が生成されます。
異なる設定にしたい場合は、各レイヤで名前に設定を足せば、そちらが優先されます。

スライスで書き出す

画像の一部のみ、特定の範囲のみ書き出したい時はスライスを使用。

書き出し方法

「スライスツール」を選択。書き出したい部分を囲む。

「ファイル」>「 書き出し」>「 Web用に保存」(ショートカットキー【⌘またはctrl + alt + shift + S】)

大きさは左クリックでスライスオプションを編集から数字で変更することもできる。

クイック書き出し

レイヤーを選択して右クリック。
その中に【PNGとしてクイック書き出し】というメニューがあるのでクリック。
名前をつけて保存。

環境設定の「書き出し」メニューに【クイック書き出し形式】という項目があるので、そこで拡張子を変更することができます。(png, jpg, gif, svgに対応)

書き出し形式

こちらもレイヤーを選択して右クリック。その中の【書き出し形式】をクリック。
ファイル形式、画像サイズ、拡大・縮小など色々な設定をして書き出せます。

カテゴリー : Design

TOPへ