連番の番号付きのボタンをpng形式で大量に生産する方法

番号付きのボタンを大量にPNGで作らなければいけない。 簡単な方法知ってる？ と聞かれたので、多分Photoshopでバッチ処理的な何かでできるんじゃなかろうかと思い。

できるよ。と言ってやったものの、普段あまり使わないので方法を忘れないうちに記録しておきます。 いや、そこそこ、ニーズありそうだと思うのですが、僕の場合の使用頻度は少ないので、次使う時に 忘れてしまいそう。

方法は簡単で、Photoshopのファイル＞スクリプト＞参照＞○○.jsを実行することで、番号が連番でついているボタンを生成しPNGで決められたフォルダに保存する。

ということをやらせたい。

で、次のJavaScriptを作った。

setUnit(Units.PIXELS);   // 単位設定

saveFolder = "~/png/";
motoFile = new File("~/base.psd");

textFont = "HiraKakuPro-W6";    // 書体
textSize = 24;  // 文字サイズ（point）
textDX = 40;    // 表示X位置（offset形式）
textDY = 100;   // 表示Y位置（offset形式）
textColor = new SolidColor(); 
textColor.rgb.red = 255;
textColor.rgb.green = 255;
textColor.rgb.blue = 255;

for(i=1; i<=50; i++)
{
    num = "0"+i;
    num = num.substring(num.length-2,3);
    saveName = num;
    open(motoFile);
    layObj = activeDocument.artLayers;
    layRef = layObj.add();
    layRef.kind = LayerKind.TEXT;
    layRef.textItem.contents = saveName;
    layRef.textItem.font = textFont;
    layRef.textItem.size = textSize;
    layRef.textItem.color = textColor;
    layRef.translate(textDX,textDY);
    savePng(saveFolder+"thumb_h_"+saveName+".png");
    activeDocument.close(SaveOptions.DONOTSAVECHANGES);
}

function savePng(pngFileObj)
{
    saveFileObj = new File(pngFileObj);
    var pngOpt = new PNGSaveOptions();
    pngOpt.compression = 9;
    pngOpt.interlaced = true;
    activeDocument.saveAs(saveFileObj, pngOpt, true, Extension.LOWERCASE);
}

function setUnit(unt) { preferences.rulerUnits = unt; }
function getUnit() { return preferences.rulerUnits; }

先にいうと、base.psdにベースとなる背景を作成し、その上に数字の連番をテキストで追加し、png形式で、あらかじめ準備しておいたpngフォルダに保存させている。

今回の要望は50ボタン作成してとのことだったので、ループは１から５０まで回している。