Photoshopでウェブデザインをしてコーディングを行う際、カンプから、画像をバラバラに分解する必要があります。そんなとき、Photoshop CCから新しく追加された画像アセット機能を使うと、素早く分解することが可能です。
そこで今回は、画像アセット機能について紹介します。
スライスの問題点を解消する、画像アセット機能とは
画像を部分的に分解するツールとして、以前はスライスツールが一般的でした。しかしスライス機能では、各スライスにファイル名をつけなければならない為、ファイル名の確認が煩雑になる他、スライス用のガイドラインがじゃまに感じたり、透過画像の書き出しには背景レイヤーを非表示にすることが必要であったりと、WEBデザイン制作時に面倒な手順が多くありました。
そこでPhotoshop CCから、このスライスツールの機能が進化した、新機能「画像アセット」が搭載されました。画像アセットでは、レイヤー名に、拡張子をつけて保存ができます。簡単な操作でPSDファイルのレイヤー・レイヤーグループから、画像の自動書き出しを行うことができ便利です。
WEBデザインの切り出しなどで役立つ画像アセット機能、是非覚えて使ってみましょう。
画像アセット機能の使い方
レイヤーごとに画像を作っておく
まず、画像を作ります。今回は「logo」レイヤーと、「Button」レイヤーの２つのレイヤーに分けて画像を作りました。この時点で、画像には「UXMILK.psd」と名前をつけておきます。
レイヤーごとに保存を行う
次に、「ファイル」→「生成」→「画像アセット」をクリックします。
その後、レイヤーに拡張子をつけます。
すると、先ほど保存したPSDファイルが置かれているフォルダに、「ファイル名-assets」というフォルダが生成されました。
フォルダの中を見ると、分解されたアセットファイルを確認できます。
画像アセットの対応形式
「画像アセットの生成」は４種類のファイル形式、JPEG、PNG、GIF、SVGに対応しています。
書き出し設定は、デフォルトで下記の通りです。
PNG / 32bit
GIF / 透過GIF
JPEG / 80％
SVG
まとめ
便利な画像アセット機能について紹介してきました。是非、便利な画像アセットを使いこなしてみてください。
