用 PhotoShop JSX 製作 CSS Sprite 的使用方法

自從上一篇 利用 PhotoShop 製作 CSS Sprite 發佈後我又改了 JSX 好幾次，現在終於修到讓我自己滿意了，順便來寫一下使用方法。

由於我的 PhotoShop 是 CS2 的，太舊的版本可能會沒有 Script 的功能，在這裡先聲明一下。

檔案連結：css_sprite_ps-script.jsx

1. 先將所有需要組合的圖檔開啟
   
   
   
2. 選擇『檔案 -> 指令碼 -> 瀏覽』
   
   
   
3. 選擇下載後的 css_sprite_ps-script.jsx
   
   
   
4. 接著馬上會要你選擇一個要參考的原始 CSS，這裡會解析你原本的樣式名稱跟檔案對應，當然不選也沒關係。
   解析 CSS 是用正規表示式去解析的，可能要花一點時間，我餵了一個兩千行的 CSS file 都還可以正常執行，再多我就不敢保證了。
   
   
   
5. 我原始的 CSS 看起來像是這樣，當然稍微複雜一點內容應該也沒問題。
   
   
   
6. 在圖片處理完後，會要選擇一個輸出定位的 CSS file
   
   
   
7. 輸出的內容看起來會像是這樣
   
   
   
8. 最後再將製作完成的圖檔存成自己需要的格式就可以了