CG・映像デザイナー技術ブログ

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

assistant すいみん

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

CGブロガー

すいみん

Suimin

プロフィール

某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。 書籍:Unity デザイナーズ・バイブル
プロフィール詳細はこちら

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上です。

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

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

Photoshopに関する参考記事・ツール・書籍のまとめ

Photoshopに関する記事を下記にまとめました。



photoshop-summary-article


便利な機能紹介!Photoshopに関する作り方まとめ

フォトショップのソフトウェア購入


eyecatch-buy-adobe-creative-cloud
【Adobe Creative Cloud】最安!アドビ認定スクールから購入する方法(+講座付き)

フォトショップの参考書籍

assistant すいみん

独学で勉強できてしまうPhotoshopですが、他の人の手法を見ると全然使いこなせてなかったことに気がつくこともあります