成品預覽

本教學示範如何以鋼筆工具勾勒結構、圖層樣式構建材質、剪貼蒙版處理細節，繪製一枚擁有金屬質感、布藍燈罩紋理、發光效果的立體台燈圖標。

結構拆解

台燈可分解為 5 大組件，分別獨立圖層組管理：

1. 燈罩（布藍材質、內發光）
2. 燈臂/支架（拉絲金屬、螺絲細節）
3. 關節轉軸（金屬高光、陰影）
4. 底座（壓鑄金屬、重心感）
5. 開關/指示燈（發光體）

步驟 1：鋼筆勾勒主外型

新建圖層組「Lamp」。使用鋼筆工具 (P) 以路徑模式勾勒台燈整體輪廓轉折點，注意：

• 路徑點盡量少、控制桿平滑，確保曲線流暢。
• 對稱部件（如雙燈臂）勾一側後 Ctrl+J 複製 → Ctrl+T 水平翻轉。
• 路徑面板中 Ctrl+Enter 轉選區，新建圖層填充基礎色（如燈罩 #4A4A4A，金屬件 #B0B0B0）。

步驟 2：材質與圖層樣式構建

對各組件圖層分別添加圖層樣式（雙擊圖層開啟）：

燈罩——布藍紋理

1. 漸變疊加：線性、角度 90°、顏色 #333333 → #555555 → #333333，模擬圓柱體明暗過渡。
2. 圖案疊加：載入「帆布/亞麻」紋理，模式「柔光」，不透明度 15%，縮放 50%。
3. 內發光：顏色 #FFD700，模式「螢幕」，大小 20 px，噪點 5%，模擬燈光透布暈染。
4. 投影：距離 5 px、大小 10 px、不透明度 40%，落在支架上。

金屬支架/底座——拉絲質感

1. 斜面與浮雕：風格「外部浮雕」、技術「平滑」、深度 150%、方向「上」、大小 8 px、柔化 3 px、高光模式「線性減淡」#FFFFFF 70%、陰影模式「正片疊底」#000000 50%。
2. 漸變疊加：線性、角度 0°、#CCCCCC → #888888 → #CCCCCC，不透明度 30%，模擬拉絲反光條。
3. 描邊：1 px、內部、#666666，勾勒邊緣硬度。

小零件（螺絲、開關、指示燈）

同樣用鋼筆勾勒基礎形狀，套用簡化版金屬樣式；指示燈另加「外發光」（#00FF00，螢幕，大小 10 px）。

步驟 3：組合與全局光影統一

1. 將所有組件圖層組拖入主組「Lamp_Final」，調整圖層順序符合空間前後關係。
2. 新建頂層調整圖層（剪貼至主組）：
   • 曲線：輕微 S 型，提升整體對比。
   • 色彩平衡：高光 +10 紅/-5 藍，陰影 -10 紅/+5 藍，統一冷暖。
3. 新建圖層「Global Highlight」，模式「線性減淡」，柔邊白筆刷 5% 流量，點繪金屬棱角高光、燈罩頂部亮帶。
4. 新建圖層「Cast Shadow」，模式「正片疊底」，黑筆刷繪製底座投影，濾鏡 → 模糊 → 高斯模糊 8 px，不透明度 30%。

匯出建議

• UI 圖標：匯出 PNG-32 多尺寸（16/24/32/48/64/128/256/512/1024 px）。
• 展示用：匯出 PNG-24 透明背景 + 獨立投影圖層，供網頁 CSS 動態控制陰影。
• 源檔保留：PSD 保留所有圖層組、調整圖層、路徑，便後續修改顏色、比例、材質。

結語

圖標繪製的核心是「結構準確、材質說服力、光影邏輯自洽」。善用鋼筆工具建立可縮放的矢量骨架，再以圖層樣式非破壞式賦予材質，配合剪貼蒙版限制調整範圍，即能高效產出專業級圖標資產。