萬盛學電腦網

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

PS 藍色圓形網頁按鈕精細教程:輔助線定位與多層光影雕刻

教程要求

需熟悉 PS 基礎工具命令 (加深/減淡、圖層樣式、輔助線、筆刷等),細節操作不再贅述,聚焦關鍵光影邏輯與圖層結構。

效果預覽

關鍵步驟解析

1. 基準系統建立

  • 500×500px 白底,畫布中心十字輔助線作為所有圓形繪製基準點

2. 外環描邊層 (50% 灰 + 圖層樣式)

  • 正圓選區填 50% 灰 → 圖層樣式 (斜面浮雕/內陰影/漸變疊加/描邊) → 金屬質感外環

3. 內圈白色高光面

  • 新建圖層 2,較小白色正圓 (圖層 2)
  • 選中圖層 1 (描邊層) → 較大正圓選區 → 加深/減淡工具繪製上下部明暗 → 隱藏輔助線

4. 中間灰面層 (50% 灰 + 圖層樣式)

  • 比白圓大的選區填 50% 灰 → 圖層樣式 (內陰影/斜面浮雕/漸變疊加) → 中間過渡面

5. 頂部漸變高光帶

  • 圖層 4:載入圖層 2 選區 → 白→透明直線漸變 → 不透明度 50% → Ctrl+T 變形壓扁
  • 高斯模糊 2px

6. 藍色發光環 (#97e0ff)

  • 新建圖層,橢圓工具減法模式做月牙選區 → 填 #97e0ff → 高斯模糊 20px → 不透明度 40%

7. 文字圖形與邊緣高光路徑描邊

  • 添加文字/圖形裝飾
  • 鋼筆繪製路徑 → 前景 #b6edf7 畫筆描邊 → 邊緣微光收尾

光影邏輯圖解

從外向內:金屬外環 (描邊+斜面) → 陰影過渡面 (加深減淡手繪) → 白色高光面 → 灰色中間面 (樣式) → 壓扁漸變高光帶 → 藍色發光環 → 邊緣路徑描邊微光。每層對應真實物理光影層級,圖層結構清晰對應光學現象,而非隨意堆疊特效。

copyright © 萬盛學電腦網 all rights reserved