Photoshopの透明PNG書き出しバグを、画像アセットに変更して回避

Photoshop CC 2014から導入された「画像アセット抽出」機能は、フォトショデータを保存するたびに自動的に指定されたレイヤーの画像だけが書き出され、スライス書き出しの代わりになると歓迎された機能。便利なのに使っていなかったし、従来の「レイヤー書き出し」がなぜか透明PNGの余白が無視されるバグがではじめた影響で不具合回避として「画像アセット」のほうを詳しくまとめた。

PNG透明画像の書き出しにバグ?

Photoshop CC 2020以降辺りからのバグで、PNG画像書き出しで透明部分が無視され最小サイズにクロップされてしまう問題が発生し、twitterでも解決不能な苦情が多数ツイートされている。

僕のPhotoshop CC2022で突然発生し、PNG書き出しで数日ハマり時間を無駄にした。本当に困った不具合だ。この解決のために、Photoshop CC 2014以降から導入された「画像アセット抽出」という機能を頼ることにした。使ってみるとこちらの方がWeb向けで使いやすい点もある。不具合解決まで「画像アセット」を使うことしにして、使い方の要点ををまとめた。

画像抽出の前準備

といっても簡単で、次の手順で準備完了。書き出したい画像はレイヤー分けすること。

準備手順

  1. 書き出したいレイヤー名を「書き出しファイル名.拡張子」とする(image_1.jpg、png、svg、…など)
  2. メニュー > ファイル > 生成 > 画像抽出(有効に)
  3. これでPSDデータと同階層「asset」フォルダに画像が保存される

これだけで十分解決できるのだが、さらにスマートに書き出したいなら次の章のパラメーターについて知ること。

拡張子のオプション(パラメーター)

レイヤー名=ファイル名という役目だけでなく、色んなパラメーター(命令を意味するコード)にもなる。これを駆使することで「レイヤー書き出し」以上の利点で「透明PNG余白無視バグ」を乗り切ろう。(⚠️半角英数字)

指令パラメータ補足
拡張子〇〇.jpg
〇〇.png
〇〇.gif
〇〇.svg
jpgの初期値は90%
gifの初期値は透明
JPEG画質〇〇.jpg8
〇〇.jpg80%
80%
PNG画質〇〇.png
〇〇.png8
〇〇.png24
透明PNG-24(32bit)
PNG-8
PNG-24
サイズ300 x 200 〇〇.png
200% 〇〇.png
100mm × 20mm 〇〇.png
300px x 200px
200%の大きさ
100mm × 20mm
複数保存〇〇.jpg, 〇〇.pngカンマか+で区切り
2倍大追加保存の例〇〇.jpg, 200% 〇〇@2x.jpg
2倍大保存をデフォルトにdefault 200% 2x/@2x, 1x/最後のレイヤー名に入れることでデフォルト値になる。「/」はサブフォルダを作る指令(作例では「2x」「1x」がフォルダ名に)。但し、初期設定で保存フォルダ指定がある場合は無効。

参考サイト

写真や画像がボケる場合

元データが小さすぎること以外に理由があるとすれば次の通り。

  • 写真画像をスマートオブジェクト化されていること
  • 写真画像をPSD保存すること
  • スマートフィルターを適用していないこと

SVGの注意点

Photoshopに配置する際に、シェイプレイヤーとして配置すること。

参考サイト

この記事を書いた人

mojigumi

「もじぐみ」の代表、コウです。
専門は企画・出版・編集・印刷、Webデザインと管理。最近はブログ、動画、3DCG、AR、LINEスタンプ等のコンテンツ配信にも力をいれ、自分自身もランニングアートでコンテンツ化に努めています。