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

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

Step2

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

Step3

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

Step4

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

Step5

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

Step6

這樣就輸出完成了。

Step7

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

Step8

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