教程在 Photoshop 中用簡潔快速方法製作靈活流行的 Web 按鈕，深化對顏色、漸變、圖案等基本操作的掌握。

預覽效果

第 1 步：建立文檔

按鈕尺寸 170×50px，畫布設 600×600px 留有餘地。

第 2 步：基本形狀

圓角矩形工具，圓角半徑 5px，繪製 170×50px 形狀。

第 3 步：圖層樣式——漸變疊加與描邊

雙擊圖層打開樣式面板。核心用「漸變疊加」與「描邊」，靈活性高，便於後期修改顏色。

漸變疊加參數：

• 色標 1：#2877ac，位置 0%
• 色標 1 中點：40%
• 色標 2：#87bfe6，位置 95%
• 色標 2 中點：95%
• 色標 3：#c2def1，位置 100%

描邊：顏色用漸變中的深藍 #2877ac，營造底部精致效果。

第 4 步：對角線圖案製作

新建 4×4px 文件，刪除背景層，鉛筆工具按 Shift 畫白色對角線（左上到右下）。編輯 → 定義圖案保存。

回主文檔，Ctrl+點擊形狀蒙版載入選區，形狀上方新建圖層填充該圖案。為不遮蓋描邊與頂部高光，選區收縮 2px 後反選刪除邊緣。圖層模式「柔光」，不透明度 20%。

第 5 步：添加文字

橫排文字工具輸入「Buy Now」，字體 Museo Slab 500、24pt、白色。添加投影，顏色深藍 #2877ac。

第 6 步：箭頭圖標

自定義形狀工具選 Arrow2，繪製 13×13px 箭頭，與小寫字等高，移動工具居中對齊。

第 7 步：懸停狀態製作

除背景層外選中圖層建群組「Normal」。複製群組改名「Hover」置於原按鈕下方。修改基本形狀副本漸變疊加為反向（或手動調色標）：色標 1 #87bfe6 0%，中點 40%；色標 2 #2877ac 95%，中點 40%；色標 3 #4c9fd7 100%。

完成正常與懸停兩態按鈕，靈活可復用。