教程概覽

本教程示範如何利用 Photoshop 圖層樣式（斜面與浮雕、內陰影、內發光、漸變疊加、投影）快速構建一枚擁有金屬外殼、玻璃表盤、立體指針、雙耳錘擊結構的精致小鬧鐘圖標。教程採用「形狀圖層+蒙版/樣式」非破壞流程，每個構件獨立圖層組，便於修改迭代。適合 UI 圖標、遊戲道具、時間管理 App 圖標設計。

一、文件建立與外框製作

步驟 1：新建文件與背景

Ctrl+N 1024×1024 px、72 dpi、RGB。背景填充深灰 #333333。

步驟 2：外框形狀與立體樣式

新建圖層「外框」。橢圓工具（U）按 Alt+Shift 從中心拉正圓（直徑 800 px），填充淡黃 #f3eecd。雙擊圖層添加「斜面與浮雕」：

• 風格：外凸、技巧：平滑、深度 200%、方向：上、大小 20px、柔化 0px
• 光源：角度 120°、高度 30°、光暈模式：正常 白 70%、陰影模式：正片疊底 黑 50%
• 輪廓：圓錐反向、量程 50%

得到具有厚度感的金屬外環。

圖 1：外框斜面與浮雕參數

步驟 3：外框高光與暗部手繪強化

新建圖層「外框高光暗部」，建立剪貼蒙版（Ctrl+Alt+G）剪貼至「外框」。用形狀工具+矢量蒙版（或軟筆+圖層蒙版）繪制：左上高光帶（白、疊加 30%）、右下暗部帶（深褐、正片疊底 40%）。高光邊緣羽化 1 px 自然過渡。合併「外框」與「外框高光暗部」。

圖 2：外框高光暗部手繪

二、表盤與刻度指針

步驟 4：表盤基礎與內陰影/發光

新建圖層「表盤」，置於「外框」上方。橢圓工具拉正圓（700 px），填色任意。添加樣式：

• 內陰影：距離 0、大小 15px、#000000 40%，模擬表盤內凹深度。
• 內發光：螢幕、#ffffff、大小 10px、不透明度 30%，模擬玻璃邊緣折射亮邊。

圖 3：表盤內陰影/內發光

步驟 5：表盤暗部與刻度數字/指針

新建圖層「表盤暗部」，剪貼至「表盤」。形狀工具+蒙版繪製右下 1/4 圓弧暗部（深灰、正片疊底 50%）。

刻度數字：文字工具「Georgia」12pt #3d2b1f，逐個輸入 1-12，Alt 複製旋轉 30° 定位。指針：矩形工具畫三條不同長寬矩形（秒針最細長帶配重圓頭），顏色分別：時針 #724042（疊加）、分針 #3d2b1f、秒針 #162020（中心加徑向紅白漸變）。指針投影統一：距離 1px、大小 2px、黑 30%、角度 120°。

圖 4：刻度、指針與暗部完成

三、雙腳、雙耳、錘擊、提手：細節構件批量化製作

步驟 6：雙腳

新建組「腳」。鋼筆勾勒單腳形狀（梯形彎曲），漸變疊加（線性 -90°，#c0b090→#e0d0b0→#a09070），手繪高光（白、疊加、剪貼蒙版）。Ctrl+J 複製水平翻轉得雙腳。

圖 5：單腳製作與雙腳複製

步驟 7：雙耳與錘擊

新建組「耳錘」。圓角矩形工具（半徑 10px）畫耳朵基礎形，斜面與浮雕（外凸、大小 8px）+ 漸變疊加（金屬漸變）+ 形狀+蒙版高光。複製水平翻轉得右耳。錘擊：同法縮小版耳朵形狀，置於耳內側，加投影區分層級。

圖 6：耳朵、錘擊形狀與樣式

步驟 8：提手

鋼筆勾勒提手弧形路徑（粗 12px、兩端圓頭），描邊路徑（畫筆 12px 硬圓），得提手形狀圖層。樣式：斜面與浮雕（外凸、大小 6px）+ 漸變描邊（線性沿路徑、金屬漸變）+ 形狀+蒙版高光（白、疊加）。

圖 7：提手路徑描邊與樣式

四、最終整理與多規格導出

步驟 9：圖層組織與組合

最終圖層結構（自下而上）：背景 → 外框組(外框+高光暗部) → 表盤組(表盤+暗部+刻度+指針+中心帽) → 腳組 → 耳錘組 → 提手。所有組轉為智能對象或保留編輯性。

步驟 10：最終效果確認與導出

檢查光源一致性（所有高光左上、投影右下）、材質區分度（金屬冷、玻璃透、陶瓷暖）、細節完整性。合併可見圖層銳化，導出 1024/512/256/128/64/32/16 px PNG 套裝。

最終效果：精致小鬧鐘圖標

效率提升工具包

• 動作記錄：將「新建圖層→畫形狀→加標準樣式」錄製為動作，一鍵生成標準構件。
• 樣式預設：將「金屬斜面」、「玻璃內發光」、「陶瓷漸變」存為圖層樣式預設（.asl），雙擊套用。
• 參數化腳本：用 JSX/UXP 編寫腳本，輸入「直徑、材質、顏色」自動生成完整鬧鐘圖標組。