效果預覽
核心思路:圖層樣式疊加 + 手繪高光
水晶感源於「透明體內部的折射與反射」。我們將按鈕拆解為:基底形狀 → 內陰影/內發光/倒角浮雕構建體積 → 手繪高光模擬折射 → 填充 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」,橢圓選區工具拉出橢圓選區(寬約基底 60%,高 30%)。
- 白→透明徑向漸變從選區中心向右下拖曳,Ctrl+T 旋轉 30°,置於球體左上象限。
- 複製圖層 → Ctrl 點擊縮略圖載入選區 → 按 ← 移動 3-5px → Delete 刪除重疊部 → 形成銳利高光邊。
- 回到第一個高光圖層,複製 → 旋轉至右下象限,形成次高光。
4. 關鍵技巧:填充 0% 保留樣式
將所有高光圖層填充調為 0%,圖層樣式保留,僅顯示高光形狀,不受顏色干擾,方便後續裁切貼圖。
5. 裁切貼圖:打造專屬徽章
- 置入任意圖案素材於頂層。
- Ctrl 點擊「基底」縮略圖載入圓形選區 → Ctrl+Shift+I 反選 → 刪除多餘區域。
- 將素材圖層移至「基底」與「高光組」之間,即可獲得帶水晶質感的專屬徽章。
延伸應用
- 改變基底填色 + 漸變疊加顏色 → 紅寶石、藍寶石、琥珀等寶石質感。
- 將圓形改為圓角矩形、六邊形 → App 圖示、UI 按鈕、遊戲道具圖標。
- 高光形狀改為十字星、環形 → 不同折射特徵的水晶變體。
掌握「填充 0% + 圖層樣式」工作流,你就擁有了無限量產高質感水晶元件的製造機。