Illustrator-外觀、繪圖樣式-網頁、按鈕-首圖    

 

【Illustrator好簡單工具─外觀】

網頁用立體按鈕! [點我下載範例]

想要替自己的網頁,增添具有立體效果的按鈕,利用Illustrator外觀面版效果一級棒!

Illustrator-外觀、繪圖樣式-網頁、按鈕-完成圖 

  Illustrator-外觀、繪圖樣式-網頁、按鈕:重新上色  

 

 

-----------------------------------------------------------------------------------------------------------------------------------------

Step 1.

先繪製一般填色的基礎型[藍色填色(按鈕基底色)

Illustrator-外觀面版  01.JPG





 

-------------------------------------------------------------------------------------------------------------------

Step 2.

(A). 在外觀面版中,新增一組填色,排列順序位於[藍色填色]下方,

  並填入如下圖[漸層色票(按鈕外圍)


Illustrator-漸層面板    
 

(B). 在效果選項>> 路徑>> 位移複製
 

 Illustrator-外觀面版Illustrator-路徑、位移複製

 02-01.jpg       

 

 

 

-------------------------------------------------------------------------------------------------------------------

Step 3.

(A). 再新增一組填色,並將色票改為色票面版中的[圖樣色票(按鈕裡面的花樣)

(B).將此圖樣色票的外觀面版圖層,不透明度改為  “25%色彩混合模式為"色彩加亮" ”
 。

 Illustrator-外觀面版、透明度、色彩模式 

Illustrator-色票面版  03.JPG



 

-------------------------------------------------------------------------------------------------------------------

Step 4.

(A). 再新增一組填色,並將色票改為如下圖[漸層色票(按鈕上半部光感)。 

  ※漸層色票請填兩個淡藍色色塊,透明度:淡藍色起點=
100%、淡藍色尾端=0%,為放射狀漸層。 
 

(B).將此漸層色票的外觀面版圖層,不透明度改為  “45%色彩混合模式為"色彩加亮" ”

   Illustrator-漸層Illustrator-放射狀、漸層、圖樣


 Illustrator-外觀面板、透明度、色彩模式04.JPG

 

 


-------------------------------------------------------------------------------------------------------------------

Step 5.

(A). 再新增一組填色,並將色票改為如下圖[漸層色票(按鈕周圍的陰影)。 

  ※漸層色票請填兩個顏色,透明度:白色起點=
0%、深藍色尾端=100%。 

  ※為放射狀漸層,由中心往外

 

(B).將此漸層色票的外觀面版圖層,不透明度改為  “90%色彩混合模式為"色彩增值" ”



  Illustrator-放射狀、漸層  Illustrator-外觀面版、網頁、立體按鈕

Illustrator-外觀面版

 





-------------------------------------------------------------------------------------------------------------------

Step 6.

(A). 再新增一組填色,並將色票改為如下圖[漸層色票(按鈕右上反光點)。 

  ※漸層色票請填兩個白色,透明度:白色起點=
100%、白色尾端=0%。 

  ※為放射狀漸層。

 

(B).將此漸層色票的外觀面版圖層,不透明度改為  “75%色彩混合模式為"色彩加亮" ”

  Illustrator-漸層面板 Illustrator-外觀面版、網頁、立體按鈕、繪圖樣式 

Illustrator-外觀面板、透明度、色彩模式 Illustrator-外觀面版、網頁、立體按鈕、繪圖樣式


 


-------------------------------------------------------------------------------------------------------------------

Step 7補充說明.

我們可以將作好的按鈕,儲存起來,套用到其他物件上,又或者改變按鈕顏色。

 

(A). 在視窗選項>> 繪圖樣式面板 。 

  ※選取作好的按鈕,在繪圖樣式面板的右下角,點選新增鍵,即可儲存樣式。
 
  ※可重新套用到其他形狀的按鈕 。
Illustrator-外觀面版、網頁、立體按鈕、繪圖樣式   


 

(B).編輯選項>> 編輯色彩>> 重新上色圖稿 
  
  ※選取作好的按鈕,利用重新上色圖稿面版,調整多色按鈕。


Illustrator-編輯、編輯色彩、重新上色圖稿

Illustrator-外觀面版、網頁、立體按鈕、繪圖樣式、重新上色圖稿  

 

創作者介紹
創作者 一二珊躲支喵 的頭像
一二珊躲支喵

一二珊躲支喵

一二珊躲支喵 發表在 痞客邦 留言(2) 人氣()


留言列表 (2)

發表留言
  • 水淬
  • 好開心阿~我畫出來了~
  • 華
  • 謝謝你的教學分享~