photoshopの画像アセット機能はどんな感じなんだろう。使い方を知りたい。
アセットを使う上での注意点が知りたい！
という方向けの記事です。
昨年くらいから、Web制作のデータづくりの際、photoshopの画像アセット機能を使っています。
アセット機能はスライスする手間が省けるとっても便利な機能です。
使っているうちに、デメリットや注意点も合わせて見えてきたので書いてみたいと思います。
photoshopCC画像アセット機能とは
web制作の際、デザイン内の画像部分を切り出す作業があります。
今までは1点ずつ枠で囲んで指定していました。
囲んだ後、一気に書き出していきます。
スライスという方法です。
それに変わり新しく登場したのが、photoshopの画像アセットです。
レイヤーに書き出したいファイル名と拡張子を入れ、画像アセット機能をオンにすると、自動で書き出してくれます。
囲む作業が減って便利！です。
仕事でも使っているのですが、使いやすい点、使いにくい点、いろいろありますね。
画像アセットの使い方
1.photoshopCCでデザインファイルを開きます。
2.ファイル→生成→画像アセット機能をオンにします。
チェックが入ればOKです。
3.レイヤー名を書き換えます。
基本的には、ファイル名.拡張子となります。（gazou.jpgみたいな）
デフォルト設定の場合、pngが32bitのpng-24、gifが透過gif、jpgが80%の画質で書き出されます。
つけるファイル名によって画質などの調整も可能です。
使用可能な画質設定（パラメーター）
| jpeg | .jpg(1-10) または .jpg(1-100%) 例：Ellipse_4.jpg5 |
|---|---|
| png | .png（8または24） |
使用可能な拡張子
jpg/gif/png/svg
4.制作ファイルと同じ階層に「assets」フォルダができている
ファイルを保存すると制作データと同じ階層（フォルダ）に「ファイル名-assets」フォルダができています。
自動でフォルダ内に画像が書き出されていてとても便利です。
制作ファイルと連動しているので、制作ファイルを変更すると、自動で、assetsフォルダ内のデータも書き換わります。
この中のファイルをコピーして、webデータに使っていけばよいですね。
画像アセットの注意点
基本的にはとても便利なのですが、ちょっと使いにくい点も。
まとめていきたいと思います。
画質が簡単目視で調整できない
※スライス時に使用していたweb用に保存の画面
画像によって、画質を下げても目立たないものと、画質を下げるとすぐわかってしまうものがあると思います。
スライスで画像切り出しを行なっていた時は、web用に保存という画面で、書き出し画像のイメージを確認しながら画質調整することができました。
画像アセットの場合、毎回asttetsフォルダにアクセスして、画像を確認する必要があります。
うーん、めんどう。
私は、サイズが大きいもののみ（200kb以上）ピックアップして、以下画像圧縮サイトで圧縮したものを使っています。
jpg、png、gifの圧縮ができます。
四角ではない画像のjpg切り出し
これは今のところ、1番不便を感じているところです。
見出しなど四角ではない画像を切り出していく際、jpgで書き出すと背景色が反映されず、白い背景が残ってしまうことがあります。
切り出すフォルダ内に背景色と同じ長方形を敷けば、解消されるもののこれもまた面倒…。
結局、pngで書き出すと背景透過で書き出されるので、そちらで対応しています。
画像アセットのメリット
そんな不便さもある画像アセット機能ですが、便利点も多いです。
仕事でも基本画像アセットを使っているのは、メリットの大きさからです。
紹介したいと思います。
スライス不要！で簡単書き出し
これが一番のメリットです。
書き出し部分を全てきちっと囲むのは、結構めんどうな作業です。
また、1pxもずれないように囲まないと！とか細かな配慮も必要ないです。
ファイル名が画像名になるので、jpgをpingに変えるとか、拡張子の再変更も簡単です。
書き出しのプロセッサ性能が従来の書き出し方法より上がっている
スライスを使って書き出すより、軽量に描き出せるシステムが搭載されています。
svgで描き出せるもの大きなメリットですね。
再調整が簡単
psdファイルと連動しているので、再度デザインの調整が必要になった際の書き出しは大変便利ですね。
今までに比べ、書き出し作業が2倍速くらいにはなっていると感じます。
エラーが出てくれるのがわかりやすい
拡張子の入力を間違えていたり、ファイル名が重複していたり、こちらの記入ミスがある際、エラーテキストが出ます。
これは、なかなかわかりやすい。
理由も書いてあって（英語ではあるものの）すぐに調整できてありがたいです。
まとめ
まとめると、
・photoshopの画像アセット機能は、スライス作業が不要で制作速度アップになった。
・jpgで書き出す際、矩形出ない画像は、背景に白色が出てしまったり、svgはシェイプでないと書き出せなかったりと注意点もある。
でした。
デメリットこそはあるものの、すっかり便利で定番で使っている画像アセット。
これからもお世話になりそうです。
