Illustrator 第四堂

終於補完了！

這次的練習：國旗 x 太極 x 鏡面按鈕 x 果凍圖示 x 眼曈
主要重點：路境管理員、漸層、外觀面板 (Appearance)

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

• 國旗
  十二道光芒的星星尖點朝上
  星星半徑1：半徑2 = 1：2
  使用路徑管理員切開後合併

• 太極
  參考線 + 座標控制，不可有誤差值
  做法跟之前的圓圈圈類似，使用路徑管理員切開後合併

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

漸層可以用明暗造成視覺錯視，製造出立體感。

• 範例：Neostream
  某個澳洲遊戲公司的舊網站，是用Flash做的，所以用手機的話看不到。
  除了小人是用3D做的，其他動畫中的立體感都是用色塊與漸層做的。

製作漸層的工具：

• 漸層工具
  有線性漸層和同心圓漸層

• 漸變工具
  點到點漸變顏色與形狀
  如果要做會變彎的漸層用這個工具做

• 網格工具
  從網格的點或面積上填色
  漸變到點 (面) 到下一個點 (面) 顏色 100% -> 0%
  最難控制的一個工具，要對色彩敏銳才行

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

今天的練習，後來主要以漸層為主：

• 鏡面按鈕
  可以將漸層存到色彩面板 (swatches) 裡，下次方便套用。
  

• 果凍圖示
  
  
  亮點偏下面的同心圓漸層圓形 + 橢圓形把下面的點移上去一點，白到黑漸層
  =>用色彩模式 覆蓋 (Screen) 混合
  
  通常用於像素小於30px的圖示。
  
  
     
  (30px)      (20px)    (10px)
  
  如果使用漸層到透明的方式做只支援 CS6 以上的版本，
  用這個方式做各個版本就不會有問題。
  
  範例：Apple官網的國家圖示
  
  

• 眼曈
  
  
  1. 先做一個外黑內白同心圓漸層的圓型
  2. 在Appearance複製填色 fx -> 路徑 (path) -> 位移複製 (offset path)
  3. 做出小一點的外黑內彩色同心圓漸層的圓型
  4. 重複2，做出更小的黑色圓型 (瞳孔)
  5. 重複2，做出最小的白色圓型 (反光)
      Appearance -> fx -> Distrol & transform -> transform -> 調整move
                          -> fx -> photoshop effects -> Blur -> 高斯模糊
  
  *** Appearance 裡的東西可以放到 graphic style 裡存起來下次用 ***
         (但套用的尺寸相似才會有比較好的效果)

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

• UI (使用者介面) 範例參考
  1. 關鍵字搜尋「UI Kit」
  2. Ui Parade

• App圖示的大小有固定的尺寸
• 通常不同大小圖示的圖案可能會需要調整
  因為太小的無法表現細節，太大的細節可能會不夠精細