見出し画像

【Photoshop】画像の書き出しってどれ使ってる?

みなさんこんにちわ!ジョーです!
GWが終わったと思ったら、天気予報ではもう「梅雨」というワードが出ていますね…関東の梅雨入りはいつ頃なんでしょうか?
今のうちにしっかり布団周りも衣替えしないとですねぇ

カラッと乾いたお洗濯物を見て思ったのですが、
画像もしっかり綺麗に書き出しをした状態で公開したいですよね!
(その持っていき方ちょっと無理あるとか言わないで…笑)


画像を綺麗に書き出す?って一体どういうこと?

と思った人のためにちょこっと説明します!

例えばPhotoshopで加工した画像って、そのまま保存すると、形式はPSDになりますよね?
PSDのままだとSNSにUPしたり、専用のソフトがない方は確認もできません。

なので、「誰でも見られる状態」にするために、「JPG」などの形式で保存をし直すと思います。

この、「PSD」データを「JPG」などの画像データに保存し直すことを
「書き出し」と呼んでいます。


初心者や個人利用のみの場合、「名前をつけて保存」で形式を「JPG」にして「画像のデータ化」することもあるかと思いますが、何も設定をしていない画像データは重かったり、メタデータがつきっぱなしになっていたりしていて、SNS上にUPするのが危険なケースもあります!

メタデータ(Exif情報)については下記の記事をぜひご一読ください!

書き出しで保存することの大切さを語った記事になっております!

さて、書き出すことの大切さをお伝えできたところで本題ですが、
みなさんは画像の書き出しってどの機能を使っていますか?
書き出しの方法は複数ありますが、今日は3つほど紹介します!

1、Web用に保存

一番スタンダードなWeb用の書き出し方法かなと思います。
使い方は下記の方法です。

メニューバーのファイル>書き出し>Web用に保存
(またはCtrl(command)+alt(option)+shift+S)

「Web用に保存」のダイアログが表示されたら設定をするだけ。

<<おすすめの設定方法>>
  形式:JPEG
  画質:80
  メタデータ:なし

Web用保存の画面

ただし、Web用保存の方法には「アートボード」ごとに書き出しができないというデメリットもあります、、、
例えば下記のようなデータの場合です。。

アートボードで編集しているデータ

そこで、アートボードごとの書き出しについては次の方法をお試しください!

2、アートボードごとに書き出し

Photoshopでの編集をアートボードごとにするかどうかは作業の内容それぞれかとは思いますが、同じサイズで少し文言を変えるだけの場合などはとても便利です!使い方は下記の通り。

ファイル>書き出し>アートボードからファイル…
を選択。
すると、「アートボードからファイル」のダイアログが表示されます。

アートボードからファイルの画面

ファイル名の頭に共通の文字列をつけられるので、アートボード名を「1」、「2」などの連番にすることで画像を量産するときに一気にファイル名をつけることができます。

選択したアートボードのみを書き出すこともできますので、大量にアートボードがあったとしても指定の画像のみを書き出すことができます。

書き出しオプションから画質の設定もできます。

しかしこれにもデメリットが、、、
それは何かというと…
・事前にファイルのサイズがわからない
・グラデーションオーバーレイの適用範囲がアートボードではなくドキュメント全体になってしまう

これを書き出すと…
こんなことに!!
2枚目、3枚目のグラデが失敗してます!

といったところです。
特にグラデーションの問題は本チームでもかなりの問題になっておりまして、書き出しをするときに、レイヤーを統合して一枚絵にしてから書き出ししたり、Web用保存を使用して一枚づつ書き出ししたりと苦労しておりました…

それを解決できたのが次の方法です!!

3、書き出し形式

Web用保存とアートボードごとの書き出し、それぞれのデメリットの部分を改善した書き出し方法がこちらです!
アートボードごとに書き出しができ、なおかつグラデーションオーバーレイもアートボードごとの大きさに適用されます。(泣きながら万歳しましたw)
使用方法は下記の通り。

ファイル>書き出し>書き出し形式
(またはCtrl(command)+alt(option)+shift+W)
すると、「書き出し形式」のダイアログが表示されます。

書き出し形式の画面(バージョンにより表示に違いあり)

アートボードごとに書き出しができて、画質サイズメタデータの設定もできて、しかも書き出し先のフォルダも固定で指定できます!
かゆ〜いところに手が届いた感じです!
昔はなかった機能なので、いつの間にかアプデで追加されたんですね〜
こちらで書き出した画像がこちら!

グラデーションちゃんとできてる!!やった〜〜!!

デメリット…というほどでもないですが、こちらの書き出しだと、
アートボードごとに書き出しの時にあった
「ファイル名の頭に共通の文字列をつける機能」はなくなるので、
基本はアートボード名で書き出しがされます。
ファイル名 +  連番で大量に画像作っていた方はちょっとやりづらくなるかもですが…
私たちは修正の依頼がくることも多いので、アートボード名と画像名が一致している方が仕事しやすいので基本的には問題は発生してないですね!

うちのクリエイティブ課では最近なんとなくルールを作りまして、この方法がベストなんじゃないか?
ということで、落ち着きました。

知ってる方も多いかとは思いますが、書き出し方法のご紹介でした〜!