PhotoshopのWeb用に保存と書き出し形式

Photoshopユーザーなら馴染み深い出力機能がweb用に保存です。psdファイルではなく、webなどの素材としてJPGやPNG、GIFといったファイル形式で書き出しを行うための機能です。早速、紹介していきたいと思います。

PhotoshopのWeb用に保存と書き出し形式

メニューバーのファイルを押して、web用に保存を押します。

screenshot 865

すると、このようにWeb用に保存のウインドウが出て、設定を行ってから、保存を押すことで、設定の通りに書き出しが行える機能です。

screenshot 866

しかし、Photoshop CCからはWeb用に保存に変わる新しい出力機能が用意されています。ファイルの書き出しメニューには、PNGとしてクイック書き出しと書き出し形式が並んでいてそのあとにWeb用に保存が並んでいます。

(従来)とついていますね。突然なくなると戸惑うユーザーが多いので一応前の機能も残しておいてくれています。

screenshot 867

Photoshop CCで以前と同じようにファイルの出力を行う場合、「書き出しの形式」を選択します。PNG、JPEG、PNG-8、GIF、SVGのファイル形式での書き出しが可能です。このようなウインドウでいつも通りファイル形式などの設定を行って書き出すことができます。

screenshot 868

PhotoshopCCで大きく違うのが、アートボード機能です。1つのファイルの中に複数のアートボードがあるため、1つのファイル内で作成したアートボードを個別の画像として書き出す必要があります。

screenshot 869

試しに、3つのアートボードを作成したファイルで、Web用に保存(従来)を選択してみると、1つの画像としての書き出しになってしまっていました。

screenshot 870

つまり、普通の画像を保存する場合はどちらでもいいかもしれませんが、複数のアートボードがある場合は、web用に保存(従来)は対応していない為使えないということです。

1つの画像になっても良い場合はそれでも使えますが、これからは書き出しの形式を使って出力をした方が良いのではないかと思います。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

購読

平日・週2回更新