設計目標與結構拆解
目標：繪製具備金屬拉絲質感托盤、自定義斜線紋理填充、高光/陰影/倒角細節、標籤區域的精致圖標。核心技法：圓角矩形矢量形狀+圖層樣式金屬質感 → 自定義 4×4px 斜線圖案定義 → 蒙版漸變控制紋理顯示範圍 → 鋼筆路徑勾勒高光/倒角 → 矩形+多邊形構建底座標籤區。全流程矢量非破壞，支援無限縮放。
步驟 1：托盤基礎形狀與金屬樣式
- 新建 600×200 px 文件
- 圓角矩形工具（U）→ 選項欄：形狀、半徑 10-15px、填充任意色、描邊無
- 繪製圓角矩形 → 圖層命名「托盤底」
- 圖層樣式構建金屬拉絲質感：
| 樣式 | 關鍵參數 |
|---|
| 斜面與浮雕 | 外斜面、平滑、深度 180%、方向向上、大小 8px、柔化 2px、高光模式線性減淡(白, 70%)、陰影模式正片疊底(深灰, 50%)、輪廓「環形」 |
| 內陰影 | 距離 3px、大小 5px、噪點 3%、顏色深灰 |
| 漸變疊加 | 線性、角度 90°、色標：上 #cccccc → 中 #f0f0f0 → 下 #aaaaaa（模擬金屬彎曲面光影） |
| 投影 | 距離 4px、大小 6px、展開 5%、不透明度 35% |
- 技巧： 樣式面板「新建樣式」存為「Metal_Brushed_Tray」供下次複用
步驟 2：自定義斜線紋理圖案定義
- 新建 4×4 px 透明背景文件 → Ctrl++ 放大至 1600%
- 鉛筆工具（B，1px 硬邊）按對角線填充 4 個像素點（左上、右下、或左下、右上）形成 45° 斜線
- 編輯 → 「定義圖案」 → 命名「Diagonal_4px_45deg」
- 回主文件
步驟 3：紋理填充與蒙版漸變控制
- Ctrl 點擊「托盤底」縮圖載入選區
- 新建圖層命名「紋理層」
- 油漆桶工具（G）→ 填充來源選「圖案」 → 選「Diagonal_4px_45deg」 → 點擊選區填充
- 「紋理層」加圖層蒙版 → D 重設前景黑/背景白 → X 切換前景白 → 漸變工具（線性、黑→白）從頂部向下拉 1/3 高度 → 紋理頂部濃、底部淡
- 右鍵蒙版 → 「應用圖層蒙版」
- 再加一個蒙版 → X 切換前景黑 → 線性漸變從底部向上拉 1/3 高度 → 紋理中間段保留、首尾淡出
- 再次應用蒙版 → 得到「中間濃、兩端淡」的拉絲紋理帶
步驟 4：頂部高光切面
- 鋼筆工具勾勒頂部切面路徑（頂邊內縮、兩側斜切）
- 新建圖層「頂部高光」 → 路徑右鍵「填充路徑」白色 → 不透明度 5%
步驟 5：底座構建
- 矩形工具在托盤下方繪製矩形（寬略大於托盤、高 15-20px）
- 圖層樣式：
| 樣式 | 參數 |
|---|
| 斜面與浮雕 | 外斜面、平滑、深度 150%、大小 5px、高光白、陰影深灰 |
| 漸變疊加 | 線性、角度 90°、上 #dddddd → 下 #999999 |
| 內陰影 | 距離 2px、大小 3px |
| 投影 | 距離 3px、大小 5px、不透明度 30% |
- 多邊形套索工具在底座左右底角各勾勒三角倒角選區 → 新建圖層填充較亮灰
#eeeeee → 對稱雙側
步驟 6：標籤區與最終輸出
- 矩形工具在底座上方繪製標籤區矩形
- 文字工具輸入標籤內容（品牌/型號/參數）
- 整理圖層組：背景 → 底座組 → 托盤組（底+紋理+高光） → 標籤組
- 輸出：PSD 源檔 + PNG 透明底多尺寸 (512/256/128/64/32px) + SVG（形狀圖層匯出路徑）
關鍵技術總結表
| 技術 | 應用 | 核心要點 |
|---|
| 圓角矩形矢量 | 托盤/底座主體 | 半徑 10-15px，可編輯半徑/尺寸 |
| 金屬斜面浮雕 | 托盤/底座質感 | 外斜面+高光白/陰影深灰+環形輪廓 |
| 自定義微紋理 | 拉絲斜線紋理 | 4x4px 像素級定義，完美無縫平鋪 |
| 雙重蒙版漸變 | 紋理顯示範圍控制 | 首尾淡出、中間濃，模擬真實拉絲光影分佈 |
| 鋼筆路徑高光 | 頂部切面 | 精確幾何、非破壞、可動畫 |
| 多邊形倒角 | 底座細節 | 三角選區填充亮色，打破生硬直角 |
避坑指南
- 圖案定義尺寸： 必須為 2 的冪次方（4/8/16/32px），否則大面積填充出現莫爾紋/對齊偏移
- 蒙版應用順序： 先加蒙版漸變 → 應用蒙版 → 再加蒙版漸變 → 應用蒙版，不可疊加多個蒙版（PS 單圖層僅支援一個像素蒙版+一個向量蒙版）
- 斜面浮雕輪廓： 「環形」輪廓對金屬彎曲面最真實，「圓錐」適合尖銳邊緣，「半圓」適合柔和圓角
- 漸變疊加角度： 托盤主體 90°（垂直）、頂部高光 -45°（對角）、底座 90°，統一光源邏輯
延伸：參數化圖標系統
- 將「托盤底」形狀圖層、樣式、紋理圖案、高光路徑、底座結構封裝為「智能物件模板」
- 定義變量：寬/高/圓角半徑/托盤顏色/紋理角度/紋理密度/底座高度/標籤文字
- 使用 PS 變量/資料集或腳本 (JSX/UXP) 批量生成不同規格/顏色/文字的圖標族
- 配合 Figma/Sketch/Adobe XD 元件系統，實現設計系統級複用