木紋質感導航欄是網頁與介面設計中經典的溫暖質感元素。本教學展示如何在 5 分鐘內，僅使用 Photoshop 內建濾鏡（雲彩、動態模糊、雜色）、圖層樣式、調整圖層，從零程序化生成逼真木紋，並構建包含背景、分隔線、高光、懸停狀態的完整導航欄組件。無需外部素材，全流程可錄製動作復用，極大提升 UI 設計效率。

效果預覽

程序化木紋生成核心流程

1. 新建 1200×100px 文檔（導航欄典型尺寸）。新建圖層填充基底色 #8b5a2b（中性木棕）。
2. 濾鏡 > 渲染 > 雲彩，再執行一次 濾鏡 > 渲染 > 差值雲彩（Ctrl+F），獲得高對比度雲彩紋理。
3. 濾鏡 > 模糊 > 動態模糊，角度 0°（水平），距離 200px。將雲彩拉伸成平行木紋條狀。

4. 影像 > 調整 > 色階 (Ctrl+L)，向內拖動輸入色階黑白滑塊，大幅增加對比度，使木紋紋理清晰銳利。
5. 濾鏡 > 雜色 > 添加雜色，數量 5%，高斯分布，勾選單色。增加木材表面微觀顆粒感。
6. 添加「色相/飽和度」調整圖層剪貼，色相 -5，飽和度 -20，亮度 +5，微調木色溫度。
7. 添加「曲線」調整圖層剪貼，拉高高光、壓暗陰影，增強木紋立體深度。

導航欄組件構建

1. 背景層：將生成的木紋圖層作為導航欄背景。添加「漸層疊加」圖層樣式：混合模式「柔光」，不透明度 20%，漸層從頂部 #ffffff（10%不透明度）到底部 #000000（10%不透明度），模擬頂部受光、底部陰影的豎向光照。
2. 頂部高光線：新建 1px 高橫線圖層，填充 #ffffff 10% 不透明度，置於導航欄最頂端，模擬邊緣受光高光。
3. 底部分隔線：新建 1px 高橫線圖層，填充 #3d2514（深木色），置於導航欄最底端，與背景分離。
4. 項目分隔線：使用矩形選框建立 1×40px 選區，填充 #5a3d1f，複製分布於導航項目間。或用「描邊」路徑批量生成。

懸停/按下狀態製作

1. 複製導航欄背景組為「Hover 狀態」組。添加「色彩平衡」調整圖層剪貼，中間調紅 +15、黃 +10，高光黃 +5，溫暖提亮。
2. 添加「內發光」圖層樣式於背景：混合模式「螢幕」，顏色 #ffcc66，不透明度 30%，大小 30px，來源「邊緣」，模擬滑鼠懸停發光反饋。
3. 「Pressed 狀態」：移除內發光，添加「內陰影」：混合模式「正片疊底」，距離 3px，大小 5px，按壓凹陷感。

文字與圖標排版

導航文字使用無襯線字體（如「思源黑體」「PingFang SC」），字重 Medium，大小 16px，顏色 #f5f0e8（暖白）。添加「投影」圖層樣式：距離 1px，大小 1px，不透明度 50%，確保在深木紋背景上閱讀清晰。圖標使用同色系線條圖標，垂直置中對齊文字。

響應式切圖與動作錄製

1. 建立切片：導航欄背景切片設為水平重複（僅保留 20px 寬無縫紋理區），分隔線、高光線單獨切片。
2. 錄製動作：記錄「生成木紋」到「構建組件」全流程。播放動作後只需修改畫布寬度、文字內容即可快速產出不同長度導航欄。
3. 導出：背景紋理導出 20px 寬 PNG 供 CSS `repeat-x`；狀態圖層導出 Sprite 圖或分離 PNG。

進階變體：不同樹種風格

風格	基底色	色相偏移	對比度	適用場景
橡木	#9c6b3a	-10	高	後台管理、企業官網
胡桃木	#5c3a21	+5	極高	高端電商、藝術展示
松木	#c4a36a	+15	中	親子、教育、自然風
焦木/炭化木	#2d1a0f	-20	極高	遊戲、音樂、暗黑風