教學目標

本教學將引導你使用 Photoshop 形狀工具、漸變、圖層樣式與手動陰影繪製，從零開始創建一枚具有金屬質感、立體感與真實光影的創意時鐘圖標。適合 UI 設計師、圖標愛好者練習光影邏輯與圖層結構管理。

最終效果

製作流程

1. 建立畫布與背景

新建 800×800 px、72 dpi、RGB 模式文件。背景圖層填充線性漸變：左上 #f0f0f0 至右下 #c2c2c2，模擬柔和環境光。

2. 繪製時鐘外殼基礎形狀

新建圖層「外殼」，使用橢圓選框工具按住 Shift 拉出正圓選區。填充線性漸變：#f2f2f2 到 #c9c9c9，角度 90°，模擬金屬頂部高光。

3. 邊緣羽化與陰影構建

保持選區，執行「選擇 > 修改 > 羽化」約 10 px，再按 Delete 刪除邊緣，使外殼邊緣自然過渡。再次載入外殼選區，新建圖層「邊緣陰影」置於外殼下方，填充深灰，高斯模糊 8 px，移動 3 px 向右下，製造懸浮感。

4. 內圈與刻度盤區域

縮小選區（選擇 > 修改 > 收縮 15 px），新建圖層「盤面」填充淺灰漸變。對盤面底部區域使用「加深/減淡工具」手動繪製光影過渡，強化立體感。

5. 精細邊框與倒角效果

對盤面選區再次收縮 15 px，多次交替使用加深/減淡工具在邊緣繪製細微高光與陰影線條，模擬 CNC 倒角工藝。

6. 圖層樣式增加投影

為「外殼」圖層添加「投影」樣式：距離 5 px，大小 15 px，不透明度 30%，角度 120°，進一步強化離地感。

7. 繪製時鐘刻度與數字

新建圖層組「刻度」。使用橢圓工具畫出黑色圓環作為外框。使用文字工具輸入 1-12 數字，字體選用無襯線體（如 Helvetica Neue），字號適中，顏色深灰。利用「自由變換」逐個旋轉數字對齊刻度位置。

8. 指針製作與素材合成

從素材圖中扣取指針（或用鋼筆工具繪製），拖入畫布縮放定位。為指針添加「投影」與「內發光」樣式，模擬指針厚度與離盤面高度。添加中心軸蓋裝飾。

9. 品牌文字與環形排版

使用橢圓工具繪製路徑，切換至文字工具點擊路徑輸入品牌名，設置字距與基線偏移使其貼合圓弧。隱藏路徑顯示。

10. 最終潤色

合併可見圖層（Ctrl+Shift+Alt+E），適當銳化、調整色階對比，隱藏輔助圖層，完成輸出。

進階提示

• 嘗試為外殼添加「斜面與浮雕」樣式模擬拉絲金屬紋理。
• 使用智能對象保存指針、數字等元素，便於後續修改角度或文字。
• 導出時針對不同尺寸（@1x, @2x, @3x）輸出 PNG，保證 Retina 螢幕清晰度。