メニュー

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

すいみん

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

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

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

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

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

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

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

Adobe Blog
The Blog | Welcome to Adobe Blog
The Blog | Welcome to Adobe Blogアドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。
株式会社LIG
【スライス不要】Photoshop「画像アセット生成」の基本とつまずきがちな5つのコト | 株式会社LIG
【スライス不要】Photoshop「画像アセット生成」の基本とつまずきがちな5つのコト | 株式会社LIGPhotoshopのスライス作業が不要になる便利なテクニック『画像アセット生成』を使っていますか?「まだ使ったことない」「なんか上手くいかないんだけど」という方に向けて...

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

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

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

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

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

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

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

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

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

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

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

以上です。

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

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

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

Photoshopのソフトウェア購入

Photoshopが学べるスクール

Photoshopの参考書籍

すいみん

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

この記事も読まれてます

目次
閉じる