利用 PhotoShop 製作 CSS Sprite

原本想用 PhotoShop 的巨集來製作 CSS Sprite 的圖片，但沒想到巨集沒辦法很方便的匯入圖片到圖層上，最後找到一個可行的方法就是寫 PhotoShop 的 Script。

我只有兩個需求：

• 處理圖檔組合
• 紀錄每張圖的起始定位

雖然已經寫完了，但是還是有一些小小的 Bug，對於透明底色的 png 會有定位上的偏差，我的解決辦法就是在四個角畫上 1px 透明為 1% 的白色，雖然美中不足但勉強夠用。
這個小 Bug 已經解決了。


這個 Script 的執行方式很簡單
只要將需要合併的圖檔全部開啟
接著『檔案 -> 指令碼 -> 瀏覽』選擇下載後的 css_sprite_ps-script.jsx
執行後會建立一個新圖檔，並且要選擇輸出的 CSS 的檔案名稱

原始碼

1. // css_sprite_ps-script.jsx 
2. #target photoshop 
3.  
4. /** 建立參考線 
5. * @param {Int} pixelOffSet 偏移像素 
6. * @param {String} orientation ["Vrtc" => 垂直 ,"Hrzn" => 水平] 
7. */ 
8. function makeGuide(pixelOffSet, orientation) { 
9.    var id8 = charIDToTypeID( "Mk  " ); 
10.    var desc4 = new ActionDescriptor(); 
11.    var id9 = charIDToTypeID( "Nw  " ); 
12.    var desc5 = new ActionDescriptor(); 
13.    var id10 = charIDToTypeID( "Pstn" ); 
14.    var id11 = charIDToTypeID( "#Rlt" ); 
15.    desc5.putUnitDouble( id10, id11, pixelOffSet ); // integer 
16.    var id12 = charIDToTypeID( "Ornt" ); 
17.    var id13 = charIDToTypeID( "Ornt" ); 
18.    var id14 = charIDToTypeID( orientation ); // "Vrtc", "Hrzn" 
19.    desc5.putEnumerated( id12, id13, id14 ); 
20.    var id15 = charIDToTypeID( "Gd  " ); 
21.    desc4.putObject( id9, id15, desc5 ); 
22.      executeAction( id8, desc4, DialogModes.NO ); 
23. } 
24.  
25. function main(){ 
26.    //判斷是否有開啟圖檔 
27.    if (app.documents.length = 0) {return;} 
28.  
29.    //設定前景色為白色 
30.    app.foregroundColor.rgb.hexValue = 'FFFFFF'; 
31.  
32.    var atDoc; 
33.    var list = []; 
34.    var length = app.documents.length; 
35.  
36.    //新增目標圖片文件 
37.    var newPic = app.documents.add( 
38.        1, 1, 72, 
39.        "css_sprite", 
40.        NewDocumentMode.RGB, 
41.        DocumentFill.TRANSPARENT 
42.    ); 
43.  
44.    var height=0; 
45.    var width = newPic.width; 
46.    //複製所有圖檔至新建立的圖檔 
47.    for (var i=0; i<length; i++){ 
48.        atDoc=app.activeDocument=app.documents[i]; 
49.  
50.        //記錄圖層資訊 
51.        var newLayer={ 
52.            name:   atDoc.name, //檔名 
53.            width:  atDoc.width, 
54.            height: atDoc.height, 
55.            top:    height 
56.        }; 
57.  
58.        //累計高度 
59.        height += app.documents[i].height.value; 
60.        //最大寬度 
61.        if(width < atDoc.width){ width=atDoc.width;} 
62.  
63.        //新增圖層 
64.        var aLayer = atDoc.activeLayer=atDoc.artLayers.add(); 
65.  
66.        //複製背景底圖 
67.        try { 
68.            atDoc.backgroundLayer.duplicate(aLayer,ElementPlacement.PLACEAFTER); 
69.            atDoc.backgroundLayer.remove(); 
70.        } catch (e){} 
71.  
72.        //將新圖層與下一層互換 
73.        aLayer.move(atDoc.layers[1],ElementPlacement.PLACEAFTER); 
74.  
75.        //標註四周的定位點 
76.        var w=atDoc.width.value, h=atDoc.height.value; 
77.        atDoc.selection.select([[0,0],[1,0],[1,1],[0,1],[0,0]]); 
78.        atDoc.selection.fill(app.foregroundColor) 
79.        atDoc.selection.select([[0,h-1],[0,h],[1,h],[1,h-1],[0,h-1]]); 
80.        atDoc.selection.fill(app.foregroundColor) 
81.        atDoc.selection.select([[w-1,0],[w-1,1],[w,1],[w,0],[w-1,0]]); 
82.        atDoc.selection.fill(app.foregroundColor) 
83.        atDoc.selection.select([[w-1,h-1],[w-1,h],[w,h],[w,h-1],[w-1,h-1]]); 
84.        atDoc.selection.fill(app.foregroundColor) 
85.  
86.        //設定透明度 
87.        aLayer.fillOpacity=1; 
88.        //合併可見圖層 
89.        atDoc.mergeVisibleLayers(); 
90.        //複製圖層 
91.        atDoc.selection.selectAll() 
92.        atDoc.selection.copy() 
93.  
94.        //貼上圖層 
95.        atDoc=app.activeDocument=newPic; 
96.        newLayer.obj = atDoc.paste(); 
97.        list.push(newLayer); 
98.    }; 
99.  
100.    //變更圖片大小 
101.    atDoc=app.activeDocument=newPic; 
102.    atDoc.resizeCanvas(width,height,AnchorPosition.TOPLEFT); 
103.  
104.    //變更圖層定位 
105.    for (var i=length-1; i>=0; i--){ 
106.        //關閉複製過的檔案 
107.        app.documents[i].close(SaveOptions.DONOTSAVECHANGES); 
108.  
109.        //移動圖層 
110.        list[i].obj.translate(0,list[i].top); 
111.  
112.        //建立參考線 
113.        if(i>0){ makeGuide(list[i].top,"Hrzn"); } 
114.    }; 
115.  
116.    // 輸出 CSS 定位檔 
117.    var mySavefile = File.saveDialog("輸出 CSS 定位檔","*.css"); 
118.    if(!mySavefile){return}; 
119.    if(mySavefile.exists && !confirm("你確定要覆蓋這個檔案？")){ 
120.        return false; 
121.    } 
122.    // 開啟檔案 
123.    var fileRef = new File(mySavefile); 
124.    if (!fileRef.open("w","","")){ 
125.        alert("無法開啟檔案！！"); 
126.        fileRef.close(); 
127.        return false; 
128.    } 
129.  
130.    // 輸出 CSS 定位設定 
131.    for (var i=0; i<list.length; i++){ 
132.        fileRef.writeln( 
133.            list[i].name+'{ background-position: 0 -'+list[i].top+'px; }' 
134.        ); 
135.    }; 
136.    fileRef.close(); 
137. } 
138.  
139.  
140. //把Photoshop推到最上層 
141. app.bringToFront(); 
142. //設定使用的單位為「像素(Pixel)」 
143. app.preferences.rulerUnits = Units.PIXELS; 
144.  
145. main(); 

// css_sprite_ps-script.jsx
#target photoshop

/** 建立參考線
 * @param {Int} pixelOffSet 偏移像素
 * @param {String} orientation ["Vrtc" => 垂直 ,"Hrzn" => 水平]
 */
function makeGuide(pixelOffSet, orientation) {
    var id8 = charIDToTypeID( "Mk  " );
    var desc4 = new ActionDescriptor();
    var id9 = charIDToTypeID( "Nw  " );
    var desc5 = new ActionDescriptor();
    var id10 = charIDToTypeID( "Pstn" );
    var id11 = charIDToTypeID( "#Rlt" );
    desc5.putUnitDouble( id10, id11, pixelOffSet ); // integer
    var id12 = charIDToTypeID( "Ornt" );
    var id13 = charIDToTypeID( "Ornt" );
    var id14 = charIDToTypeID( orientation ); // "Vrtc", "Hrzn"
    desc5.putEnumerated( id12, id13, id14 );
    var id15 = charIDToTypeID( "Gd  " );
    desc4.putObject( id9, id15, desc5 );
      executeAction( id8, desc4, DialogModes.NO );
}

function main(){
    //判斷是否有開啟圖檔
    if (app.documents.length = 0) {return;}

    //設定前景色為白色
    app.foregroundColor.rgb.hexValue = 'FFFFFF';

    var atDoc;
    var list = [];
    var length = app.documents.length;

    //新增目標圖片文件
    var newPic = app.documents.add(
        1, 1, 72,
        "css_sprite",
        NewDocumentMode.RGB,
        DocumentFill.TRANSPARENT
    );

    var height=0;
    var width = newPic.width;
    //複製所有圖檔至新建立的圖檔
    for (var i=0; i<length; i++){
        atDoc=app.activeDocument=app.documents[i];
  
        //記錄圖層資訊
        var newLayer={
            name:   atDoc.name, //檔名
            width:  atDoc.width,
            height: atDoc.height,
            top:    height
        };

        //累計高度
        height += app.documents[i].height.value;
        //最大寬度
        if(width < atDoc.width){ width=atDoc.width;}
  
        //新增圖層
        var aLayer = atDoc.activeLayer=atDoc.artLayers.add();

        //複製背景底圖
        try {
            atDoc.backgroundLayer.duplicate(aLayer,ElementPlacement.PLACEAFTER);
            atDoc.backgroundLayer.remove();
        } catch (e){}

        //將新圖層與下一層互換
        aLayer.move(atDoc.layers[1],ElementPlacement.PLACEAFTER);

        //標註四周的定位點
        var w=atDoc.width.value, h=atDoc.height.value;
        atDoc.selection.select([[0,0],[1,0],[1,1],[0,1],[0,0]]);
        atDoc.selection.fill(app.foregroundColor)
        atDoc.selection.select([[0,h-1],[0,h],[1,h],[1,h-1],[0,h-1]]);
        atDoc.selection.fill(app.foregroundColor)
        atDoc.selection.select([[w-1,0],[w-1,1],[w,1],[w,0],[w-1,0]]);
        atDoc.selection.fill(app.foregroundColor)
        atDoc.selection.select([[w-1,h-1],[w-1,h],[w,h],[w,h-1],[w-1,h-1]]);
        atDoc.selection.fill(app.foregroundColor)

        //設定透明度
        aLayer.fillOpacity=1;
        //合併可見圖層
        atDoc.mergeVisibleLayers();
        //複製圖層
        atDoc.selection.selectAll()
        atDoc.selection.copy()

        //貼上圖層
        atDoc=app.activeDocument=newPic;
        newLayer.obj = atDoc.paste();
        list.push(newLayer);
    };

    //變更圖片大小
    atDoc=app.activeDocument=newPic;
    atDoc.resizeCanvas(width,height,AnchorPosition.TOPLEFT);

    //變更圖層定位
    for (var i=length-1; i>=0; i--){
        //關閉複製過的檔案
        app.documents[i].close(SaveOptions.DONOTSAVECHANGES);

        //移動圖層
        list[i].obj.translate(0,list[i].top);

        //建立參考線
        if(i>0){ makeGuide(list[i].top,"Hrzn"); }
    };

    // 輸出 CSS 定位檔
    var mySavefile = File.saveDialog("輸出 CSS 定位檔","*.css");
    if(!mySavefile){return};
    if(mySavefile.exists && !confirm("你確定要覆蓋這個檔案？")){
        return false;
    }
    // 開啟檔案
    var fileRef = new File(mySavefile);
    if (!fileRef.open("w","","")){
        alert("無法開啟檔案！！");
        fileRef.close();
        return false;
    }

    // 輸出 CSS 定位設定
    for (var i=0; i<list.length; i++){
        fileRef.writeln(
            list[i].name+'{ background-position: 0 -'+list[i].top+'px; }'
        );
    };
    fileRef.close();
}


//把Photoshop推到最上層
app.bringToFront();
//設定使用的單位為「像素(Pixel)」
app.preferences.rulerUnits = Units.PIXELS;

main();

檔案下載：css_sprite_ps-script.jsx


有對這個興趣的朋友可以參考 PhotoShop 安裝目錄下的 "JavaScript Reference Guide.pdf" 的開發文件，雖然裡面全部都是英文的但還不置於看不懂。