2010-09-12

用 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. 最後再將製作完成的圖檔存成自己需要的格式就可以了

0 回應: