教程簡介

基於 Photoshop CS5，從素材文件出發，運用圓角矩形、自由變換、圖層樣式（投影、斜面浮雕、光澤、漸變疊加）、路徑選區與漸變填充，逐步構建一個具有質感的紅色 Logo 按鈕，展示專業 UI 元素製作規範。

最終效果

詳細步驟（20 步）

1. 打開素材：運行 PS CS5，打開「紅背景.psd」。
2. 繪製主體形狀：設置前景色，選擇「圓角矩形」工具設置參數並繪製。
3. 自由變換：對「形狀 1」執行自由變換調整比例位置。
4. 添加投影：為「形狀 1」添加圖層樣式「投影」。
5. 合併基底：新建「圖層 1」與「形狀 1」合併。
6. 豐富主體樣式：為合併後「圖層 1」添加綜合圖層樣式（斜面浮雕、內陰影、光澤、漸變疊加等）。
7. 頂部高光帶：多邊形套索勾選區 → 複製到「圖層 2」並清除樣式。
8. 高光色調調整：執行「圖像→調整→色相/飽和度」調整高光色相。
9. 載入主體選區：魔棒工具點擊主體載入選區。
10. 邊緣高光漸變：新建「圖層 3」，漸變工具在選區內拉出漸變。
11. 設置高光透明度：取消選區，「圖層 3」不透明度 70%。
12. Logo 圖形繪製：設置前景色，鋼筆工具繪製 Logo 路徑（「形狀 1」）。
13. Logo 樣式：為「形狀 1」添加圖層樣式（投影、內陰影、斜面浮雕、漸變疊加）。
14. 裝飾線條：鋼筆工具繪製裝飾線條（「形狀 2」）。
15. 複製變換裝飾：複製「形狀 2」，改變位置與顏色。
16. 底部光暈路徑：鋼筆繪製路徑並載入選區。
17. 光暈漸變填充：新建「圖層 4」，漸變工具在選區內拉出漸變。
18. 光暈透明度：取消選區，「圖層 4」不透明度 40%。
19. 顯示組別：顯示「組 1」圖層組，完成實例。

技術要點總結

• 矢量形狀為主：圓角矩形、鋼筆路徑確保邊緣無鋸齒、可無限縮放。
• 圖層樣式疊加體系：投影定空間、斜面浮雕造體積、內陰影深邊緣、光澤增質感、漸變疊加豐富色調，標準 UI 按鈕樣式公式。
• 高光分層策略：頂部高光帶（複製主體選區+色相調整）、邊緣高光（選區漸變+低透明度）、底部光暈（路徑選區+漸變+40%透明度），三層高光各司其職。
• 非破壞工作流：形狀圖層保留可編輯性，調整圖層分離色彩變更。