デザインと暮らしのメモ
とある会社員デザイナーの、デザインや仕事にまつわる記録です。
Webデザイン

サイズ違いのバナー制作にPhotoshopクイック書き出しが便利

Photoshopクイック書き出しのアイキャッチ

同じデザインテイストでサイズ違いのバナーをいくつもお願いされることがあります。
たくさん種類があると、いっこいっこ別々のファイルで作ると書き出しがけっこう手間なのです…。

そんなときは、ひとつのファイル内に必要なバナーの数だけアートボードを作って「クイック書き出し」を使うと早くて便利です。

Photoshopのクイック書き出しはこんな機能

複数サイズのアートボードを作って、まとめて保存ができるという機能です。

たとえばこんなふうに、異なるサイズの複数のアートボードを作ります。

Photoshopアートボード

サイズ違いのバナーを作るときは、それぞれのアートボードに「bnr_300x200」みたいにサイズがわかるような名前を付けています。

レイヤーはこんな感じです。

Photoshopアートボード作るときnレイヤー

アートボードの名前が、書き出したときにそのままファイル名になります。

書き出し方法

ファイル→書き出し または
書き出したいアートボードを選択→右クリック
→JPGとしてクイック書き出し
で書き出せます。

この「JPGとしてクイック書き出し」の箇所が、場合によっては「pngとしてクイック書き出し」とかになっていることもあります。
その場合は、「書き出しの環境設定」で設定ができます。

Photoshopバナーの書き出し Photoshopバナーの書き出し形式 Photoshopバナーの書き出し形式

pngやsvg、gifにも書き出しが可能です。
pngに書き出しもよく使ってます。

クイック書き出しで書き出してみました

先ほどのファイルを書き出すと、

Photoshopバナーの書き出し

こんなふうに保存されます。
いっこいっこレイヤー統合→別名保存しなくてよいので楽ちん!
(当たり前に使われているワザなのかもしれませんが、今の職場でこの作り方をしているいる方のpsdファイルを見て知りました…)