Photoshopのスライスツール・画像アセットとは？書き出し方法をそれぞれ紹介

Webサイトを作成する際に、作り上げたデザイン画からそれぞれのパーツを書き出す必要がありますよね。Photoshopでの書き出しは従来スライスツールで行われていましたが、Photoshop CC に導入された「画像アセット」機能を使うとより早く書き出せます。今回はスライスツールの方法を紹介した後に、画像アセットのメリット、利用方法について紹介します。

スライスツールとは？

スライスツールとは、生成したい部分の領域をドラックで選択して、Webサイト用に保存していく作業に使用されます。「切り抜きツール」から発展した機能で、Photoshop CCの登場以前は、書き出し作業といえばスライスツールというほどよく使用されていました。

スライス機能の本来の役割は、1つの画像を複数に分割して保存することです。例えばデザインカンプから一つ一つパーツを分割する際などに使われることが多いです。スライスは手間のかかる作業ですが、デザインカンプやデザイン画からのパーツの書き出しに「スライスツール」は不可欠でした。

スライスツールの使った書き出し方法

では、実際の例を見ながらスライスツールの使い方を説明していきます。下の画像は書き出しをする前のデザインカンプです。このデザインカンプから、中央の犬の画像のみを切り抜いてみます。

まず、ツールバー＞スライスツール＞スライスツールを選択します。

書き出したい範囲を調節して切り抜きます。

書き出し範囲を決定した後、ファイル＞書き出し＞Web用に保存（従来）を選択して書き出したい部分をクリックします。

そうすると、以下のような画像が作成されます。

スライスツールでの書き出しで背景を含めない場合

スライスツールを使用して画像を書き出す際に背景を入れたくない場合は、スライスする前に背景を非表示にする必要があります。

先ほどの画像の四隅を見てください。画像自体は角丸の長方形ですが、スライスでは直角の長方形で書き出されるので、画像の下に背景としてあった部分がついたままで保存されてしまっています。

このような場合に背景を含めずに画像を書き出すには、下の画像のように犬の画像の背景を非表示にしてから、スライスを行いましょう。

スライスツールのデメリット

スライスツールには、主に以下の2つのデメリットがあります。

レイヤーの表示/非表示を選択する必要がある

スライス機能の問題点として1番に挙げられるのは、先述したように切り抜きたい部分にかかっている他のレイヤーを1つずつ非表示にする必要がある点です。実際に使用されるデザインカンプでは、画像の上にも他の画像が重ねられていたり、文字が重ねられていたりすることが多いです。

余分な部分を取り除いて書き出すためには、いくつものレイヤーを非表示にするという手間をかける必要があります。デザインカンプから何枚もの画像を書き出すのであれば、膨大な回数の表示/非表示を選択する作業が求められるのです。

また、レイヤーの表示/非表示が多いため、必要な部分を非表示にしたままスライスしてしまったり、逆に不要部分を表示してしまったりするなどのミスも起こりやすくなってしまいます。

修正の度にスライスで書き出す必要がある

もう1つの問題としては、書き出した画像に修正点が発生した際に、スライスの工程をもう一度しなければならないことが挙げられます。デザインカンプは必ずしも完成形ではないために、製作段階での修正は起こりうることです。時間を費やしてスライスした大量のパーツをまた一から書き出さなければならないとしたら、途方に暮れてしまいます。

画像アセットとは？

画像アセットとは、書き出したい画像のレイヤーの名前を保存したい保存形式の「拡張子」を付けるだけで、簡単に指定した画像の書き出しが行えるツールです。先ほど紹介したスライスツールを使う場合よりも簡単に画像を書き出すことができます。

例えば「犬」というレイヤー名の画像を書き出したい場合は、「犬.png」と名前を変更するだけで、簡単に画像の書き出しができます。レイヤーの名前を指定するだけで、作業中のPhotoshopデータがあるフォルダと同じ階層に「○○‐assets」というフォルダが作成され、その中に書き出しデータが格納されるのです。

画像アセットを使った書き出し方法

先ほどのデザインカンプを、画像アセット機能で書き出してみます。まずは、書き出したい画像のレイヤー名に、「.png」を付けます。

次に、ファイル＞生成＞画像アセットを選択します。

画像アセットで求められる作業はこれだけです。

画像アセットにチェックを入れることで、作業中のPhotoshopデータがあるフォルダと同じ階層に「○○-assets」というフォルダが自動で生成されます。このファイルの中には「.png」の付いたファイルが保存されています。

今回のようにPNG形式で書き出すことで、以下のように背景が透過された状態で保存されます。スライスツールで書き出す際のように背景のレイヤーを非表示にする必要はないのです。

書き出した画像の保存形式

画像アセット機能を使って書き出した画像は任意の「拡張子」をレイヤー名に付けることで保存できます。保存形式はそれぞれ様々な特徴があるので、どの保存形式を選択するかは書き出した画像に合わせて決めましょう。今回は画像アセットに対応する保存形式のうち、PNGとJPEG、SVGを例にして説明します。

WebMedia参考記事

【厳選！】6つの拡張子（画像フォーマット）の特徴と適切な用途を比較！

https://www.itra.co.jp/webmedia/image-fomat.html

Webサイトに画像をアップロードしたいけれど、どの拡張子（画像フォーマット）、もしくは画像ファイル形式を選べばいいか迷っ...

1. PNG

PNGは膨大な色数を持つために画像容量が重い特徴があります。しかし透明色を用いた可逆圧縮が可能なので、サイトに用いる写真の画像編集の際に選択されることが多いです。 拡張子の後にbit数を付けない場合は、「.png」で保存するとデフォルトで32bitの画像が生成されます。

2. JPG

JPGは色数が多いので、グラデーションなどの細かく色が変化している画像に向いています。画像データをとても小さく圧縮できる特徴がありますが、非可逆圧縮であることには注意が必要です。また、PNGのように画像を透過して保存することができません。拡張子の前後に画質のパーセンテージを付けない場合は、「.jpg」で保存するとデフォルトで画質80％の画像が生成されます。

3. SVG

SVGは拡大・縮小しても画質が落ちないベクター画像です。ベクター画像とは、ピクセルの集合体で画像データを保持するPNGやJPGのようなビットマップ画像とは異なり、画像を数値データとして演算して保持するものです。輪郭のはっきりした画像データであれば、他の形式を用いるよりも容量を軽く保存することができます。一方で、写真のように輪郭線があいまいで色数の多い画像データでは、計算式が複雑になってしまうのでSVGは適していません。

画像アセットのメリット

スライスツールに比べて作業が簡単な画像アセットのメリットを紹介します。

表示/非表示の選択が不要になる

1つ目は、表示/非表示の選択をしなくても、背景を透過した画像を保存できる点です。書き出したい画像の角が丸かったり画像自体が円の形をしていたりする場合に、表示/非表示の選択なしに、余分な要素を取り除いた画像が保存できるので、作業が格段に楽になります。 ただ注意しておくべき点として、画像を透過したままで保存する場合には、透過に対応しているPNG形式で保存しましょう。

修正時の再書き出しが不要になる

2つ目は、修正時に何度も書き出しをする必要がない点です。従来のスライスツールでの書き出しでは、書き出した画像に変更点が生まれた場合には、再度書き出しを行うしか方法はありませんでした。しかし、画像アセットでは書き出した後の画像に変更を加えても、「-assets」ファイル内の画像が変更点を自動で引き継ぐことができます。

では、今回書き出した犬の画像の上に、以下の星形を重ねてみましょう。

すると、フォルダの中の画像を確認すると、自動で変更点が反映されています。

このように、画像アセットを使用すれば、変更後の再書き出しが不要になります。書き出し作業が不要になったことで多くの時間が短縮されるでしょう。 ぜひ画像アセット機能の活用法を知って、利用してみてください。

まとめ

今回は従来の書き出し方法であるスライスツールと新しい画像アセット機能を比較しました。画像アセット機能の便利さをお分かりいただけたでしょうか。
画像アセット機能を活用すれば、書き出しミスが起こる可能性も減るので、作業を効率化することができるでしょう。