本教學透過圖層樣式（內陰影、漸層疊加、投影）、圖層複製與間距控制，快速打造乾淨俐落的垂直導航介面。適合網頁 UI 設計入門練習，強調「少即是多」的視覺邏輯。

最終效果預覽

Step 1：建立導航背景基底

1. 新建適當尺寸文件（如 300×600 px）。
2. 新建圖層，矩形選框工具拉出導航條寬度矩形 → 填充 #5a5a5a（深灰）。

Step 2：背景圖層樣式賦予質感

• 雙擊圖層開啟「圖層樣式」：
• 內陰影：混合模式正片疊底、不透明度 50% 左右、角度 90°、距離 3 px、大小 5 px，營造內凹感。
• 漸層疊加：黑→深灰線性漸層，角度 90°，不透明度 30% 左右，增強立體厚度。

Step 3：導航項目複製與間距控制

1. 選中背景圖層 → Ctrl+J 複製出第一個導航項目。
2. 移動工具（V）按住 Shift+Alt 向下拖曳複製，或用方向鍵配合 Shift（10 px/次）精確控制行距。
3. 本教學設定項目間距 3 px，重複複製至所需項目數量。

Step 4：添加標題文字

• 文字工具（T）逐項輸入導航標題，字體建議微軟正黑體/蘋果儷中黑，字號 14~16 pt，顏色白色或淺灰。
• 文字圖層置於對應項目背景圖層上方，視覺對齊中心。

Step 5：圓形指示器設計（當前頁/懸停狀態）

1. 橢圓選框工具按住 Shift 拉出小正圓 → 新建圖層填充顏色（如 #00aaff）。
2. 圖層樣式設定：
   • 內發光：白色、螢幕模式、大小 5 px，模擬發光邊緣。
   • 斜面與浮雕：內部斜面、深度 100%、大小 3 px，增加立體感。
   • 漸層疊加：徑向漸層（中心亮→邊緣暗），不透明度 40%。
3. 圖層不透明度設 70%，使指示器微透顯底層背景質感。

Step 6：箭頭圖示與最終組合

1. 自定形狀工具選擇箭頭形狀，或鋼筆繪製簡單三角箭頭，置於導航項目右側。
2. 箭頭顏色與文字一致，或稍淡以示次要。
3. 整理圖層群組：背景群、項目群、文字群、指示器群，方便後續維護。

關鍵技巧回顧

• 單一背景圖層+圖層樣式→複製調整：效率最高、風格統一。
• 行距用「移動工具+Shift+方向鍵」或「Alt+拖曳複製」精確控制。
• 指示器用「內發光+斜面浮雕+漸層疊加」三合一，少量圖層產生豐富質感。
• 圖層不透明度微調（70%）讓 UI 元素呼吸感更自然。