钢笔工具进阶技巧！如何画出完美的贝塞尔曲线？

编者按：上次，一位同学抱怨钢笔工具特别难用。描述轮廓花了一个多小时。幸运的是，本教程及时拯救了他。他一眼就能理解并立即使用它。强烈推荐。此外，本教程可能是作者在文章中提到的一篇外国文章：“干货！贝塞尔曲线的秘密，设计师必须掌握

在力力初学 UI 在复制许多作品时，每次复制基本上可以分为两个步骤。第一步是用钢笔工具和形状工具勾勒出物体，第二步是填充形状的颜色，然后添加一些渐变或投影。我喜欢填充颜色和细节，但轮廓总是崩溃，曲线总是不光滑，不知道问题在哪里，事实上，钢笔工具没有很好地掌握。

后来看了一篇外文，写的是 Illustrator 在使用钢笔工具的技巧中，我明白了如何用钢笔工具画曲线。今天，我将结合那篇文章和我的感受来谈谈 UI 钢笔工具是设计中的难点。

准备工作，检查橡皮带工具

每个人都应该熟悉钢笔工具。中间有一个节点，两边有两个手柄。调整手柄的方向可以控制曲线的方向，调整手柄的长度可以控制曲线的弧度。这就是上述动态设计所表达的。

使用钢笔工具时，有一个选项可以帮助我们，称为橡胶带。检查完成后，曲线将随鼠标移动，以方便我们预览曲线的方向。看下图，点击图片右侧的齿轮检查：

节点手柄的方向和位置是画曲线的关键

接下来，我们将开始用钢笔工具画曲线。在绘画之前，我们可以看到高级曲线 UI 设计师如何处理曲线节点，请参见以下两张图片：

从图中我们可以发现，这些节点的方向是有规律的，遵循秩序，第一个规则是：除了曲线结束的角，所有节点的手柄不是水平或垂直的，具体情况应根据曲线的方向，如果曲线水平，手柄的方向是水平的，如果垂直，方向是垂直的。第二个规则见以下两张图片：

图中的红圈代表水平节点，蓝圈代表垂直节点。从图中可以看出，不仅手柄的方向有规律，节点的位置也有规律。第二个规则是所有节点都在曲线上 “最” 外侧或者 “最” 内侧。简单地说，如果曲线突出，节点将放置在最突出的位置。如果节点是凹的，则应将节点放置在最凹的位置。掌握了这两条规则，你就可以轻松地画出完美的曲线。

实战演示

例如，用钢笔工具画上图片 “ S ”

根据第二个规律，所有节点都在曲线最凸或最凹的地方，节点依次画在这些位置。

根据第一个规则，手柄的方向要么垂直，要么水平。鼠标长按钢笔工具，在菜单结束时找到转换点工具，即图片中 “T” 按住上面的那个 shift 点击节点拖动，将手柄拖出每个节点。此时，拖出的两个手柄相同长度，位置可能正确，无需刻意调整。

拖出所有手柄后，我们开始调整细节，或者使用转换点工具，按住它们 shift ，将每个手柄分开拖动，使曲线一致。

所有手柄调整完成后，大功完成！

今天的教程主要讲钢笔工具的使用技巧。只要我们掌握了它，我们就可以在世界上画出任何形状。再加上颜色和纹理，我们可以创造出精彩的设计。我们必须多练习。钢笔工具可以说是基础，但也是 UI 大家加油，设计上的一个难点！下一期想说说线框小图标的设计经验。

欢迎关注作者微信微信官方账号:

 「新手学 PS 最难掌握的四个部分」

1. htttpspspratpspratpratpspratps://www.uisdc.com/photoshop-matting-chniques2. 钢笔工具，https://www.uisdc.com/bezier-curves-pen-tool-website3. 图层样式，https://www.uisdc.com/ui-design-layer-style4. https计算https://www.uisdc.com/photoshop-design-mascot-kangkang

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================优设网==============.com“它是中国最受欢迎的网页设计师学习平台，专注于分享网页设计、无线终端设计和PS教程。设计师需要阅读的100本书：历史上最完整的设计师图书导航：http://hao.uisdc.com/book/.设计微博:拥有180万粉丝的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源，下载顶级设计材料。设计导航：推荐世界顶级设计网站，设计师必须导航：http://hao.uisdc.com