《Cyotek Spriter》將多張小圖合併成一張，並產生CSS碼

　　一般在設計網頁時，都會利用CSS來設定一些標籤圖示，讓畫面變得更有特色，所以這時候在設計版型時，就會依照各區塊，設計不同的小圖示，最後再利用分割工具，將圖示一一的分割出來，因此當今天頁面有一、二十個標籤圖示時，就會有一、二十個檔案，雖然這些檔案都很小，看起來好像沒什麼，但今天當有一位瀏覽者，在觀看網頁時，就會向主機請求十幾次，若有上百人或上千人時，那對於主機還會造成不少的負擔，因此這時候就得再將這些圖示，全部整合在一張裡，這時就得再一一重新抓取圖示位置，所以許多網頁設計師，都會很懶的這麼做，但現在不用有更簡單的做法啦！直接透過Cyotek Spriter，就會自動將多張圖片組合在同一頁面中，同時還會主動將這些圖示的位置產生CSS的語法，因此要用時，只要直接拷貝下來就可使用囉！相當的方便喔！

---

Cyotek Spriter ：

---

Step1
下載完畢，解壓縮雙響spriter.exe，接著將網站的小圖，直接拖拉到spriter視窗中。

---

Step2
放開滑鼠後，spriter就會將全部的圖示組合在同一個頁面中，這時透過右邊可設定圖檔的排序方式，以及圖片的大小。

---

Step3
將下方的頁籤切到CSS，就會看到程式已將每張小圖的長、寬，以及位置都給抓取出來了。

---

Step4
接著切到Preview頁籤，就會看到所有的圖示，再點上方的Export圖示，將檔案輸出。

---

Step5
依續的設定CSS、html、圖片的檔名。

---

Step6
這樣就輸出完成了。

---

Step7
馬上到剛所設定的輸出位置，就會看到三個檔案，但只要保留圖片與CSS檔就可以了。

---

Step8
之後要用時，只要直接拷貝CSS中的語法就行了，真的是挺方便的。