萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 軟體知識 >  >> 影像處理 >> Adobe Illustrator 教學

Illustrator 繪製逼真球形按鈕 UI 圖標教學

純用橢圓工具、漸層、透明度混合模式、路徑查找器,在 Illustrator 中繪製出具有玻璃/塑膠質感、高光反射、陰影深度的 3D 球形按鈕。適合 UI 圖標、App 圖示、網頁按鈕設計。

最終效果

分層構建邏輯(共 3 圖層)

圖層 1:底部球體主體

  1. 畫 205mm 正圓,線性漸層 -90°(上亮下暗),模擬球體基本明暗。
  2. 複製置前,縮放為 175mm,漸層角度 90°(反向),形成內凹邊緣高光。
  3. 最內層 175mm 黑圓,做深度遮罩。
  4. 選中黑圓與最外圓,路徑查找器 → 減去前面,得環狀高光帶,混合模式「疊加」,不透明度 50%。

圖層 2:頂部高光與倒影

  1. 畫 200mm 紅圓(暫時色),置中對齊。
  2. 複製置前,綠圓上移錯位,路往查找器 → 減去前面,得月牙形高光區。
  3. 線性漸層 135°,混合模式「螢幕」,不透明度 50%。

圖層 3:內部細節與頂部反光

  1. 新圖層,畫 160mm 藍圓 (C90 M90),混合模式「正片疊底」。
  2. 複製置前,效果 → 風格化 → 內發光(正常、75%、12px)。
  3. 再複製,灰色 (K40),縮放 94%。
  4. 再複製,任意色上移錯位,減去前面 得細高光環,混合模式「螢幕」20%。
  5. 再複製,徑向漸層(白→透明),混合模式「螢幕」25%。
  6. 畫 90×65mm 橢圓白色,旋轉 -25°,混合模式「柔光」40%,置於頂部側面。
  7. 補充小橢圓/小圓白色高光點綴,群組。

關鍵混合模式速查

層級模式不透明度作用
環狀高光帶疊加50%增強邊緣立體感
月牙高光螢幕50%頂部強高光
藍色基底正片疊底100%著色基調
內發光層正常75%內部光暈
細高光環螢幕20%銳利邊緣光
徑向漸層螢幕25%柔和頂光
側面柔光柔光40%環境反射

可擴展性

  • 顏色變體:僅修改圖層 3 藍色基底色相,全套按鈕換色秒成。
  • 狀態變體:懸停/按下/禁用,調整高光層不透明度/漸層對比即可。
  • 尺寸縮放:全矢量,任意尺寸輸出不失真。

此「分層疊加混合模式」法,是矢量軟體模擬 3D 材質的核心範式,舉一反三可做球體、胶囊、水滴等各類有機體積圖標。

copyright © 萬盛學電腦網 all rights reserved