デザイナーとしていろんなツールを使っていると、
あれ、画像書き出しどうだっけ・・？と思うことありませんか？
今回はデザイナーが比較的よく使うPhotoshopの画像書き出しの方法を4つご紹介したいと思います！
クイック書き出し
「ファイル → 書き出し→ pngとしてクイック書き出し」でpsdファイルを保存している階層にアセットフォルダが自動生成され、画像を書き出してくれます。
ちなみに拡張子は書き出しの上から3つ目にある「書き出しの環境設定」から「png/jpg/gif」から選ぶことができます。
保存場所も「書き出すたびに場所を指定」か「保存ファイルと同じ階層にフォルダ作成」かを選ぶことができますのでお好みの設定で保存してください
書き出し形式
これは私が一番よく使う保存方法です。
一つのpsdファイルでアートボードをたくさん使用する方にはこちらがおすすめです
各アートボードごとに保存設定ができるため、何個かのバナーを一つのファイルで制作し、一括で保存する時などにとても便利です
それぞれのアートボードごとに「png/jpg/gif」を設定でき、サイズも変更可能。
jpgを選択した場合には画質レベルも選択できます。
さらに左上の「＋」を押せば2倍書き出しなども追加できるのでRetina画面対応バナーの書き出しにもとても便利です。
全てのアートボードで設定が同じ場合は、「すべてを選択」し、拡張子やサイズなど確認し、「書き出し」を押せば3つの画像を同じ設定で書き出すことができます
よく使うのでショートカットキーは覚えてきましょう^^
⌘(Command)＋⌥(option)＋⇧(Shift)＋W
Web用に書き出し
アニメGIFやスライスした画像を書き出す時に使います。
会社に勤めていた時はPhotoshopのバージョンがPS5でアートボードという概念がなく、毎回これを使っていました・・
jpgの書き出しで画質を細かく設定できることやサイズなどもこちらで変更することができます。
注意するのはアートボードを使っている時は1枚なら良いですが、何枚か並べているとすべてのアートボードをひとつの画像として書き出してしまうため、使うことはできませんのでご注意ください。
（↓アートボード3枚並べてWeb用書き出ししたとき３つの画像がひとつの画像に書き出しされてしまいます）
こちらもショートカットキーが用意されているので覚えておいても良いかもしれません
⌘(Command)＋⌥(option)＋⇧(Shift)＋S
画像アセット
「もう書き出しのダイアログを出すのも面倒」
って時はこちらがとても便利
コーディングでカンプをもらった時はよくこちらを使用しています。
「ファイル → 生成 → 画像アセット」にチェックを入れます。
以下のようにアートボードまたはレイヤーの名前に「.拡張子」をつけることによってデータ保存されている階層に自動的にアセットフォルダが生成され、その中に自動的に書き出されるという画期的な機能です★
記載できる拡張子は「.jpg」「.png」「.gif」「.svg」です。
psdローカル保存している場合
psdをローカル保存しながら作業している方は、ファイルがある階層にいくと、psdファイルの名前と同じアセットフォルダができています！
中を開くとjpgとして画像が書き出されていると思います！
psdファイルを保存していない場合
psdファイルが保存されていない場合、生成されたアセットはデスクトップの新しいフォルダに保存されますが、どこに行ったか分からなくなったり消えたりしてしまう前にデータは保存しておきましょう
psdをCreative Cloudに保存している場合
また、psdをクラウド保存されて作業されている方もいらっしゃると思います。
Adobe公式サイトでこちらに保存されていますと記載がありますが
Windows：C:\Users\yourname\Documents\Adobe\Photoshop Cloud Associates
macOS：/Users/yourname/Documents/Adobe/Photoshop Cloud Associates
私のMacではDocuments→書類 でしたので迷われませんように・・
また、Macのお使いの方で、「そもそもUsersってどこやねん！」って思われた方はFinderを開き、
上にある「移動→書類→Adobe」で直接飛ぶのが早いかと思います
階層は深いですが、こんな感じで辿り着きます
【保存必須】Photoshop書き出しまとめ画像
最後に４つの書き出し方法をまとめた画像を貼っておりますので画像保存などして活用していただければと思います^^
それぞれの書き出し方法の特徴を理解できると作業効率もUPするのでぜひ覚えたいですね
