スライス機能の進化系! Photoshopの画像アセットの使い方

Photoshopでウェブデザインをしてコーディングを行う際、カンプから、画像をバラバラに分解する必要があります。そんなとき、Photoshop CCから新しく追加された画像アセット機能を使うと、素早く分解することが可能です。

そこで今回は、画像アセット機能について紹介します。

スライスの問題点を解消する、画像アセット機能とは

画像を部分的に分解するツールとして、以前はスライスツールが一般的でした。しかしスライス機能では、各スライスにファイル名をつけなければならない為、ファイル名の確認が煩雑になる他、スライス用のガイドラインがじゃまに感じたり、透過画像の書き出しには背景レイヤーを非表示にすることが必要であったりと、WEBデザイン制作時に面倒な手順が多くありました。

そこでPhotoshop CCから、このスライスツールの機能が進化した、新機能「画像アセット」が搭載されました。画像アセットでは、レイヤー名に、拡張子をつけて保存ができます。簡単な操作でPSDファイルのレイヤー・レイヤーグループから、画像の自動書き出しを行うことができ便利です。

WEBデザインの切り出しなどで役立つ画像アセット機能、是非覚えて使ってみましょう。

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

レイヤーごとに画像を作っておく

 まず、画像を作ります。今回は「logo」レイヤーと、「Button」レイヤーの2つのレイヤーに分けて画像を作りました。この時点で、画像には「UXMILK.psd」と名前をつけておきます。

bandicam 2016-02-17 10-06-36-591

 レイヤーごとに保存を行う

次に、「ファイル」→「生成」→「画像アセット」をクリックします。

bandicam 2016-02-17 10-07-16-752

 その後、レイヤーに拡張子をつけます。

bandicam 2016-02-17 10-07-53-639

 すると、先ほど保存したPSDファイルが置かれているフォルダに、「ファイル名-assets」というフォルダが生成されました。

bandicam 2016-02-17 10-10-01-689

フォルダの中を見ると、分解されたアセットファイルを確認できます。

bandicam 2016-02-17 10-10-05-691

画像アセットの対応形式

「画像アセットの生成」は4種類のファイル形式、JPEG、PNG、GIF、SVGに対応しています。

書き出し設定は、デフォルトで下記の通りです。
PNG  / 32bit
GIF  / 透過GIF
JPEG / 80%
SVG

まとめ

便利な画像アセット機能について紹介してきました。是非、便利な画像アセットを使いこなしてみてください。


Welcome to UX MILK

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

このサイトについて