萬盛學電腦網

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

PS 手繪水晶質感按鈕/徽章:圖層樣式與高光構建全攻略

效果預覽

水晶徽章最終效果

核心思路:圖層樣式疊加 + 手繪高光

水晶感源於「透明體內部的折射與反射」。我們將按鈕拆解為:基底形狀 → 內陰影/內發光/倒角浮雕構建體積 → 手繪高光模擬折射 → 填充 0% 保留樣式 → 裁切貼圖 六階段。

詳細製作步驟

1. 建立基底圓形

  • 新建 800×800 px 畫布,背景填黑(#000000)。
  • 橢圓工具按 Shift 繪製正圓,填充綠色(#00A000),命名為「基底」。

2. 圖層樣式構建體積感

雙擊「基底」圖層開啟圖層樣式,依序設定:

樣式關鍵參數作用
投影模式:正片疊底,不透明度 50%,距離 5px,大小 10px懸浮感
內陰影模式:正片疊底,角度 120°,距離 8px,阻塞 15%,大小 15px邊緣厚度感
內發光模式:螢幕,顏色 #FFFFFF,不透明度 40%,大小 20px內部透光感
倒角與浮雕樣式:內部倒角,技巧:柔化邊緣,深度 100%,方向:向上,大小 15px,光澤輪廓:環形立體倒角
漸變疊加模式:疊加,不透明度 30%,漸變:#FFFFFF → 透明,角度 90°,縮放 120%表面微弱反光
圖層樣式面板

3. 手繪主高光——靈魂筆觸

  1. 新建圖層「高光 1」,橢圓選區工具拉出橢圓選區(寬約基底 60%,高 30%)。
  2. 白→透明徑向漸變從選區中心向右下拖曳,Ctrl+T 旋轉 30°,置於球體左上象限。
  3. 複製圖層 → Ctrl 點擊縮略圖載入選區 → 按 ← 移動 3-5px → Delete 刪除重疊部 → 形成銳利高光邊。
  4. 回到第一個高光圖層,複製 → 旋轉至右下象限,形成次高光。
高光構建步驟

4. 關鍵技巧:填充 0% 保留樣式

將所有高光圖層填充調為 0%,圖層樣式保留,僅顯示高光形狀,不受顏色干擾,方便後續裁切貼圖。

填充0%示意

5. 裁切貼圖:打造專屬徽章

  1. 置入任意圖案素材於頂層。
  2. Ctrl 點擊「基底」縮略圖載入圓形選區 → Ctrl+Shift+I 反選 → 刪除多餘區域。
  3. 將素材圖層移至「基底」與「高光組」之間,即可獲得帶水晶質感的專屬徽章。
裁切貼圖結果

延伸應用

  • 改變基底填色 + 漸變疊加顏色 → 紅寶石、藍寶石、琥珀等寶石質感。
  • 將圓形改為圓角矩形、六邊形 → App 圖示、UI 按鈕、遊戲道具圖標。
  • 高光形狀改為十字星、環形 → 不同折射特徵的水晶變體。

掌握「填充 0% + 圖層樣式」工作流,你就擁有了無限量產高質感水晶元件的製造機。

copyright © 萬盛學電腦網 all rights reserved