Photoshopの画像アセット生成にコピペで使えるレイヤー名まとめ

画像アセット生成例とトラブル対応策

事前準備

メニューの「ファイル ＞ 生成 ＞ 画像アセット」と辿り、画像アセットをチェック状態にしてpsdファイルを保存しておきます。これで画像アセット生成の準備は完了。

生成したい画像の完成イメージ

仮に 画像サイズは500×500で中心に三角形があり、余白は透過状態のpng画像を生成したい とします。

トラブル1 – 意図した画像が生成されない

500×500サイズのドキュメントを作り、中心に三角形を配置、三角形のシェイプレイヤーに対して「三角形.png」という名前を付け、保存。
すると生成された画像は三角形にフィットして余白のない、サイズも違う画像だった。。。

解決策 – レイヤー（レイヤーセット）に対して生成したいサイズのマスクを適用する

画像アセットはあくまで「書き出し対象拡張子の付いた名前のレイヤー or レイヤーセットに対して画像を生成する」もの。Web用に保存（Alt + Shift + Ctrl + S）とは画像の出力のされ方が異なります。

ドキュメントサイズ or 任意のサイズでレイヤーを書き出したい場合は、アセット用に拡張子を付けるレイヤーに対して必要サイズのマスクをかけてあげると良いでしょう。

トラブル2 – 指定したサイズと違う大きさで画像が生成された

例えば「300×100 画像.jpg」というレイヤー名で保存したのに生成された画像は「280×160」という大きさだった。。

解決策 – レイヤータイプやサイズ指定方法を変える

• スマートオブジェクトにして一つのレイヤーとして扱う
• サイズ指定をパーセント形式（例：50%）にする

前述したマスクを用いた方法で任意のサイズにした上でレイヤー名を付けていたとしても、レイヤーの種類やアセット対象内の構成要素によっては意図したサイズにならない場合があります。

そのようなケースでは上記のように「スマートオブジェクト化・サイズ指定をパーセント形式化」で解決できることもあるのでぜひお試しください。

参考

• Photoshop でのレイヤーから画像アセットの作成
• 【スライス不要】Photoshop画像アセット生成の基本とつまずきがちな5つのコト | 株式会社LIG
• Photoshopのアセット機能で一度に複数の画像サイズを書き出す方法 | 福岡のホームページ制作会社　シンス株式会社
• その画像アセットの作り方、本当に大丈夫？【Photoshop】｜ブログ｜徳島のホームページ制作会社｜有限会社データプロ