弊社のデザインデータは基本的にFireworksで作られているのですが、
先日、Photoshopでデザインデータが上がってきました。
今回は、久しぶりに触ったPhotoshopが画像アセット機能で鬼便利になって感動したというお話です。
デザイナーさんから「画像アセットやばい」と聞いて、
画像アセットって何ぞや？と、Photoshop CS4あたりから
すっかりPhotoshopから遠ざかっていた私はポカン顔をしたわけですが。
実際、その場でやって見せてもらってすっごく感動しました！！！！！
コーダーさんなら一度はきっと思ったことがあると思います。
わかります、わかりますよ。ものぐさな私は毎回思ってます。
作業が立て込むと、スライスなんて作業はこの世から消えてしまえ！くらいは思います。
では、画像アセットってなんぞや？を端的に画像で表現しましょう。
なんということでしょう！
ただポチッと画像アセットにチェックを入れて、拡張子をつけたグループに入れると勝手に画像が生成されました！
スライス作業って、地味に時間が取られるんですよね・・・あっちこっちのレイヤーを非表示にしたり、戻したり・・・。
ちりも積もれば山となる。難しくない命名規則さえ覚えてしまえば、もうスライスに悩まされることはなくなるかもしれません！
では、最低限のグループ命名規則を並べてみましょう。
| PNG ※透過PNGで書き出されます |
（画像名）.png |
|---|---|
| PNG24 | （画像名）.png24 |
| PNG8 | （画像名）.png8 |
| JPG | （画像名）.jpg |
| JPG（画質調整） | ・（画像名）.jpg80%【パーセンテージで指定】 ・（画像名）.jpg5【1 - 10 の数値で指定】 |
| GIF | （画像名）.gif |
| 拡大・縮小 | 50% （画像名）.（拡張子）【相対値で指定】 300px x 10px （画像名）.（拡張子）【単位で指定】 拡大・縮小したい画像サイズを先頭につけます。相対値か、Photoshopでサポートされている単位（pxやcmなど）が使用できます。 |
PNG、JPG、GIFが自動で書き出されるだけでも便利なのに、拡大縮小もサポート・・・。
拡大の方は元画像から拡大されるので、2倍サイズなどで書き出す可能性がある場合は、初めにスマートオブジェクトに変換してから配置しましょう。