晶格化風格 ICON 以其幾何秩序感與光影質感，廣泛應用於 App 圖標、UI 圖示、品牌視覺。本教程拆解「向量基礎形狀 → 漸變填充 → 圖案定義 → 圖層樣式疊加 → 剪影疊加 → 投影收尾」的標準化繪製流程，零繪畫基礎也能產出專業級晶格圖標。

步驟一：建立畫布與基礎形狀

1. 新建文件：800×800px、72dpi、RGB、透明背景（或填充深色背景便於觀察）。
2. 使用「圓角矩形工具」/「橢圓工具」/「多邊形工具」繪製 ICON 基礎外形（如相機、音箱、雲朵等），路徑模式，命名「基礎形狀」。
3. 為形狀添加「漸變疊加」圖層樣式：線性/徑向漸變，2-3 個色標，模擬光源方向立體感。

步驟二：製作晶格紋理圖案

1. 新建文件：200×200px、透明背景。
2. 新建圖層，隱藏背景層。使用「矩形選框工具」按網格規律建立選區（如 20px 間距），Alt+Delete 填充白色/淺灰。
3. 或使用「自定義形狀工具」選「網格/點陣」形狀繪製。
4. 「編輯 > 定義圖案」，命名「晶格紋理」。

步驟三：疊加晶格紋理與剪影細節

1. 回到 ICON 文件，「基礎形狀」圖層右鍵「混合選項」，勾選「圖案疊加」，選擇剛定義的「晶格紋理」，縮放 50-100%，不透明度 30-60%，混合模式「疊加/柔光」。
2. 新建圖層組「剪影細節」，在基礎形狀內繪製簡化剪影（如相機鏡頭環、音箱網格、雲朵輪廓），填充深色，添加「斜面浮雕」增加厚度感。
3. 為剪影圖層組添加「投影」：距離 3-5px、大小 5-10px、不透明度 30-50%，模擬懸浮感。

步驟四：變體擴展與規範輸出

• 顏色變體： 修改「漸變疊加」色標，一鍵產出多配色版本。
• 形狀變體： 替換「基礎形狀」矢量路徑（圓/方/六邊形），晶格紋理自動適配。
• 輸出規範： 導出 @1x/@2x/@3x PNG（iOS）、WebP (Android)、SVG (矢量源文件)，命名規範：icon_camera_crystal_@2x.png。

設計原理解析

視覺要素	實現手段	心理效應
幾何秩序	矢量基礎形狀 + 規則晶格網格	專業、科技、可信
光影質感	漸變疊加 + 斜面浮雕 + 投影	立體、可觸、高級
細節密度	剪影圖標 + 紋理疊加	資訊豐富、值得探索
擴展性	參數化圖層樣式 + 智能物件	設計系統友好、維護低成本

掌握此流程，你擁有了「無限生成晶格風 ICON」的產能模型。下一步嘗試：將晶格紋理替換為「線條/點陣/三角剖分」圖案，衍生更多幾何風格變體。