本教學示範如何利用圖層樣式疊加、自定義圖案填充、向量形狀工具，從零繪製一枚具有複古像素風格的計時器圖標。涵蓋背景紋理製作、主體立體構建、數字顯示效果、按鈕交互狀態等完整 UI 圖標製作流程，適合掌握圖層樣式參數化設計思維。

設計拆解：計時器圖標的視覺構成

• 背景：深藍灰徑向漸變 + 噪點紋理 + 45° 像素斜線紋理（複古 CRT 螢幕感）
• 外殼：圓角矩形、內陰影/投影建立凹陷感、雙層邊框疊加厚度
• 顯示區：深色背景 + 綠色/藍綠色數字（七段數碼管風格）+ 漸變/投影增強可讀性
• 分隔線：細線條 + 投影區分時/分/秒
• 功能鍵：圓角矩形鍵帽 + 斜面浮雕 + 外發光 + 鍵面文字

核心步驟與關鍵參數

1. 背景系統構建

• 漸變調整圖層：徑向漸變 #444c60 → #262f37，角度 90°。
• 噪點圖層：新建圖層填白 → 濾鏡 → 雜色 → 添加雜色（20%、高斯分布、單色）→ 模式正片疊底。
• 像素斜線圖案：
  1. 新建 5×5px 文件，鉛筆工具 1px 畫 45° 斜線（對角線）。
  2. 編輯 → 定義圖案 命名「Pixel_45deg」。
  3. 主文檔新建圖層 → 編輯 → 填充 → 圖案 選「Pixel_45deg」 → 不透明度 30%。

2. 外殼立體構建（圖層樣式疊加邏輯）

• 基底框：黑色圓角矩形、填充 20% → 內陰影（距離 3px、大小 5px、正片疊底黑 40%） → 投影（距離 2px、大小 4px、正片疊底黑 30%）。
• 雙層邊框疊加：複製基底框 → 右移對齊 → 再複製 → 右移對齊，形成三層疊加厚度感。
• 最底層框：加外發光（螢幕幕色 #00ffff、大小 10px、範圍 50%）+ 投影（距離 5px、大小 10px），營造懸浮發光感。

3. 顯示區與數字效果

• 顯示框：圓角矩形 → 漸變疊加（#0a1a0a → #003300、90°） → 外描邊（1px、#00ff00） → 內陰影（距離 2px、大小 3px、正片疊底黑 50%）。
• 數字文字：字體建議 DS-Digital / Orbitron / Share Tech Mono → 漸變疊加（#00ff88 → #00cc66、90°） → 投影（距離 1px、大小 2px、正片疊底黑 80%）。
• 分隔線：矩形工具畫細線 #172026 → 投影（距離 1px、大小 1px、螢幕幕色白 30%）。

4. 功能鍵（啟動/暫停/重置）

• 鍵帽：圓角矩形 → 漸變疊加（#1a1a2e → #16213e、90°） → 斜面與浮雕（內斜面、平滑、深度 100%、大小 5px、光澤輪廓環形、高光螢幕幕色白 60%、陰影正片疊底黑 60%） → 外發光（螢幕幕色 #00ffff、大小 8px、範圍 50%）。
• 鍵面文字：同數字樣式，縮小字號。

參數化優勢與擴展

• 所有效果由圖層樣式參數驅動，修改顏色/尺寸/發光強度即時生效，無需重繪。
• 將整組圖層轉為智能對象，可作為元件庫組件，支援替換內容快速生成不同時間/顏色/狀態變體。
• 導出：右鍵形狀圖層 →「匯出為 SVG」獲取矢量源文件；或「快速匯出 PNG」多尺寸輸出。

最終效果預覽