PS教程：如何高效绘制空心圆环？5种主流方法全解析
在Photoshop（PS）的设计工作中，绘制空心圆环（Annulus）是一项基础但高频出现的技能。无论是制作UI界面的加载动画、设计Logo元素，还是制作复杂的几何图形，掌握空心圆环的绘制技巧都。
很多初学者只会运用“椭圆工具”并尝试通过调整描边来制作，但这在处理复杂排版或精确尺寸时容易遇到对齐困难、边缘锯齿或修改不便的问题。这篇文章将为你系统梳理5种绘制空心圆环的方法，从基础到进阶，帮助你根据场景选择最高效的方案。
核心方法对比概览
在深入细节之前，我们先经过一张表格对比不同方法的优缺点及适用场景，帮助你快速决策。
| 方法名称 | 操作难度 | 修改灵活性 | 精度控制 | 适用场景 |
|---|---|---|---|---|
| 1. 双椭圆减法 | ⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | 通用设计、Logo制作、需要精确内外径时 |
| 2. 椭圆描边+路径操作 | ⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | 快速制作、简单图标 |
| 3. 形状生成器工具 | ⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | 快速合并或减去多个形状 |
| 4. 路径查找器（布尔运算） | ⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | 批量处理、复杂图形组合 |
| 5. 矢量插件/脚本 | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | 高频重复工作、参数化设计 |
数据说明：以上评分基于实际操作体验的主观评估。其中，“修改灵活性”指后续调整半径、粗细或颜色的便捷程度；“精度控制”指能否通过输入具体数值（如像素值）来确保图形准确。
方法详解：从原理到实操
方法1：双椭圆减法（最推荐，标准做法）
这是最经典、最符合矢量逻辑的方法。其核心思想是：用一个大圆减去一个小圆，中间剩余的部分即为空心圆环。
操作步骤：
1. 新建文档：按 `Ctrl+N` 新建画布。 2. 绘制外圆：- 选择 椭圆工具（快捷键 `U`）。
- 在顶部选项栏设置：填充为任意颜色，描边为无。
- 按住 `Shift` 键拖动鼠标，绘制一个正圆。
- 在顶部属性栏输入精确的 宽度 和 高度（：100px × 100px）。
- 保持椭圆工具选中状态。
- 在画布中心绘制一个较小的正圆。
- 确保内圆的宽度小于外圆（：60px × 60px）。
- 关键技巧：按住 `Alt + Shift` 从中心绘制，可确保两个圆同心。
- 在图层面板中，选中 内圆图层，按住 `Ctrl` 键点击 外圆图层，选中这两个图层。
- 在顶部选项栏中，点击 “减去顶层形状” 图标（或按 `Ctrl+E` 合并图层，但建议保留为形状图层以便修改）。
- 或者，更推荐的方法是：将两个图层合并为一个形状图层后，使用 路径操作 中的“减去顶层形状”。
✅ 优点：可无限调整内外径，边缘平滑，矢量无损。
❌ 缺点：步骤稍多，需手动对齐。
方法2：椭圆描边 + 路径操作（快速法）
如果你只须要一个固定宽度的圆环，此方法更快捷。
操作步骤：
1. 运用 椭圆工具 绘制一个正圆。 2. 在顶部选项栏设置：- 填充：无
- 描边：选择你想要的颜色
- 描边粗细：输入数值（如 20px）
- 右键点击图层 → 转换为智能对象（可选，便于非破坏性编辑）。
- 或使用 路径查找器：复制该圆，缩小后减去。
⚠️ 注意：此方法直接绘制的“描边圆”在导出为PNG时，中间是透明的，视觉上就是空心圆环。但若需进一步编辑（如改变内径），仍需转为形状并调整。
方法3：形状生成器工具（直观高效）
适合喜欢“所见即所得”的用户。
操作步骤：
1. 绘制两个同心圆（外大内小），分别位于不同图层。 2. 选中这两个图层。 3. 选择 形状生成器工具（快捷键 `Shift+M`，与切片工具在同一组）。 4. 在两个圆重叠区域，按住 `Alt` 键（光标变为带减号的箭头），点击内圆区域。 5. 内圆被“挖掉”，剩余部分即为空心圆环。✅ 优点：操作直观，无需记忆复杂快捷键。
❌ 缺点：对图层顺序有一定要求，需手动对齐。
方法4：路径查找器（适合复杂组合）
当你的设计涉及多个图形组合时，路径查找器强大。
操作步骤：
1. 绘制外圆和内圆，确保它们在同一个图层组或已合并为形状。 2. 打开 路径查找器 面板（窗口 > 路径查找器）。 3. 点击 “减去顶层” 按钮。 4. 完成。✅ 优点：可批量处理多个形状。
❌ 缺点：一旦应用，原始形状不可单独编辑（除非利用智能对象或保留副本）。
方法5：参数化脚本/插件（高阶自动化）
对于须要大量生成不同尺寸圆环的用户，可使用脚本。
示例：使用“生成圆环”脚本
- 安装如 Phlearn 或 Adobe Exchange 上的免费脚本。
- 设置参数：外径、内径、颜色。
- 一键生成。
✅ 优点：极致效率，适合工业化设计流程。
❌ 缺点：需额外安装插件，学习成本高。
常见问题与优化技巧
为什么我的圆环边缘有锯齿？
- 原因：分辨率过低或抗锯齿未开启。
- 解决：
- 确保画布分辨率 ≥ 72 PPI（屏幕显示）或 300 PPI（打印）。
- 在顶部选项栏勾选 “抗锯齿”（Anti-aliasing）。
- 使用矢量形状而非像素画笔绘制。
如何确保内外圆完全同心？
- 技巧：
- 绘制个圆后，记录其中心坐标（在选项栏查看 X/Y 值）。
- 绘制个圆时，手动输入相同的中心坐标。
- 或使用 对齐工具：选中两个圆，点击顶部选项栏的“水平居中对齐”和“垂直居中对齐”。
空心圆环的描边宽度如何精确控制？
- 公式：`描边宽度 = (外径 - 内径) / 2`
- ：外径 100px，内径 60px，则描边宽度应为 `(100 - 60) / 2 = 20px`。
| 场景 | 推荐方法 |
|---|---|
| 日常UI设计、Logo制作 | 方法1：双椭圆减法（最稳定、最灵活） |
| 快速草图、简单图标 | 方法2：椭圆描边（最快） |
| 多图形组合编辑 | 方法3：形状生成器 或 方法4：路径查找器 |
| 批量生产、参数化设计 | 方法5：脚本/插件 |
建议：
对于绝大多数设计师，熟练掌握“双椭圆减法” 是需要技能。它不仅适用于空心圆环，还可推广到其他环形、月牙形等复杂几何图形的绘制中。记住：矢量形状 > 像素绘制，始终使用形状图层而非画笔，以确保你的设计在任何尺寸下都保持清晰锐利。
希望这篇文章能帮助你更高效地在Photoshop中绘制空心圆环！如有其他疑问，欢迎在评论区留言讨论。