Photoshopの「画像アセット」でスライスと書き出し作業を効率UP！

画像アセット機能の使い方

【手順1】拡張子の追加

最初は画像ファイルとして書き出したいレイヤー名に「拡張子」を付けます。例えば「test」という名前のレイヤーをPNG形式の画像ファイルとして書き出したい場合、レイヤー名を「test.png」とします。

【手順2】ファイルの生成

レイヤーを選択したまま、アプリケーションバーの上にある「ファイル」から「生成」→「画像アセット」を選択します。この操作により、作業中のPSDファイル（仮にsample.psdとします）と同じ階層に「sample-assets」と呼ばれるフォルダが自動的に作られ、フォルダの中に「test.png」が書き出されます。「sample.psd」が保存されるたびに「test.png」は自動的に更新されるため、毎回画像アセットによる書き出しを繰り返す必要がありません。

画像アセット機能とスライス機能の違い

画像アセットは、スライスツールによる切り分けや、他レイヤーの映り込みといった点を考慮せず、レイヤー名の変更と書き出し処理だけで思い通りに画像を生成できるため、作業効率に優れた機能です。

Photoshop CCよりも前は、スライスツールを利用して任意の領域を作り出し、表示されているレイヤーの内容を切り取り、画像ファイルとして書き出していました。スライスは今もよく使われている手法ですが、切り出したい画像を部分的に透過させたいときに、画像の下にあるレイヤーをすべて非表示にしなければならないことが難点です。切り出したい画像の数だけ「レイヤーの表示・非表示」を繰り返すことになり、切り出す画像が多い場合、スライス作業が面倒でした。

画像アセット機能を使えば、1つのレイヤーだけで処理が済むため、作業にかかる時間や手間が減り、ミスも起こりにくくなります。

スライス作業のポイントは画像サイズを抑えること

スライス作業で覚えておきたいポイントが、Webサイトの表示を速めるため、書き出す画像のデータサイズを「最小に抑える」ことです。画像サイズを抑える方法としては、「画質に応じて保存形式を変える」「画像解像度でリサイズする」の2通りがあります。

画質に応じて保存形式を変える場合、保存形式にはJPEGやGIF、PNGがあり、扱う色数や透過によって画像のデータサイズの大小が決まります。一般的なデータサイズはJPEGよりもGIFが大きいです。 PNGは透過色を指定できる点や圧縮率が高いため、場合によってはGIFより画像サイズを小さくできる長所がある一方、フルカラーにするとJPEGより画像サイズが大きくなる短所もあるため、保存する内容に応じてJPEGやGIFと使い分けましょう。

表示するスペースに対して画像が大きすぎる場合は、画像解像度でリサイズしてください。画像の幅や高さを指定し、適切な画像解像度を指定することで画像サイズの最小化を図ることができます。

[PR] Webデザイナーの仕事の魅力とは？　先輩Webデザイナーに聞いた仕事の魅力

おわりに

画像アセット機能の活用により作業時間を大幅に短縮し、効率的なスライス作業が可能になります。また、ユーザーにとってWebサイトの表示で待たされることはストレスですが、画像スライス時の一手間で画像サイズの最小化すれば、Webサイトの表示速度を改善可能です。

Photoshopを利用する際は、ソフトの使い方を覚えるだけではなく、一つ一つの作業が持つ意味を理解しながら作業を進めましょう。インターネット・アカデミーでは、現場経験が豊富なプロのインストラクターが、Photoshopによる画像編集や加工などのテクニックの習得にとどまらず、Webデザインの考え方をしっかりと指導します。Webデザインを学びたい方は、ぜひスクールの受講をご検討ください。