自作ツール&スクリプト

【Photoshop】書き出し超便利!「画像アセット」機能の使い方と注意点

photoshop-picture-assets

すいみん
こちらのCGメソッドの記事では書き出し超便利!「画像アセット」機能の使い方と注意点を紹介します!画像アセットはスライスで書き出すより遥かに簡単で応用が利きます!

「画像アセット」機能の便利な所

  • レイヤーごとに「拡張子」「ピクセル指定」「拡縮の倍率」を指定できる
  • 一つのレイヤーで複数サイズ出力できる
  • フォルダからでも命名をつければ出力される
  • 作業中に各素材が自動更新される
  • 素材にマスクをいれるとマスクサイズで書き出すことができる
  • /で区切ればフォルダも生成できる


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

  1. 書き出したいレイヤーに名前を付けます
    • ピクセル指定:128 x 128 logo.png
    • 倍率指定:90% logo.png
    • 複数素材書き出し:logo.png, 200% logo@2x.png
  2. 「画像アセット」機能をONに

    f:id:min0124:20161116071539j:plain

    ファイル>生成>画像アセットにチェック

以上で、PSDのある場所に瞬時に画像が書き出しされます。

参考

参考 ベテランほど知らずに損してるPhotoshopの新常識(4)まだスライスで消耗してるの?「画像アセットの生成」でスライス不要のサクサク切り出し - Adobe BlogAdobe Blog 参考 【スライス不要】Photoshop「画像アセット生成」の基本とつまずきがちな5つのコト | 東京上野のWeb制作会社LIG東京上野のWeb制作会社LIG

書き出し超便利!「画像アセット」機能の使い方まとめ

今まではスライス+リサイズ用のドロップレットでUI素材を出力していましたが、CCからの標準機能「画像アセット生成」という機能で一発で出力できました。
UI素材だけでなく、テクスチャの出力でも使えそうです。



画像アセット書き出しで結果が違う場合の修正方法

画像アセット書き出しで結果が違う場合の修正方法の紹介です。

画像アセット書き出しで結果が違う場合の現象

たとえばこんな状況です。

個別に赤と黄色の平面を書き出しているにもかかわらず、下の黄色のグループの結果が青になってしまっています。

画像アセット書き出しで結果が違う場合の原因

画像の様に上のグループの色相・彩度が下のグループに影響を及ぼしているのが原因です。

画像アセット書き出しで結果が違う場合の修正方法

非常に簡単な解決方法です。上のグループの種類を「通過」⇛「通常」にしてやるだけで、意図通り赤と黄色の平面が書き出せます。

以上です。

グループレイヤーを作成するとデフォルトが「通過」という種類になります。
調整レイヤーの使い方によっては下に影響する場合もあるので、レイヤー構成には気を配りたいところです。



以上、すいみん(@cg_method)でした!