教程概覽

使用兩張木紋素材，配合形狀圖層（矩形/圓角矩形）、自由變換透視、剪貼蒙版、圖層樣式（斜面浮雕/內陰影/投影/漸變疊加），從零構建一個擁有真實木質質感、繩懸掛繩、數字翻牌結構的計數器界面。適合學習「素材驅動質感」與「UI 組件立體化」表現。

最終效果

所需素材

• 木紋 1：大面積木板紋理（用於背景牆面）。
• 木紋 2：細膩直紋木紋（用於計數器木板表面與側面）。

詳細步驟

1. 背景牆面

• 新建 580 × 435 px 畫布。
• 拖入木紋 1 → 重命名「木紋1」 → 圖層樣式：漸變疊加(加深邊緣) + 投影，營造牆面深度。

2. 木板側面（厚度面）

• 新建組「木板」，新建形狀圖層「側面」：矩形工具(形狀模式)畫長方形，填充 #eabe88。
• 拖入木紋 2 → 重命名「木紋2」 → Ctrl+T 旋轉 90° → Alt 拖拉左側中點水平拉伸覆蓋畫布。
• Ctrl 點擊「側面」矢量蒙版縮略圖載入選區 → 選中「木紋2」添加蒙版 → Ctrl+Shift+U 去色 → 混合模式「柔光」。
• 「側面」圖層添加圖層樣式：內陰影(上邊緣) + 斜面浮雕(外凸) + 投影，賦予厚度感。

3. 木板表面（頂面）

• 「側面」下新建形狀層「表面」：矩形填充 #eec592 → Ctrl+T 右鍵「透視」拉成梯形透視。
• 同法處理木紋 2（改名「木紋3」）→ 旋轉 90° → 透視變換方向一致 → 覆蓋畫布 → 去色 → 蒙版 → 柔光。
• 「表面」添加圖層樣式：內陰影(近側面邊緣) + 斜面浮雕(微凸) + 漸變疊加(模擬頂面光照漸變)。

4. 懸掛繩與投影

• 新建層「繩子」：鋼筆勾斜線路徑 → 1px 硬筆描邊黑色 → 不透明度 50%。
• 新建層「影子」：同樣路徑描邊黑色 → 不透明度 30% → 添加漸變蒙版(黑→白)淡化遠端。
• 複製「繩子+影子」組 → 水平翻轉 → 移至對稱位置。

5. 木板整體投影

• 木板組底部新建組「木板影子」。
• 「影子1」：矩形選區填黑 → 白→黑漸變蒙版(近實虛遠)。
• 「影子2」：更大橢圓選區填黑 → 同蒙版 → 不透明度 30%，雙層投影增強真實感。

6. 計數器機身與數字牌

• 新建組「計數器」，圓角矩形(半徑 7)填充 0% → 圖層樣式：斜面浮雕(內凹邊框) + 內陰影 + 投影，做出凹陷機身槽。
• 內部新建組「數字背景」：兩個圓角矩形(半徑 5、黑色、填充 38%) → 樣式：內陰影 + 斜面浮雕(內凹) + 漸變疊加，做出翻牌卡槽質感。
• 文字工具打數字，黑色、不透明度 60% → 投影：白色、正常模式、角度 -90°、距離 1px、大小 0，模擬凸起字體陰影。

7. 裝飾與完成

• 添加螺絲、標籤等微小裝飾細節。
• 作者建議整體縮小一圈比例更協調。

相關教程推薦

• Photoshop 繪制一個擺放雜志的實木書櫃
• PS 鼠繪木棧道之材質構建教程
• Photoshop 設計木紋立體效果的軟件圖標
• Photoshop 繪制逼真的計算器教程
• 利用 PS 濾鏡及圖層樣式制作木紋圖標