播放器 UI 中的圆形控制按钮（播放/暂停、上一曲/下一曲）看似简单，实则考验「质感层次」与「光影逻辑」。本教学仅用「椭圆形状工具 + 图层样式 + 剪贴蒙版」，零笔刷手绘，10 分钟产出可直接切图上线的高保真按钮组。

最终效果

画布与背景准备

1. 新建 800×600 px / 72 dpi 文档。
2. 前景色 #eceff6，背景色 #bec1cc。新建「渐变填充图层」，线性渐变，勾选「反向」「抖动」「与图层对齐」，营造微妙纵向明暗过渡底纹。

主体按钮：三圆同心 + 统一样式

1. 形状工具（U）绘制三个同心圆（外径 120/90/60 px），选中三图层，选项栏点击「水平居中对齐」「垂直居中对齐」。
2. 双击最外层圆图层，配置「图层样式」组合拳：

• 斜面浮雕：内部斜面、平滑、深度 150%、方向「上」、大小 10 px、柔化 3 px、高光模式「滤色」不透明度 75%、阴影模式「正片叠底」不透明度 50%。
• 内阴影：混合模式「正片叠底」、不透明度 30%、角度 90°、距离 3 px、扩展 0、大小 8 px。
• 渐变叠加：线性、角度 90°、比例 100%、渐变从 #ffffff (0%) 到 #e0e6f0 (100%)。
• 外发光：混合模式「滤色」、不透明度 40%、噪点 0%、颜色 #a8b8e0、技法「柔和」、扩展 0、大小 6 px。
• 投影：混合模式「正片叠底」、不透明度 25%、角度 90°、距离 2 px、扩展 0、大小 4 px。

3. 点击「样式」面板「新建样式」保存为「Player_Btn_Base」。
4. 其余两圆直接点击该样式一键套用，保证三圆质感绝对统一。

内圈图标底座：动感模糊模拟凹陷

1. 复制最内层圆，删除样式，Ctrl+T 缩放 80%，填充 #2d3a5e 深蓝灰。
2. 滤镜 → 模糊 → 动感模糊：角度 0°、距离 15 px，制造径向凹陷视觉。
3. 矩形选框框选多余模糊溢出区，删除。将图层移至圆形群组底部，不透明度 25%~75% 视背景深浅调整。

外圈光环：大尺寸斜面浮雕 + 柔和投影

1. 新建更大圆形（直径 160 px），复用「Player_Btn_Base」样式，微调两项：

• 斜面浮雕：大小改 18 px、柔化 5 px。
• 投影：距离 4 px、大小 10 px、不透明度 20%。

最终组装与切图建议

将所有按钮相关图层置入「Controls」群组。导出时：

• 选中群组 → 右键「导出为」→ PNG / WebP，勾选「包含图层蒙版」。
• 或使用「生成图像资产」（图层名命名为 `btn_play.png` 等），实时同步导出文件夹。

举一反三：同套样式改色相（Hue/Saturation 调整图层剪贴）即可生成「深色模式」「品牌色」「高对比度无障碍版」三套皮肤，维护成本极低。

更多 UI 图标实战请关注三联 Photoshop 教程栏目，三联 PS 群：339853166 欢迎加入。