【Photoshop】画像アセットをマスターして爆速スライスを実現しよう！

こんにちは！ライターのケインです。

突然ですが、僕はPhotoshopが大好きで、デザイン（そんなに機会ないけど）もカンプ作りも、
Photoshopで行うことが多いです。
今回は、そんなPhotoshopのバージョンCCから採用された、画像アセット（スライス）について、取り上げてみようと思います！
これさえ覚えておけば、スライスは爆速！

画像アセットとは何か！？

まず前提としてお伝えすると、僕が一番最初にPhotoshopをまともに触ったのは,Photoshop CS6からです。なので、それ以前のバージョンのPhotoshopについてはほとんど知識がありませんので、予めご承知置きください。

デザインしたデータをコーディングする際に、画像として各パーツに分解するために行う「スライス」。Photoshop CS6の段階では、

「スライスツール」で通常通りのスライスを行う
「レイヤーに基づく新規スライス」でスライスを行う

のいずれかが一般的でした。（プラグインの使用を除く）

しかし、Photoshop CCから搭載された「画像アセット」を使うと、「レイヤー名に画像の拡張子の名前を付けて保存する」だけで、あら不思議！そのレイヤーが画像として書き出しされるんですね！（つまりやっていることがスライスと同じ）

画像アセットの使い方

実際に画像アセットの手順を説明していきますね！

画像アセットの手順開設

①Photoshopの「ファイル」→「生成」にある「画像アセット」をチェックします。

②スライスしたいレイヤーの名前を、画像の拡張子（jpg,pngなど）で終わるように、変更します。（今回は星形の黄色の図形を「kein.png」という名前をつけてスライスするようにしたいと思います。

③Photoshopファイルを保存します。（写真では、星形の図形をスライスすることにしています）

④Photoshopデータがあるフォルダを確認します…なんと！「psdファイル名-assets」というフォルダが新しく生成されて、その中にスライスデータが入っていることが確認できます！なんとこれだけで完成です！

なんと、これだけで完成してしまうんですよね！スライスが。旧来からPhotoshopを使っている方には本当より素晴らしさが体感できる機能ですよね！

画像アセットで出来る色々なこと

拡張子の付け方を工夫するだけで、色々な画像を生成することが出来ます。
以下の表に、どんなことが出来るのか代表的なものをまとめてみました。

レイヤー名の付け方	どんな画像がスライスされるか
.png, .jpg, .gif	その拡張子の画像がそのまま生成される。（例）レイヤー名を「btn.png」とすれば、そのまま「btn.png」という名前のPNG画像が作られる。
.png+数字（8 or 24 or 32）	数字で指定した画質のpng画像が生成される。（例）レイヤー名を「logo.png24」とすれば、「logo.png」というpng-24形式の画像が作られる。（未指定の場合png-32形式の画像になる。）
.jpg+数字（1-10あるいは1%〜100%の形式で記述）	数字で指定した画質のpng画像が生成される。（例）レイヤー名を「bg.jpg5」とすれば、「bg.jpg」という名前で画質が50%のjpg形式の画像が作られる。（未指定の場合90％の画質で書き出される。）
横 x 縦 +(「.jpg」 or 「.png」 or 「.gif」）	横と縦で指定したピクセル値（単位をつければその単位の）の画像が生成される。（例）レイヤー名を「300×200 bg.jpg」とすれば、「bg.jpg」という名前で横300p x 縦200pxのjpg形式の画像が作られる。

他にもたくさんあるので、Adobeの公式サイトなどで直接調べてみるといいと思います！

画像アセットの活用法とデメリット

画像アセットの活用法例

なんといっても思い浮かぶのは、「Retina Display用」と「通常用」の画像を両方いっぺんに作成できるという点です。画像アセットでは「複数」のスライスを生成することができ、「２倍の大きさ」でスライスを生成することができます。これを組み合わせることで、「Retina Display用」と「通常用」の画像の同時生成が実現できるわけです。

画像アセットのデメリット

画像アセットのデメリットとしては、質感のあるような背景画像をスライスするときには不向きということではないでしょうか。通常、質感のある背景や、パターンで生成させている背景画像などは、繰り返しの最小単位でスライスすることが多いと思いますので、これは単に画像アセットをやるだけでは実現できないことかと思います。

あ、でも、画像アセットで出来る方法がありました！繰り返しの最小部分を別レイヤーにコピーして、それを上記の手順で作業すれば、スライスできますね！今思いつきました（笑）

まとめ

ということで、画像アセットを使って、効率的な制作を行っていきましょう！

またまた久しぶりになってしまいましたが、僕は生きていますので、引き続きよろしくお願いします！（笑）

Author Profile

KosugeTatsuya

Latest entries

【Web制作】テンプレートエンジン&タスクランナー「Cactus」を使ってWeb制作を加速化！