【電腦教學】動態游標的製作與如何修改CSS語法自訂游標！
【難易度】：●●●○○
【須具備基礎】：簡易繪圖概念、熟悉電腦操作、CSS語法略懂！
※以上不懂沒差！看完我的教學大概就懂了！哈哈~~~
【撰寫理由】：
雖然這類的文章算是古董文之一的游標教學
但是阿龍我呢還是要雞婆的在寫上個一篇！
【本文】：
為了要讓大家對滑鼠有進一步的認識
在寫這些之前呢大家應該要對滑鼠游標有些基礎的認知！
首先介紹滑鼠游標支援的格式有哪些！！
*.cur(靜態低)、*.ani(動態的)
大致上分成以上兩種格式
接著就要跟大家介紹一下使用的軟體
Microangelo！這是一套好幾年前就出來的軟體呢！
再高中時代我就看過他了，只是好幾年沒有關心過他！
這次我以5.0為範例製作ANI格式的滑鼠
以下提供官方連結！大家可以去下載試用喔！
另外網路上也有提供很多的中文化！可以下載！
軟體的介面因為本篇文章為動態滑鼠製作所以我就簡單的介紹Animator就好
介面大致上長成這樣！
首先呢！先介紹軟體的四大編輯工具個部位的功能
第一個是本體
在1.編輯區內深藍色的部為就是透明色的意思
在這也就是我們主要編輯滑鼠圖案的地方囉！
在來是介紹2.影格區顧名思義，這裡放的正是我們的主角圖片！
所謂的動畫呢！就是把一格一格的影像串器來做個撥放！
就會形成很像在動的畫面！SO~~~製作動態滑鼠游標的道理是一樣的！
上面這範例就是我在製作我部落格滑鼠游標的設定資料
由四張圖片組成每張停頓 5 jifs，至於什麼是jifs呢？網路上我也找不到解答呢！
但是大致上就是延遲時間的意思啦！希望圖片跳動的快速點就設定短一點！
希望圖片慢慢的動作很細的話就設定長一點！
當然用講的不准，實際操作後就會深有感觸了！
3.編輯工具區
4.標準工具列
滑鼠感應點：就是滑鼠的頂端的意思，也就是箭頭所指的地方，如果想要改變的話就要使用這個工具來修改囉！
圖形翻轉：看箭頭往哪轉，按一下圖案就往那個方向轉。
滑鼠左、右鍵顏色：在這編輯軟體中滑鼠的左、右鍵都可以著色喔！這就是設定預設顏色的地方！
接下來要介紹色盤，
色盤中有幾個比較特殊的地方就是透明色，
一般來說我們設定透明色的目的就是不希望看到滑鼠是一個框框的形狀，
而把背景的部分去除掉，但是在顏色中去除掉顏色的部分就會變成白色的！
SO~~此工具就是把顏色確實的拿掉變成透明色喔！
另外色盤還有一個很貼心的設計就是漸層色！
使用者可以把自己喜歡的兩個顏色填入左右很像漏斗的圖案中，下面的方格就會算出12皆的漸層色！
是個很方便的設計呢！
預覽視窗
這是製作過程中，如果想要先預視做出來的滑鼠長相，就點下面的Play鍵吧！
就可以搶先預覽喔！
接著就開始來設計滑鼠了！
首先找一張想要放入的圖案，修成自己想要的比例(或自己手工製作)
然後先把原始檔案做去背景處理！
關於去背景處理請參考
photoshopCS實戰-去背景教學
處理完畢後就匯入圖片吧！
然後呢就使用右上方的新增影格，我建議一次增加完畢想要的影格數在來修改比例會比較好調整！
然後一張圖接著一張圖片的修改！修改完成後！
預覽一下完整的設計圖！
記得要調整一下jifs喔！順便預覽一下讓滑鼠更自然點！
最後在另存新檔，上傳致網頁空間，滑鼠游標就算是製作完成了！
接著要講解CSS語法的部分了！
CSS語法簡單來說他就是控制你網頁東西擺哪！要用什麼樣子呈現的一個文件檔案！
上面記載著設定值！SO~~~滑鼠圖案也是控制項目之一！
因為篇幅的關係，恕不詳述囉！
我直接講解語法的部分！
接著我們以Y牌部落格為例！其他部落格做法大同小異！只要你找得到CSS樣式表就可以改！
我們要的就是這一小段
/*Background*/
body{
background:#424C65 url(http://tw.yimg.com/i/tw/blog/css/cat4_3/cat4_3.jpg) no-repeat;
CURSOR:URL(http://ryuadmin.myweb.hinet.net/webmusic/pink.ani);}
A:hover{CURSOR:URL(http://ryuadmin.myweb.hinet.net/webmusic/pink.ani);}
一般打開樣式表後看到的是沒有這兩行粗體字的,所以這部分要自己手動加上喔！
這兩行的意思呢就是！
cursor:URL(滑鼠游標放置的網路位置);}←指定滑鼠游標的圖案
A:hover{CURSOR:URL(滑鼠游標的網路位置)}←指定滑鼠移動到超連結上的圖案
※此處要注意符號的位置不可打錯喔！否則不會成功
如果以上都能理解的話！恭喜你
你已經會修改自己的滑鼠囉！
快去為你的部落格增添點自己的風格吧！
【難易度】：●●●○○
【須具備基礎】：簡易繪圖概念、熟悉電腦操作、CSS語法略懂！
※以上不懂沒差！看完我的教學大概就懂了！哈哈~~~
【撰寫理由】：
雖然這類的文章算是古董文之一的游標教學
但是阿龍我呢還是要雞婆的在寫上個一篇！
【本文】：
為了要讓大家對滑鼠有進一步的認識
在寫這些之前呢大家應該要對滑鼠游標有些基礎的認知！
首先介紹滑鼠游標支援的格式有哪些！！
*.cur(靜態低)、*.ani(動態的)
大致上分成以上兩種格式
接著就要跟大家介紹一下使用的軟體
Microangelo！這是一套好幾年前就出來的軟體呢！
再高中時代我就看過他了，只是好幾年沒有關心過他！
這次我以5.0為範例製作ANI格式的滑鼠
以下提供官方連結！大家可以去下載試用喔！
另外網路上也有提供很多的中文化！可以下載！
軟體的介面因為本篇文章為動態滑鼠製作所以我就簡單的介紹Animator就好
介面大致上長成這樣！
首先呢！先介紹軟體的四大編輯工具個部位的功能
第一個是本體
在1.編輯區內深藍色的部為就是透明色的意思
在這也就是我們主要編輯滑鼠圖案的地方囉！
在來是介紹2.影格區顧名思義，這裡放的正是我們的主角圖片！
所謂的動畫呢！就是把一格一格的影像串器來做個撥放！
就會形成很像在動的畫面！SO~~~製作動態滑鼠游標的道理是一樣的！
上面這範例就是我在製作我部落格滑鼠游標的設定資料
由四張圖片組成每張停頓 5 jifs，至於什麼是jifs呢？網路上我也找不到解答呢！
但是大致上就是延遲時間的意思啦！希望圖片跳動的快速點就設定短一點！
希望圖片慢慢的動作很細的話就設定長一點！
當然用講的不准，實際操作後就會深有感觸了！
3.編輯工具區
4.標準工具列
滑鼠感應點：就是滑鼠的頂端的意思，也就是箭頭所指的地方，如果想要改變的話就要使用這個工具來修改囉！
圖形翻轉：看箭頭往哪轉，按一下圖案就往那個方向轉。
滑鼠左、右鍵顏色：在這編輯軟體中滑鼠的左、右鍵都可以著色喔！這就是設定預設顏色的地方！
接下來要介紹色盤，
色盤中有幾個比較特殊的地方就是透明色，
一般來說我們設定透明色的目的就是不希望看到滑鼠是一個框框的形狀，
而把背景的部分去除掉，但是在顏色中去除掉顏色的部分就會變成白色的！
SO~~此工具就是把顏色確實的拿掉變成透明色喔！
另外色盤還有一個很貼心的設計就是漸層色！
使用者可以把自己喜歡的兩個顏色填入左右很像漏斗的圖案中，下面的方格就會算出12皆的漸層色！
是個很方便的設計呢！
預覽視窗
這是製作過程中，如果想要先預視做出來的滑鼠長相，就點下面的Play鍵吧！
就可以搶先預覽喔！
接著就開始來設計滑鼠了！
首先找一張想要放入的圖案，修成自己想要的比例(或自己手工製作)
然後先把原始檔案做去背景處理！
關於去背景處理請參考
photoshopCS實戰-去背景教學
處理完畢後就匯入圖片吧！
然後呢就使用右上方的新增影格，我建議一次增加完畢想要的影格數在來修改比例會比較好調整！
然後一張圖接著一張圖片的修改！修改完成後！
預覽一下完整的設計圖！
記得要調整一下jifs喔！順便預覽一下讓滑鼠更自然點！
最後在另存新檔，上傳致網頁空間，滑鼠游標就算是製作完成了！
接著要講解CSS語法的部分了！
CSS語法簡單來說他就是控制你網頁東西擺哪！要用什麼樣子呈現的一個文件檔案！
上面記載著設定值！SO~~~滑鼠圖案也是控制項目之一！
因為篇幅的關係，恕不詳述囉！
我直接講解語法的部分！
接著我們以Y牌部落格為例！其他部落格做法大同小異！只要你找得到CSS樣式表就可以改！
我們要的就是這一小段
/*Background*/
body{
background:#424C65 url(http://tw.yimg.com/i/tw/blog/css/cat4_3/cat4_3.jpg) no-repeat;
CURSOR:URL(http://ryuadmin.myweb.hinet.net/webmusic/pink.ani);}
A:hover{CURSOR:URL(http://ryuadmin.myweb.hinet.net/webmusic/pink.ani);}
一般打開樣式表後看到的是沒有這兩行粗體字的,所以這部分要自己手動加上喔！
這兩行的意思呢就是！
cursor:URL(滑鼠游標放置的網路位置);}←指定滑鼠游標的圖案
A:hover{CURSOR:URL(滑鼠游標的網路位置)}←指定滑鼠移動到超連結上的圖案
※此處要注意符號的位置不可打錯喔！否則不會成功
如果以上都能理解的話！恭喜你
你已經會修改自己的滑鼠囉！
快去為你的部落格增添點自己的風格吧！
全站熱搜
留言列表
