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

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

Cyotek Spriter :
軟體名稱:Cyotek Spriter
軟體版本:v1.0.4.2.7
軟體語言:英文
適用平台:Windows XP+
官方網站:http://cyotek.com/cyotek-spriter
軟體下載:本站下載 | 官方下載

Step1
下載完畢,解壓縮雙響spriter.exe,接著將網站的小圖,直接拖拉到spriter視窗中。
梅問題-CSS工具-Cyotek Spriter將多張小圖合併成一張
Step2
放開滑鼠後,spriter就會將全部的圖示組合在同一個頁面中,這時透過右邊可設定圖檔的排序方式,以及圖片的大小。
梅問題-CSS工具-Cyotek Spriter將多張小圖合併成一張
Step3
將下方的頁籤切到CSS,就會看到程式已將每張小圖的長、寬,以及位置都給抓取出來了。
梅問題-CSS工具-Cyotek Spriter將多張小圖合併成一張
Step4
接著切到Preview頁籤,就會看到所有的圖示,再點上方的Export圖示,將檔案輸出。
梅問題-CSS工具-Cyotek Spriter將多張小圖合併成一張
Step5
依續的設定CSS、html、圖片的檔名。
梅問題-CSS工具-Cyotek Spriter將多張小圖合併成一張
Step6
這樣就輸出完成了。
梅問題-CSS工具-Cyotek Spriter將多張小圖合併成一張
Step7
馬上到剛所設定的輸出位置,就會看到三個檔案,但只要保留圖片與CSS檔就可以了。
梅問題-CSS工具-Cyotek Spriter將多張小圖合併成一張
Step8
之後要用時,只要直接拷貝CSS中的語法就行了,真的是挺方便的。
梅問題-CSS工具-Cyotek Spriter將多張小圖合併成一張

相關文章

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3動畫hover套件,各種常用的互動特效直接套用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。