WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： デザイン >Photoshop

Photoshopで画像をスライスする際に、「PC用とスマホ用で別々に書き出す必要があるな～」とか、「Retina対応のために2倍のサイズを書き出す必要がある！」など1つの画像につき複数サイズの画像を制作するときはありませんか？
そんな時に、Photoshop2020の機能にある「書き出し形式」を使うことで簡単に複数サイズを制作することができます！

「書き出し形式」の使い方

まずは複数サイズに書き出したいデータを開きます

まずはデータをPhotoshopで開きましょう。例にするのは以前私が書いた記事のアイキャッチ画像です。

書き出し形式を選択

①書き出しをしたい画像レイヤーもしくはグループを選択して右クリックをします
②右クリックをしたら【書き出し形式】をクリックします

書き出したいサイズを選択

上記のように書き出し形式のウィンドウが表示されます。

【すべて拡大・縮小】のエリアにサイズを変更するプルダウンメニューがあるので、ここから好きなサイズを選択しましょう！
2倍のサイズを書き出したいときには2x、3倍のサイズのときには3xになります。
サイズを選択すると自動で接尾辞がつきますがこちらは自由に変更することが可能です。サイズが決まったら、書き出しボタンをクリックして保存しましょう！

書き出された画像はこちら

こちらは通常サイズの画像

こちらが2倍に書き出された画像

あっという間にサイズ違いの画像が作れました！もちろん画質もキレイな状態です。

一度に複数画像を作るには

色々なサイズの画像をまとめて書き出すには、書き出し形式ウインドウにて【プラスマーク】をクリックします。
そうすると、選択できる項目が増えているので、まとめて書き出しサイズを指定することが可能です！

まとめ

今回ご紹介した機能はコーディング時のスライスのひと手間が減り、効率化にもつながりますね。まさに、かゆいところに手が届く機能、ぜひ使ってみてください。