前言：矢量造型 + 像素質感 = 商業級圖標

純 AI 圖標線條乾淨但質感單薄；純 PS 圖標質感豐富但縮放失真。專業商業圖標流程標準是：AI 構建精準矢量骨架 → 導入 PS 賦予材質光影 → 導出多尺寸 PNG/ICO/ SVG。本教程以「網上衝浪」（地球儀）與「回收站」兩枚圖標為例，完整拆解這一跨軟體協作流程。

成品展示

案例一：網上衝浪——地球儀圖標

AI 階段：精準幾何構建

1. 橢圓工具畫正圓（地球本體）。
2. 從網路獲取世界地圖矢量素材（或自繪簡化陸地輪廓），置入圓內，製作剪切蒙版。
3. 圓形套用徑向漸變模擬球體體積光影，添加「投影」效果（外觀面板非破壞性）。
4. 繪製高光/反光路徑（頂部高光、底部環境光反射），填白/淡藍，混合模式「濾色」/「正片疊底」，不透明度微調。
5. 添加細節：經緯線網格、軸傾斜指示器等。
6. 全選 → 複製 → 粘貼到 Photoshop（選擇「形狀圖層」或「智能對象」）。

PS 階段：質感賦能

1. 銳化：矢量轉像素後邊緣可能軟化，「濾鏡」→「銳化」→「USM 銳化」（數量 50-100，半徑 0.5-1），過度銳化處用橡皮擦抹除。
2. 色相/飽和度調整：整體色調統一（如調至品牌標準藍）。
3. 投影/外發光：圖層樣式添加標準投影（距離 2px、大小 3px、不透明度 30%），外發光（螢光藍、螢幕模式）增強科技感。
4. 材質疊加：可選：疊加細微噪點/金屬紋理圖層，混合模式「柔光」/「疊加」，不透明度 5-10%。

案例二：回收站——磨砂半透明質感

AI 階段：結構拆解

將垃圾桶拆解為：桶身、蓋子、腳、內部雜物（A層）等獨立矢量圖層，保持結構清晰，導入 PS 保留圖層結構（匯出 PSD）。

PS 階段：磨砂半透明核心技法（第 7 步精華）

1. 內部雜物圖層（A）複製一層（B）。
2. 圖層 B 執行「濾鏡」→「模糊」→「高斯模糊」（半徑視尺寸而定，如 3-5px）。
3. 降低圖層 B 不透明度（如 30%），產生霧化感。
4. 圖層 A：添加圖層蒙版，用黑色筆刷擦除被桶身玻璃遮擋的部分（即桶壁後方的雜物不應顯示）。
5. 圖層 B：添加圖層蒙版，用黑色筆刷擦除桶身玻璃區域（露出玻璃本身的透明/折射感）。
6. 合併 A+B 圖層，得到「既有雜物輪廓、又有磨砂模糊、又正確遮擋關係」的內部效果。

跨軟體協作黃金法則

環節	AI 負責	PS 負責	關鍵交付物
造型	精準矢量路徑、布爾運算、對齊網格	—	形狀圖層/智能對象/PSD 圖層結構
色彩	全局色板、扁平基礎色	色階/曲線/色相飽和度精修、品牌色校準	統一色值規範
光影	基礎漸變、高光路徑	體積光、環境光遮蔽、次表面散射模擬	光源方向/強度/色溫規範
材質	—	噪點、紋理、倒角高光、磨砂/玻璃/金屬質感	材質圖層/智能濾鏡預設
輸出	SVG/矢量源文件	多尺寸 PNG (16/24/32/48/64/128/256/512/1024)、ICO、WebP	交付包 + 設計規範文檔

避坑指南

• AI→PS 複製粘貼選「形狀圖層」：保留矢量可編輯性；選「像素」則不可逆。
• 銳化必須局部控制：全圖銳化會產生邊緣光暈，必須配合蒙版/橡皮擦局部處理。
• 圖層命名規範：`Base_Shape`、`Highlight_Top`、`Shadow_Contact`、`Texture_Noise`，PS 接手即懂。
• 智能對象雙向編輯：PS 中雙擊智能對象圖層縮圖，自動跳回 AI 編輯矢量，存檔即同步更新 PS，極大減少來回導出。

總結

商業圖標設計不是「畫個好看的圖」，而是「構建一套可縮放、可維護、可多端輸出的視覺資產系統」。AI 負責「骨架與邏輯」，PS 負責「血肉與質感」，兩者通過智能對象/PSD 圖層無縫銜接，才是專業團隊的標準作業流程 (SOP)。