跨軟件協作打造逼真 UI 圖標

本教程演示 Illustrator 矢量建模與 Photoshop 材質渲染的標準化協作流程，完成一枚具備金屬質感、發光指示器、立體倒角的高科技電源按鈕。涵蓋旋轉複製、路徑布爾運算、圖層樣式疊加等核心技法，適用於 UI 圖標、遊戲資產、產品演示圖製作。

階段一：Illustrator 矢量骨架構建 (步驟 1-19)

基礎幾何與錨點雕刻

矩形工具繪製 100×120px 基礎形，鋼筆工具添加頂部中點錨點，直接選擇工具上拉形成弧頂。關鍵：保持對稱結構，使用垂直參考線輔助。

旋轉複製構建三葉結構

1. 旋轉工具 (R) 按 Alt 點擊底部中心點設定旋轉中心
2. 對話框設置 120°，點擊「複製」生成第二葉
3. Ctrl+D 重複變換獲得第三葉
4. 路徑查找器「聯集」合併為單一複合路徑

倒角處理與層級分離

效果 > 風格化 > 圓角 (10px) → 對象 > 擴展外觀 → 獲得圓角外輪廓。同法製作內層按鈕面 (縮小比例) 與指示燈圓環。關鍵：每個邏輯部件獨立圖層命名 (btn_base, btn_face, led_ring 等)。

鏡像複製完善細節

按鈕側面細節：繪製半側輪廓 → 選中 → 鏡像工具 (O) 按 Alt+Shift 點擊中心軸 → 複製翻轉 → 路徑查找器合併 → 同 120° 旋轉複製形成三面側壁。

階段二：Photoshop 材質渲染與光影塑造 (步驟 20-71)

場景搭建與基礎光影

新建 1024×768px 文檔，背景填 #000。圖層樣式「漸變疊加」：徑向 #333333 到 #000000，縮放 140%，營造暗部漸變底。將 AI 複製的矢量形狀粘貼為「形狀圖層」，而非智能對象，保留矢量可編輯性。

圖層拆分與命名規範

複製主形狀圖層 4 次，分別保留：主按鍵本體、按鍵斜面、指示燈環、背景倒角。命名規範：btn_main, btn_bevel, led_ring, bg_bevel。組建圖層組 Button_Assembly。

核心圖層樣式參數解析

圖層	關鍵樣式	關鍵參數
主按鍵	漸變疊加	徑向 #333333→#000000, 120%, 不透明度 0% (僅作遮罩基礎)
	內陰影	正片疊底, -90°, 距離 3px, 擴展 0, 大小 8px
按鍵斜面	描邊	3px, 外部, 角度漸變 #4A4A4A→#1A1A1A, 角度 90°
	斜面與浮雕	描邊浮雕, 平滑, 深度 100%, 大小 5px, 軟化 2px
	內發光	正片疊底, 黑色, 20%, 來源邊緣, 擴展 60, 大小 10
指示燈	填充	#06B9FB (青藍)
	外發光	線性減淡, #06B9FB, 75%, 大小 15px
	斜面與浮雕	外描邊浮雕, 平滑, 深度 100%, 方向上, 大小 3px

手繪高光細節 (步驟 34-39)

關鍵技法：載入形狀選區 → 修改 > 收縮 10px → 羽化 1px → 新建圖層 → 白色軟邊畫筆 (35px, 流量 10%) 手繪頂部高光 → 再次收縮 3px/羽化 1px 疊加更亮高光 → 刪除溢出區域。此非破壞性手繪比單純圖層樣式更自然。

背景倒角與氛圍燈效

導入 AI 背景倒角形狀 → 填充 0% → 描邊 1px/35% 不透明度/正片疊底 → 投影濾色模式 → 橢圓選區羽化 20px 添加向量蒙版隱藏多餘部分，形成若隱若現的環形倒角暗示空間纵深。

專業輸出建議

• 智能對象工作流：PS 中將矢量轉為智能對象，雙擊編輯回 AI 修改幾何，PS 自動更新渲染
• 圖層合成組：按「基礎幾何」、「材質樣式」、「手繪細節」、「後期調色」四組管理，便於版本迭代
• 多狀態導出：分別導出「默認態」、「懸停態 (指示燈亮)」、「按下態 (內陰影加深)」三態 PNG 序列
• 規格適配：@1x, @2x, @3x 三規格同時輸出，命名規範 btn_power_default@2x.png

避坑指南

⚠ AI 旋轉複製中心點必須精確對齊幾何中心，否則三葉間隙不均
⚠ PS 圖層樣式「全域光」務必取消勾選，各圖層獨立設置光源角度
⚠ 手繪高光圖層混合模式設為「柔光」或「疊加」而非「正常」
⚠ 導出前檢查 100% 視圖下無像素級毛邊、色帶