在尋找設計靈感時，我發現了一位葡萄牙設計師創作的精美金屬質感圖標，決定嘗試在 Photoshop 中複刻這種效果。本教學將詳細示範如何善用圖層樣式，從零開始繪製一枚擁有逼真環形金屬質感的 Logo 按鈕，適合應用於網頁介面、App 圖標或品牌視覺設計中。

最終效果預覽

步驟 1：建立基礎畫布與外環

開啟 Photoshop，建立新文件（建議 2560×1440 px，適合高解析度壁紙輸出）。選取橢圓工具，按住 Shift 鍵繪製一個正圓形，填充為黑色，作為按鈕的最外層基底。

步驟 2：建立內環選區

在同一圖層或新圖層上，繪製一個較小的正圓置於中心。按住 Ctrl 點擊該圖層縮圖載入選區，這將成為挖空內環的依據。

步驟 3：產生戒指形狀

選取大圓圖層，執行「圖層 > 圖層蒙版 > 隱藏選區」，即可得到一個完美的環狀結構（戒指）。

步驟 4：套用色彩疊加奠定金屬基調

進入圖層樣式面板，勾選「色彩疊加」，顏色設為深灰色（如 #333333），混合模式保持正常，不透明度 100%，為金屬質感鋪底。

步驟 5：斜面與浮雕——塑造立體邊緣

啟用「斜面與浮雕」，關鍵設定如下：

• 樣式：內斜面
• 技法：平滑
• 深度：550%
• 方向：向上
• 大小：視圖案大小調整（約 10-15 px）
• 角度：90°，高度：30°
• 光澤等高線：選擇「圓頂」或自訂曲線，模擬金屬邊緣的高光過渡

步驟 6：內發光——增強邊緣亮度

勾選「內發光」，混合模式設為「顏色減淡」，不透明度 75%，顏色為白色，大小約 5-8 px，讓內環邊緣產生金屬特有的反光感。

步驟 7：投影——分離視覺層次

啟用「投影」，混合模式「正片疊底」，顏色黑色，不透明度 50%，角度 90°（取消「使用全域光」），距離 3 px，大小 5 px，使按鈕看起來懸浮於背景之上。

步驟 8：繪製按鈕中心區塊

在環狀中心建立兩個漸層圓形：較大的黑色圓作為底座，較小的圓作為按鈕實體面板。

步驟 9：中心面板漸層疊加

對小圓圖層套用「漸層疊加」：模式正常，樣式線性，角度 90°，從深灰（#1a1a1a）過渡至中灰（#4a4a4a），營造凹陷的金屬面板感。

步驟 10：中心面板斜面浮雕

加入「斜面與浮雕」：內斜面，深度 80%，大小 5 px，光澤等高線選「環形」，強化按鈕被按下的觸感。

步驟 11：繪製高光飾條

新建圖層，使用鋼筆工具勾繪一條沿著環狀彎曲的細長選區，模擬金屬表面的鋒利高光線條。

步驟 12：高光飾條漸層與混合

對飾條圖層套用「漸層疊加」：混合模式「濾色」，白到透明線性漸層，角度順應彎曲方向，不透明度約 60%，再以圖層蒙版柔化兩端。

步驟 13：放置 Logo 圖形

將準備好的 Logo（建議為向量智能物件）置於中心面板上方，大小留白邊距約 10-15%。

步驟 14：Logo 專屬圖層樣式

為 Logo 加入「漸層疊加」（正常模式，線性，淺灰到深灰）與「斜面與浮雕」（內斜面，平滑，深度 200%，大小 3 px），使其如同鑲嵌於金屬面板上。

步驟 15：完成 Logo 效果

確認後即可看到 Logo 完美融入按鈕，具有凹陷金屬質感。

步驟 16-18：製作金屬拉絲背景

1. 背景圖層填充中性灰，執行「濾鏡 > 雜色 > 添加雜色」（高斯分布，單色，量值 15%）。
2. 執行「濾鏡 > 模糊 > 動感模糊」，角度 0°，距離 20 px，形成水平拉絲紋理。
3. 背景圖層加入「漸層疊加」：正片疊底模式，徑向漸層，中心較亮邊緣暗，增強景深。

結語

整個流程僅仰賴圖層樣式與基本形狀工具，無需複雜筆繪即可產出極具質感的金屬按鈕。關鍵在於「斜面與浮雕」的等高線調整與「內發光」的混合模式運用。掌握此技法後，可嘗試不同顏色（金、銅、鈦）、不同厚度的環狀，或應用於汽車標誌、高階電子產品介面設計中。建議多實驗參數組合，發展屬於自己的金屬風格素材庫。