萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 軟體知識 >  >> 影像處理 >> Photoshop 教學 >> Photoshop 入門教學

UI 圖標教學:圖層樣式打造質感金幣圖標——參數化非破壞工作流

金幣圖標是 UI 設計高頻需求。本教學展示如何純靠圖層樣式、無需手繪紋理,在幾分鐘內完成一枚具有金屬質感、立體厚度、邊緣倒角、表面浮雕紋路的專業級金幣圖標。掌握此參數化工作流,可秒級產出不同尺寸、不同样式的金幣變體。

核心圖層結構(僅 3 個關鍵圖層)

  1. Coin_Base:圓形路徑填充金色基底(#D4A017 或品牌金色值)
  2. Coin_Rim:複製基底縮小 95%,做邊緣倒角/厚度表現
  3. Coin_Detail:最小圓形,承載浮雕圖案/文字/年份

所有效果通過圖層樣式疊加實現,修改參數即時生效,完全非破壞。

圖層樣式參數全拆解

Coin_Base:主體金屬質感

  • 斜面與浮雕:內斜面、平滑、深度 150%、方向向上、大小 10-20px、軟化 0px、光澤輪廓「環形」、高光模式螢幕幕色 #FFF8DC 75%、陰影模式正片疊底 #8B6914 60%
  • 輪廓:勾選「抗鋸齒」,輪廓選「圓錐倒置」
  • 漸變疊加:線性、角度 90°、色標:#FFD700(0%) → #D4A017(50%) → #8B6914(100%),模式正常、不透明度 40%
  • 內發光:螢幕幕色 #FFEC8B、技巧精確、來源邊緣、阻塞 0%、大小 5-10px(模擬邊緣透光感)
  • 投影:正片疊底 #3D2B00、角度 90°、距離 3px、擴展 0%、大小 8px

Coin_Rim:厚度與側面

  • 斜面與浮雕:外斜面、平滑、深度 100%、大小 5-8px、光澤輪廓「環形」、高光/陰影同基底但強度減半
  • 漸變疊加:線性、角度 0°(左右漸變)、#B8860B → #DAA520 → #B8860B,模式正常 30%
  • 描邊:1px、內部、#8B6914(加強邊緒線條)

Coin_Detail:浮雕圖案(如數字/徽章/年份)

  • 文字/形狀圖層轉智能對象 → 斜面與浮雕:外斜面、平滑、深度 200%、大小 3-5px、光澤輪廓「圓錐」、高光 #FFF8DC、陰影 #8B6914
  • 漸變疊加:同基底但對比度更強
  • 投影:距離 1px、大小 2px(微細立體感)

變體擴展:參數化產出不同風格

風格關鍵參數調整
古董金幣基底色偏暗紅銅 #B87333、斜面深度降低、加「紋理」疊加(雲彩/紙張紋理)、投影增大模擬磨損
閃亮紀念幣高光不透明度拉滿、加「外發光」#FFF8DC、浮雕深度 300%、移除表面雜訊
扁平化 UI移除斜面浮雕、僅保留漸變疊加+內發光+1px描邊、簡化為 2 圖層
3D 立體幣Coin_Rim 大小增至 15px、加「輪廓」環形、側面漸變角度 0°、投影距離 8px 大小 15px

進階技巧:智能對象封裝與批量輸出

  1. 將三圖層群組 → 右鍵「轉換為智能對象」。
  2. 雙擊智能對象進入源文檔,修改 Coin_Detail 文字/圖案 → 存檔 → 主文檔自動更新所有實例。
  3. 配合動作/批次處理:記錄「替換內容 → 另存為 PNG」動作,一鍵輸出 100+ 規格金幣圖標。
copyright © 萬盛學電腦網 all rights reserved