前言

指紋解鎖圖標已成智能手機時代的通用視覺符號。本教學將帶你從零開始，用 Photoshop 矢量形狀、圖層樣式、濾鏡與筆刷，完整復刻一枚擬真度極高的指紋解鎖 UI 圖標。涵蓋指紋紋理程序化生成、玻璃/金屬材質模擬、微光暈潤色等實戰技法，適合 UI 圖標設計師進階練習。

最終效果預覽

核心製作流程

階段 1：基礎幾何構建（矢量非破壞）

1. 新建 512×512px 畫布。圓角矩形工具畫背景底板，圓角 20px，填充深灰 #1a1a1a。
2. 橢圓工具按 Shift 畫正圓（指紋區域），置中，填充略亮灰 #2a2a2a。
3. 複製圓形縮小 90%，填充更亮灰 #3a3a3a，作為指紋感應鍵內環。
4. 再複製一層縮小 80%，填充近黑 #0d0d0d，作為指紋掃描窗口基底。

階段 2：程序化生成指紋紋理（核心亮點）

不畫、不找素材，純濾鏡生成唯一指紋：

1. 新建圖層填 50% 灰 → 濾鏡→雜色→添加雜色（量 100%，高斯分布、單色）。
2. 濾鏡→模糊→動態模糊：角度 0°，距離 50px（產生流向條紋）。
3. 濾鏡→風格化→尋找邊緣（提取條紋邊緣）。
4. 圖像→調整→反相 (Ctrl+I) → 色階 (Ctrl+L) 拉高對比，黑白分明。
5. 濾鏡→扭曲→波浪：波數 3、波長 50-100、振幅 5-10（擾動直線感）。
6. 濾鏡→模糊→高斯模糊 0.5px（微柔化）。
7. 圖層混合模式改「疊加」，不透明度 60%，剪貼蒙版至指紋窗口圓形層。

即得隨機、自然、唯一的指紋紋理，每次執行結果不同，堪比真實指紋！

階段 3：材質與光影渲染（提質感關鍵）

• 玻璃蓋板：頂層新建圓形（略大於指紋窗口），填充 0%，圖層樣式：
  斜面與浮雕（內部斜面、平滑、深度 500%、方向下、大小 10px、角度 90°、高光線性減淡 40%、陰影線性加深 30%）
  + 內發光（螢幕、淡藍、大小 20px、範圍 50%）
  + 投影（距離 2px、大小 5px、不透明度 40%）。
• 金屬邊框：中間圓環圖層樣式：斜面與浮雕（外部斜面、凹槽邊緣、深度 300%、大小 8px、高光顏色淡金、陰影顏色深棕）+ 漸變疊加（金屬漸變、角度 90°）+ 內陰影（增加內側厚度感）。
• 底板質感：背景圓角矩形添加雜色(量 3%, 單色)→ 高斯模糊 0.3px → 圖層樣式內陰影(距離 3px, 大小 8px) + 色彩疊加(疊加模式, 顏色 #121212)。

階段 4：微光暈與呼吸燈效果（靈動細節）

1. 新建層，橢圓選區羽化 30px，填充淡藍 #00ffff，混合模式「濾色」，不透明度 40%，置於指紋窗口上方，模擬掃描光暈。
2. 新建層，硬邊小筆刷點幾個白色高光點（邊框棱角、玻璃反射點），混合模式「線性減淡」。
3. （可選）錄製動作/關鍵幀動畫：光暈層不透明度 0%→100%→0%，旋轉角度 0°→360°，導出 GIF/MP4 做呼吸燈動效。

圖層結構最佳實踐

指紋解鎖圖標 (群組)
├── 背景底板 (矢量圓角矩形 + 雜色 + 內陰影)
├── 金屬邊框 (矢量圓環 + 斜面浮雕 + 金屬漸變)
├── 指紋窗口基底 (矢量圓形 + 深色填充)
├── 指紋紋理 (程序化濾鏡生成 + 疊加模式 + 剪貼蒙版)
├── 玻璃蓋板 (矢量圓形 0%填充 + 斜面浮雕 + 內發光 + 投影)
├── 掃描光暈 (橢圓羽化填充 + 濾色模式 + 動畫就緒)
└── 高光點綴 (筆刷點繪 + 線性減淡)

商用輸出規範

• 尺寸規範：iOS @1x/@2x/@3x (58/116/174px)；Android mdpi/hdpi/xhdpi/xxhdpi/xxxhdpi (48/72/96/144/192px)。
• 格式：PNG-24 透明背景；或 SVG（將矢量形狀匯出路徑至 Illustrator 再存 SVG）。
• 命名：`ic_fingerprint_unlock_[state]_[size].png`（state: default/pressed/scanning/success/error）。

結語

指紋圖標看似簡單，實則濃縮了「程序化紋理生成、多材質圖層樣式堆疊、微動效預留」等 UI 圖標設計核心功力。掌握這套流程，不只能做指紋，換成人臉/虹膜/聲紋/密碼等任何生物識別圖標，皆是同理可徹。建議將圖層結構存為 PSD 模板，接入設計系統組件庫，實現真正的「設計一次，多端複用」！