mojigumi Photoshop CC 2014から導入された「画像アセット抽出」機能は、フォトショデータを保存するたびに自動的に指定されたレイヤーの画像だけが書き出され、スライス書き出しの代わりになると歓迎された機能。便利なのに使っていなかったし、従来の「レイヤー書き出し」がなぜか透明PNGの余白が無視されるバグがではじめた影響で不具合回避として「画像アセット」のほうを詳しくまとめた。
PNG透明画像の書き出しにバグ？
Photoshop CC 2020以降辺りからのバグで、PNG画像書き出しで透明部分が無視され最小サイズにクロップされてしまう問題が発生し、twitterでも解決不能な苦情が多数ツイートされている。
僕のPhotoshop CC2022で突然発生し、PNG書き出しで数日ハマり時間を無駄にした。本当に困った不具合だ。この解決のために、Photoshop CC 2014以降から導入された「画像アセット抽出」という機能を頼ることにした。使ってみるとこちらの方がWeb向けで使いやすい点もある。不具合解決まで「画像アセット」を使うことしにして、使い方の要点ををまとめた。
画像抽出の前準備
といっても簡単で、次の手順で準備完了。書き出したい画像はレイヤー分けすること。
準備手順
- 書き出したいレイヤー名を「書き出しファイル名.拡張子」とする（image_1.jpg、png、svg、…など）
- メニュー > ファイル > 生成 > 画像抽出（有効に）
- これでPSDデータと同階層「asset」フォルダに画像が保存される
これだけで十分解決できるのだが、さらにスマートに書き出したいなら次の章のパラメーターについて知ること。
拡張子のオプション（パラメーター）
レイヤー名=ファイル名という役目だけでなく、色んなパラメーター（命令を意味するコード）にもなる。これを駆使することで「レイヤー書き出し」以上の利点で「透明PNG余白無視バグ」を乗り切ろう。（⚠️半角英数字）
| 指令 | パラメータ | 補足 |
|---|---|---|
| 拡張子 | 〇〇.jpg 〇〇.png 〇〇.gif 〇〇.svg | jpgの初期値は90% gifの初期値は透明 PNGの初期値は透明32bit |
| 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」フォルダが作成されその中に各サイズが保存され、200%画像にはファイル名に@2xが付く）。但し、初期設定で保存フォルダ指定がある場合は無効。 |
参考サイト
blanche-toile.comこのように、AIが登場し始め複雑化した今日は、デザインの領域にもプロンプトが重要なスキルになってきた。
写真や画像がボケる場合
元データが小さすぎること以外に理由があるとすれば次の通り。
- 写真画像をスマートオブジェクト化されていること
- 写真画像をPSD保存すること
- スマートフィルターを適用していないこと
SVGの注意点
Photoshopに配置する際に、シェイプレイヤーとして配置すること。
