PhotoShopからレイヤーごとにレイヤー名に合わせてPNGに書き出す自動処理(JSX)をメモしておきます。
動作イメージ
動作イメージは以下のとおりで各レイヤーの名前に合わせてPNGが書き出されます。
もちろん実際にHTML5やFlashなどで素材を使う際には余白を切り取る必要がありますが、それは別途のオペレーションに任せます。
本プログラムはPSDにある大量のレイヤーから命名規則を俯瞰しつつPNG書き出したい時の用途に特化したいと思います。
実際のコード
コードが出来ました。
/** * レイヤーごとにレイヤー名に合わせてPNGに書き出す */ // #target photoshop // 処理開始 if( app.documents.length == 0 ){ alert( "【!】実行するドキュメントがありません。" ); } else { if( confirm( "処理を開始します。よろしいですか?" ) ){ main(); } else { alert( "【!】キャンセルされました" ); } } function main(){ // すべてオフ(レイヤーのみ) allHiddenLayerSetsList( activeDocument ); // レイヤーを一つ一つオンにしてPNG保存 visibleLayerAndPNG( activeDocument ); alert( "すべての処理が完了しました。お疲れ様でした。" ); } // PNG保存部分 function pngSave( filename ){ var pngOptions = new PNGSaveOptions(); var filepath = activeDocument.path + "/" + filename; $.writeln ( "resizePNGSave [" + i + "] > file : " + filepath ); activeDocument.saveAs( File( filepath ), pngOptions, true, Extension.LOWERCASE ); } // レイヤーを一つ一つオンにしてPNG保存 function visibleLayerAndPNG( layer ){ for (var i=0; i<layer.artLayers.length; i++){ layer.artLayers[i].visible = true; pngSave(layer.artLayers[i].name); layer.artLayers[i].visible = false; } for (var i=0; i<layer.layerSets.length; i++){ visibleLayerAndPNG(layer.layerSets[i]); } } // すべてオフ(レイヤーのみ) function allHiddenLayerSetsList( layer ){ for (var i=0; i<layer.artLayers.length; i++){ layer.artLayers[i].visible = false; } for (var i=0; i<layer.layerSets.length; i++){ allHiddenLayerSetsList(layer.layerSets[i]); } }
実際に動作させる
PSDを読み込みレイヤーを調整した後に、JSXをExtendScript Toolkitで開き実行します。詳しくは以下のとおり。
今回はtest.psdなので以下のようになります。
こうやるといいかも
例えば、こんなPSDがあります。
test.psd
すべてのレイヤーが個々に書きだされるわけでなく、一部は複数のレイヤーがひとつの画像になってほしいことがあります。
そのときは、この自動処理前にレイヤーの統合をしてまとめておくといいと思います。もちろん元データPSDを複製して別で対応しましょう
以下が例です。
test_retouch.psd
用途に合わせてレイヤーを調整して書き出してみてください。
おわりに
いかがでしたでしょうか。自分はPSDのレイヤー丁寧に名前をつけてPNG書き出したいときによく使っています。
しかも、命名を変えたい時もレイヤーを変えるだけで対応できるのは便利ですね。
今回のソースコードも、以下においておきます。
データダウンロード:jsx_layer_to_png.zip
それでは、よきPhotoShop JSX Lifeを!