教程簡介

標籤式按鈕常用於輔助導航，線條優美。教程展示基礎幾何構建法與四種質感風格變體，提供 PSD 下載。

效果預覽

核心幾何構建（步驟 1-4）

1. 文檔與背景

• 580×290px，白色背景 → 填充灰色 #898989 (Alt+Delete)

2. 主體圓角矩形路徑

• 圓角矩形工具(U)，路徑模式，半徑 10px，畫出主體路徑

3. 路徑轉選區填色 + 轉角補完（關鍵技法）

• Ctrl+Enter 路徑轉選區 → 填充主色
• 不取消選區 → 新建圖層 → Ctrl+I 反選 → 矩形選框工具(M)選「與選區交叉」 → 框選左下角 → 同色填充
• Ctrl+D 取消選區 → 獲得「矩形+左下圓角」形狀

4. 鏡像複製右轉角 + 合併

• 移動工具(V)將轉角移至右側對齊（放大+參考線精準對齊）
• Ctrl+J 複製 → Ctrl+T 水平翻轉 → 移至左下角對齊
• Ctrl+點選三層 → Ctrl+E 合併 → 獲得完整標籤形狀（兩側圓角、底部平直）

5. 修剪多餘底部

• 放大文檔 → 矩形選框框選底部多餘 → 方向鍵微調 → 刪除 → Ctrl+D

四種質感風格變體（步驟 5）

為基礎形狀添加不同圖層樣式組合，生成四款風格：

風格解析（供參考）

• 風格一：內斜面+漸變疊加(金屬拉絲)+內陰影(頂部陰影)+投影(底部懸浮)
• 風格二：斜面浮雕(凸起)+描邊(邊框)+圖案疊加(織物/皮革紋理)+外發光(發光邊緣)
• 風格三：漸變疊加(玻璃/膠質)+內陰影(內凹)+投影(柔和)
• 風格四：純色+描邊(扁平化)+長投影(長影設計風格)

方法論價值

• 路徑布爾運算：「添加到形狀區域」+「交集選區」構建複雜幾何，純矢量、可無限編輯
• 轉角分離製作法：主體+獨立轉角片，比直接畫圓角矩形更可控（可單獨調整轉角樣式）
• 樣式解耦：幾何形狀與質感樣式分離，一鍵切換風格變體