Photoshop CS3〜6編 CSSスプライト画像を作成する

今回のスクリプトはWebのCSSで利用されるCSSスプライト画像を生成するスクリプトです。

●CSSスプライト
http://gihyo.jp/design/serial/01/ss-design/0010

今回のスクリプトではCSSスプライト画像は横一列に同じサイズで並べるようになっています。このため、異なるサイズの画像をまとめることはできません。
以下のスクリプトは選択したフォルダ内にある全てのJPEG画像を読み込み指定したサイズのCSSスプライト画像を生成します。


// CSS Sprite自動生成(Photoshop)
function main(){
var imgFolder = Folder.selectDialog("CSSスプライトにする画像が入ったフォルダを選択してください");
if(!imgFolder){ return; } // キャンセルされたら何もしない
var fileList = imgFolder.getFiles("*.jpg"); // JPEGの場合
var w = prompt("Spriteの横幅を入れてください", 32);
if (!w){ return; } // キャンセルされたら何もしない
var h = prompt("Spriteの縦幅を入れてください", 32);
if (!h){ return; } // キャンセルされたら何もしない
w = parseInt(w); // 整数値に変換し単位があればカットする
h = parseInt(h); // 整数値に変換し単位があればカットする
// CSS Sprite用のドキュメントを生成する
var baseDoc = app.documents.add (w*fileList.length, h, 72, "CSSSprite");
// フォルダ内にある画像の数だけ繰り返す
for(var i=0; i<fileList.length; i++){
app.open(fileList[i]); // ファイルを開く
try{
activeDocument.mergeVisibleLayers(); // 表示されているレイヤーだけ結合する
}catch(e){}
activeDocument.selection.selectAll(); // すべて選択する
activeDocument.selection.copy(); // コピーする
activeDocument.close(SaveOptions.DONOTSAVECHANGES); // 保存しない
// 指定されたサイズに一度ペーストして切り抜く(クリッピングよりも楽)
var tempDoc = app.documents.add (w, h, 72, "temp");
activeDocument.paste(); // ペーストする
activeDocument.selection.selectAll();
activeDocument.selection.copy();
activeDocument.close(SaveOptions.DONOTSAVECHANGES);
activeDocument.paste();
// ペーストした画像の左側の座標を取得
var layerX1 = parseInt(activeDocument.activeLayer.bounds[0]);
// 画像の位置を調整
activeDocument.activeLayer.translate(-layerX1, 0);
activeDocument.activeLayer.translate(i*w, 0);
}
}
// 単位を保存
var saveUnit = preferences.rulerUnits;
preferences.rulerUnits = Units.PIXELS;
// 処理を実行
main();
// 単位を復元
preferences.rulerUnits = saveUnit;

JPEGでなくPNG形式の画像を処理する場合には以下の行を変更します。

var fileList = imgFolder.getFiles("*.jpg"); // JPEGの場合
  ↓
var fileList = imgFolder.getFiles("*.png"); // PNGの場合

PSD(Photoshop)形式の場合は以下のように変更してください。なお、PSD形式の場合は表示されているレイヤーが結合された状態で配置されます。

var fileList = imgFolder.getFiles("*.jpg"); // JPEGの場合
  ↓
var fileList = imgFolder.getFiles("*.psd"); // PSDの場合

なお、画像を指定したサイズにした後に配置するには以下のように変更してください。

app.open(fileList[i]); // ファイルを開く
  ↓
app.open(fileList[i]); // ファイルを開く
activeDocument.resizeImage(w, h, 72);



[サンプルをダウンロード]