從空白畫布到專業級導航欄，展示「參考線佈局 → 形狀圖層建模 → 圖層樣式疊加質感 → 組管理蒙版漸變」的標準化 UI 設計流程。

文件與基礎結構

1. 1000×750 px，背景層轉普通圖層，色彩疊加 #47382e。
2. 視圖 > 標尺 拖參考線定義導航區域、分割線位置。
3. 矩形工具繪製導航背景條（命名 header），橢圓工具繪製陰影橢圓置於 header 下方，轉智能濾鏡 → 高斯模糊 10 px、不透明度 60%。

質感疊加

4. header 層添加「漸層疊加」模擬金屬/陶瓷質感（參見圖參數）。
5. 直線工具繪製 1px 紅線 + 1px 黑線 = 3D 分割線，編組命名 vDivider，添加圖層蒙版，徑向漸層（黑→白）由上而下拉出漸隱效果。
6. 文字工具輸入導航標籤（白色），編組 White Links。複製組，文字改黑，上移左移 1px 形成 3D 字體描邊。
7. 水平分割線同法製作，編組 hDividers，蒙版線性漸層（黑→白）控制顯示範圍。

紋理細節

8. 存入紋理圖片 → 編輯 > 定義圖案 命名 webPattern。
9. 複製 header 層命名 pattern，關閉漸層疊加，開啟「圖案疊加」選 webPattern，添加蒙版徑向漸層控制紋理顯示範圍。

工作流優勢

• 全矢量形狀 + 圖層樣式 + 智能濾鏡 = 無限縮放、參數可改、風格統一。
• 組 + 蒙版管理複雜結構，團隊協作清晰易維護。