教程概覽

本教程詳細拆解一枚擬真度極高的指針時鐘小圖標（App Icon 風格）繪制流程。核心策略：最少圖層、最大化圖層樣式——時鐘底座、表盤底座、表盤、三針、高光各僅用 1~2 個圖層，通過精細的圖層樣式（斜面與浮雕、漸變疊加、內陰影、投影、描邊）實現金屬、玻璃、陶瓷多材質共存。適合 UI 圖標設計師掌握「樣式驅動建模」高效工作流。

一、文件與背景準備

步驟 1：新建畫布與背景

Ctrl+N 1024×1024 px（標準圖標源文件尺寸），72 dpi、RGB。拖入紋理背景素材（木紋/石紋/布紋），轉智能對象，命名「背景」。

二、時鐘底座：單圖層完成陶瓷/石材質感

步驟 2：繪制底座形狀

橢圓工具（U）按 Alt+Shift 從中心拉正圓（直徑 800 px），填色任意（稍後被樣式覆蓋）。命名「底座」。

圖 1：底座形狀繪制

步驟 3：圖層樣式堆疊——底座材質

雙擊「底座」圖層，配置以下樣式（參數僅供參考，需根據實際圓徑微調）：

• 斜面與浮雕：外凸、平滑、深度 250%、方向 上、大小 18px、柔化 0px、光源角度 120°/高度 30°、光暈模式 正常 白 60%、陰影模式 正片疊底 黑 40%。
• 輪廓：選「圓錐反向」，量程 50%。
• 漸變疊加：線性 -90°，色標：0% #e8e0d0、50% #d8c8b0、100% #c8b8a0，模擬陶瓷釉面受光漸變。
• 內陰影：距離 3px、大小 8px、#887868，強化邊緣厚度。
• 投影：距離 5px、展開 0、大小 15px、#333333 40%，落地感。

圖 2-5：底座圖層樣式各項參數

三、表盤底座：單圖層完成金屬嵌邊

步驟 4：繪制表盤底座形狀

新建圖層「表盤底座」，置於「底座」上方。橢圓工具按 Alt+Shift 拉較小正圓（直徑 680 px），置中。雙擊添加樣式：

• 斜面與浮雕：外凸、平滑、深度 200%、大小 12px、光暈 白 70%、陰影 黑 50%。
• 漸變疊加：線性 -90°，#c0b090→#e0d0b0→#a09070（拉絲金屬漸變）。
• 內陰影：距離 2px、大小 5px、#605040。
• 描邊：2px、內部、#807060，勾勒內緣精度。

圖 6-9：表盤底座樣式參數

四、表盤與指針：極簡圖層表達資訊密度

步驟 5：表盤面層

新建圖層「表盤」，更小正圓（600 px），填 #f5f0e8（淡奶白）。樣式：內陰影（距離 1px、大小 3px、#c0b0a0）、內發光（正常、#e8e0d8、大小 5px）、漸變疊加（徑向、中心透明→邊緣 #e0d8d0 20%）。

步驟 6：刻度數字與指針

• 數字：文字工具輸入 1-12，字體「Georgia」或襯線體，大小 48pt，顏色 #3d2b1f，按 Alt 拖動複製旋轉（Ctrl+T 旋轉 30° 間隔），智能對齊輔助定位。
• 時針/分針：矩形工具畫細長條，底部圓頭，頂部尖頭。時針色 #724042，模式「疊加」；分針色 #3d2b1f，模式「正常」。
• 秒針：極細矩形（2×200 px），色 #162020（深藍綠），頂端圓頭加「漸變疊加」徑向紅白漸變模擬配重。三針圖層均置於「表盤」上方。
• 中心金屬帽：橢圓工具拉小圓（30 px），樣式參考圖 10-12：斜面與浮雕（外凸、大小 5px）、漸變疊加（金屬金環狀）、投影（距離 1px）。

圖 10-12：中心金屬帽樣式參數

步驟 7：指針投影與光源一致性

三針圖層各加「投影」：距離 2px、大小 3px、#000000 30%，角度統一 120°（左上光源），確保投影方向一致。

五、高光層：兩層疊加營造玻璃質感

步驟 8：主高光帶

新建圖層「高光主」，置頂。橢圓選區（橫向扁橢圓，寬 500 px、高 80 px），置於表盤上 1/3 處。漸變工具（G），前景透明漸變，白→透明，從上往下拖。圖層模式「疊加」，不透明度 40%。

圖 13-14：主高光帶製作

步驟 9：頂點閃光點

新建圖層「閃光點」，1 px 硬筆白色，在表盤左上邊緣點 2~3 個極小高光點，模式「正常」，不透明度 80%。模擬玻璃邊緣菲涅爾反射。

六、文字裝飾與最終銳化

步驟 10：品牌字標

文字工具在表盤下方輸入品牌名（如「CHRONOS」），字體無襯線細體，字距 200，顏色 #5a4a3a，加投影（距離 1px、白 20%）增強可讀性。

步驟 11：合併銳化輸出

合併可見圖層（Shift+Ctrl+Alt+E），濾鏡 > 銳化 > 智慧銳化（數量 80%、半徑 0.8 px、去噪 10%）。導出 1024、512、256、128、64、32、16 px 多規格 PNG，完成全套圖標交付。

最終效果：質感指針時鐘圖標

「樣式驅動建模」方法論總結

此法將「建模」轉化為「樣式參數調整」，修改參數即可一鍵換材質（陶瓷→塑膠→木質→碳纖維），極大提升迭代效率，是專業 UI 圖標設計師必備核心技能。

組件	圖層數	核心樣式組合	材質隱喻
底座	1	斜面浮雕+漸變疊加+內陰影+投影	陶瓷/石材厚重感
表盤底座	1	斜面浮雕+金屬漸變+內陰影+描邊	拉絲金屬嵌邊
表盤面	1	內陰影+內發光+徑向漸變	微凸玻璃/陶瓷釉面
指針	3	形狀+疊加模式+投影	金屬/陶瓷指針
中心帽	1	斜面浮雕+環狀金屬漸變+投影	精密金屬軸心
高光	2	漸變填充+疊加模式	玻璃菲涅爾反射