ps零基础入门钢笔工具的使用（重点掌握如下核心技巧）

钢笔工具及关联工具核心用法

前一节内容，我们重点掌握了PS钢笔工具快捷键、钢笔工具绘制的曲线是贝塞尔曲线、钢笔工具与路径选择工具、直接选择工具、转换点工具之间的核心关联。掌握了这些基础知识，并不意味着我们就可以快速自如地掌握钢笔工具、达到烂熟于心，运用游刃有余、出神入化。还需要小伙伴们一步一步，掌握每个必须掌握的技巧。小伙伴们也不要着急，很多做了多年设计工作的设计师，在灵活掌握钢笔工具方面，可能还存在一些问题。所以，我们只需掌握常用的重点技巧即可，多多实践，自然会达到熟能生巧的程度。刚开始学习，不要什么都想学，那样只会增加学习负担，学习效果大打折扣。

下面，我们在继续深入探讨钢笔工具用法的同时，先要温习一下，钢笔工具是用来设计形状，制作路径的。设计形状，具体绘制的图形是矢量图，矢量图的清晰度是其最大优点。所以，钢笔工具绘制形状具有先天优势。钢笔工具绘制矢量图这一功能和形状工具又发生了关联。因为形状工具绘制的图形也是矢量图。这里，小伙伴们仅仅需要把哪几个工具用来绘制矢量图，在意识上建立一个关联就行了。具体实践，以后结合实际例子再深入讲解。制作路径，就是可以把钢笔工具绘制的路径建立选区、填充，还可以在填充的基础上描边等，这些是基本用法。这里，又把钢笔工具绘制路径和前面讲过的描边、填充和选区联系了起来。同样，小伙伴们只需要将建立意识上的关联即可。

弧度比较自然 图1

弧度不太自然，锚点太多 图2

随意拖拽控杆 图3

控杆长 图4

控杆短，弧度不大 图5

• 自动连接式

还要注意一点，当一条路径绘制完后，如果鼠标不在空白处点击，它还处于被选中状态（图6）。如果松动鼠标，但又想继续绘制曲线，只需要在控杆旁边，在你需要绘制弧度的空白处用钢笔工具点击，新的弧线和原来的弧线自动连接在了一起（图7）。这点，小伙伴们并不需要特别记忆，只需要多多实践就可以很好地掌握并记住。当然，如果先前路径没有选中，那就用小黑工具选中路径或形状，然后继续在控杆周围空白处用钢笔工具点击，新老路径或形状自然连接在了一起（图7）。用小白工具也可以选中路径，只不过，小白工具和小黑工具是有区别的。前面讲过，小黑工具可以选中整条路径或整个形状进行移动；小白工具可以选中路径上任意一个点进行移动。这里，我们再补充一点，小白工具除过上述用法，还可以对路径一部分进行单独移动。方法是：用小白工具选中锚点旁边的一段路径，小白箭头变成了黑色箭头，小伙伴们试着对这段路径进行拖拽，发现只能移动一段路径（图8）。所以，小黑和小黑工具非常灵活，功能又很强大。可以这样比喻，小白工具和小黑工具就是钢笔工具两员得力大将，随时听从钢笔工具差遣。小黑工具整体“驾驭”，小白工具部分“管理”。

图片处于被选中的状态 图6

空白处用钢笔工具点击，新老曲线自然连接 图7

小白工具在弧线类似这样的部分点击，可以部分移动路径和形状 图8

• 路径绘制特殊方向的控制

当然，如果你按住shift键，拖拽控杆，小伙伴们发现控杆要么向垂直方向变换，要么45度角变化，要么水平方向变换（图8）。按住alt键，钢笔工具变成转换锚点工具了，我们发现，可以单独对滑杆的一半进行控制（图9）。这就进一步印证了我们前面总结的shift控制方向、按住alt起到转换作用（前面提到复制作用）的说法。这里是将钢笔工具转换成转换点工具。转换锚点的说法。这里之所以再次提出，是为了让小伙伴们将这些知识点联系起来，更容易记忆和理解。转化点工具的深入用法，下文会讲到。

按住shift键可以对控杆水平、垂直拖拽

按住alt键，可以对控杆的一半单独拖拽

添加锚点对某个部分单独编辑

添加锚点，其本质作用就是为了对添加锚点的地方进行单独编辑。

• 让弧度更弯曲

比如我要对红色标记的地方添加锚点，让其弯度更弯，只需要将钢笔工具放在该处路径上，随即出现钢笔工具右下角带“ ”的箭头，表明可以在此处添加锚点，如（图1）。既然可以对该处添加锚点，也就是说，小白工具、转换锚点等工具在添加锚点后都可以使用，如（图2）。

• 改变图形某处弧度

在UI等设计中，往往需要在形状工具绘制的图形中，对部分地方进行弧度改变，就可以使用钢笔工具进行操作。譬如我们要对圆角矩形下面边框中间下拉，让其变得有弧度，就可以在圆角矩形中间位置用钢笔工具添加锚点，然后用小白工具下拉一定距离，距离大小可以用键盘上向下的方向键下拉一定数值的距离（方向键每次下拉1PX距离，按住shift 每次下拉10PX距离，这点以前内容介绍过），或者随意拉下到自己想要的结果，如（图3），这种操作既规范又效率高。

图1

图2

图3

删除锚点对某个部分单独编辑

删除锚点，其本质作用就是为了对删除锚点的地方进行单独编辑。

• 让弧度变得更圆滑

我们要删除红色标记的地方的锚点，如（图1），让弧度变得圆滑，如（图2）。删除后，弧度变得比之前圆滑很多。

• 改变图形形状

在UI、插画、卡通人物等设计中，往往需要比较规范地改变图形形状，这个时候就需要删除锚点（当然，用小白工具选中此处锚点，delete删除也可）。譬如要删除红色标记的圆形下端锚点，如（图3）。删除后变成（图4）的样子。如果我们继续需要将改变后的不规则圆形左右两端锚点向下拉或者向下拉，直接用小白工具，分别，注意是分别用方向键移动，如（图5）。如果同时移动，注意不要选中图形下端的锚点，否则，下端也跟着移动。很多设计小白不清楚，为什么明明同时选择的是左右两个锚点，下面锚点也跟着移动，就是这个原因。当然你要想让下面锚点同时移动，同时选中即可。也就是说，选哪个，哪个移动。

图1

图2

图3

图4

图5

自由钢笔工具很随便

• 不标准，但自由

另外，自由钢笔工具绘制路径，从自由二字可知，它绘制的路径不标准，就是随便画一个形状或者绘制路径，这个工具不太常用，小伙伴们了解了解就行了。

弯度钢笔工具绘制路径和形状

• 弧度体现最省力、最明显

对于绘制具有弧度的形状或者路径效果明显。刚开始绘制，弧度不太明显（图1），特别当你朝着某个具有弧度的方向继续绘制时，弧度效果体现最明显（图2）（图3）。但如果形状或者路径还没有闭合，还差最后一步，效果如（图4）所示，是直线型的。没有关系，当你用弯度钢笔工具点击最后一个锚点，曲线自动连接，自然变成弧度，这点真是太方便了（图5）。

按箭头所指方向向上弯曲 图1

弧度体现最明显 图2

弯度太顺畅 图3

图4

图5

转换点工具2种核心用法

• 直接转换法——弧线锚点和角度点之间相互转换

直接选择转换点工具。然后在路径上点击弧线上的锚点，我们简称弧线锚点（图1），我们发现，这些锚点变成带有一定角度的锚点，我们把它叫做角度点（也可以叫做角点。为了形象好记，我在这里把角度叫做角度点），如（图2）。既然是转换点工具，说明它有可逆操作的功能，即可以再次返回到弧线锚点上来。具体就是，还用转换点工具点再次击弧线锚点，不要松动鼠标，来回拖拽，如（图3）。这点，我们在以前的内容中提到过。很多设计师绘制包子脸，就是上小下大的脸型时，为了规范操作，往往会把转换点工具转换成钢笔工具，然后按住alt shift（控制水平方向）使用，很方便，如（图4）(图5）。

用转换点工具点击上面的锚点 图1

变成了带有角度的角度点 图2

转换点工具再次点击弧线锚点，来回拖拽

alt shift 图4

图5

• 空白点击法——钢笔工具和转换点之间配合绘制半曲线

先用钢笔工具绘制一个弧度（图1），在红色标志的地方，我们发现箭头变成钢笔工具后面右下角拽着一个转换点工具，按住alt键点击，曲线变成半个弧度（图2）。如果我们继续绘制弧度，还是用钢笔工具在空白处点击，新旧弧度自然连接在一起（图3）。这点和上面提到的自动连接式绘制路径的方法一样，就是在保持路径选中、钢笔工具松开的状态下，在空白的地方用钢笔点击，新旧路径自然连接。

钢笔工具绘制弧度 图1

按住alt键点击后，变成半个弧度 图2

新旧弧度自然连接 图3

总之，无论对原有曲线（包括路径和形状）继续绘制，还是对半曲线的继续绘制，共同的做法是，当鼠标已经松动，要继续绘制，只需在空白处点击，新旧路径（形状）自然连接。

最后，我们一定要知道，钢笔工具用于绘制有弧度的图形，如果要用钢笔工具绘制圆形或者矩形，就很不规范，这个时候，形状工具就派上用场了。也就是说，布尔运算里，合并、相交、排除都与选区工具、形状工具、钢笔工具分不开的。所以，掌握好布尔运算，就得多多练习上述这三类工具。

---

路径操作模式以及路径与选区、布尔运算特殊“姻缘”

钢笔工具等与之有关的工具介绍完了，小伙伴们只要认真体会每句话的意思，多多练习自然会有更深的体会。下面，我们看看钢笔工具无论路径（图1），还是形状（图2）都有对齐、路径操作各种模式等功能。这也是学习钢笔工具绕不过去，同时又不容易掌握，但掌握好特别提升设计能力的部分。

图1

图2

路径和选区有天然“姻缘”

路径往往和选区有天然的“姻缘”关系。一想到选区，自然想到填充和描边。小伙伴们要有这样的发散思维。

路径转化为选区方法基本有3种，一种是选中要建立选区的路径，按住ctrl，鼠标左键点击路径缩略图，如（图1）；或者选中要建立选区的路径，点击鼠标右键，弹出框中有“建立选区”选项，如（图2）；或者在路径空白处点击鼠标右键，也会弹出“建立选区”选项，如（图3）；或者选中要建立选区的路径，ctrl enter，路径变成了选区。小伙伴们只需要记住其中一个方法即可。

常用到的是路径操作各种模式，如合并、减去顶层形状、与形状区域相交、排除重叠形状等。这里，我们先绘制两个路径，如（图4），然后通过案例只举其中减去顶层形状一个操作模式，结合路径转换为选区进行说明，如（图5）。我们观察缩略图，再和图2的缩略图对比，我们发现，减去顶层形状后，虽然画布中的图形没有变化，但缩略图里的颜色由白色变成了黑色。如果选择与形状区域相交，缩略图里的变化看得更清楚了。为了看得特别清楚，我们可以在路径面板中选择用前景色填充路径（或者alt delete填充），我们发现，不但画布中相交的地方被填充了颜色，缩略图中相交的地方也变成了白色，如（图6）。其他操作这里不在赘述，小伙伴们下去自己绘制路径多多练习体会。

图1

图2

图3

图4

缩略图变化 图5

图6

路径单独可以操作

特别要注意的是，即便两条路径处于合并状态，我们也可以用小黑工具选中其中一个，如（图7），进行放大、缩小、旋转等操作，如图（8）；也可以对单个锚点用小白工具进行编辑，如（图9）。但如果对两条路径合并组件后，两条原本独立的路径变成1条，如果进行编辑，就是对整条路径进行操作了，如（图10）。

图7

图8

图9

图10

路径与布尔运算特殊“姻缘”

以上关于路径几种操作模式，对于理解并掌握布尔运算特别重要。路径操作模式和布尔运算，在UI设计中，常常用于一些图标设计，或者常用于LOGO等标志性的设计，可谓运用广泛，小伙伴们一定要认真掌握。譬如，我们要把这两条路径合并（图11），制作一个抽象图形的轮廓图，我们这里运用了排除重叠形状模式，如（图12），然后填充。当然，钢笔工具用于绘制有弧度的图形是完全可以的，但绘制矩形、圆形这些图形，就得用到形状工具了。

图11

图12

---

路径几种对齐、排列方式

• 以什么方向对齐，就是以什么方向和中心为基准进行布局排列

很多路径同时存在，有时候需要对路径进行对齐排列，如（图1）。一般情况下，有2条包括2条以上的路径，就可以执行除“按宽度均匀分布”“按高度均匀分布”外的所有命令。具体是用小黑工具同时选中所有路径，进行相应的对齐操作。如水平居中，如图（2）。路径对齐的方式和图层对齐操作方式一样。小伙伴们只用掌握，左对齐是以左边图形为中心，其他图形向它靠拢对齐；右对齐是以右边图形为中心，其他图形向它靠拢对齐，其他以此类推。要执行路径对齐的所有方式，就需要3条包括3条以上的路径。这点大家了解就行。至于对齐到选区，就是以选区为基准对齐；对齐到画布，就是以整个画布为基准进行对齐，这里我先选中对齐到画布，然后顶边（图3），这两点小伙伴们仔细体会。

图1

图2

以画布为基准顶边对齐 图3

• 路径排列方式对于布尔运算中，特别是减去顶层形状后图形的最终形状有很大影响

路径面板中，我们如果在同一路径中绘制了几条路径，当对同一路径位置进行不同更改后，执行减去顶层形状命令后，最终形成的形状不同。

减去顶层形状命令，说白了，就是顶层形状减去它本身以及与底层形状相交的部分（图4）。

下面，我们选中桃形路径，将其置于顶层，让桃形路径和三角形路径分别处于合并形状状态，然后选中桃形路径，执行减去顶层形状命令，我们发现缩略图里的桃形被减去了（图5）。为了看得更清楚，我们填充颜色（ alt delete)，颜色填充后，就形成了（图6）的形状。

上面是把桃形置与顶层，如果我们把桃形置于底层，再试试看执行减去顶层形状命令后，最终会形成什么形状。我们发现，至于底层后，得到的填充完颜色的形状如（图7）。

特别要注意的是，在执减去顶层形状命令时，一般谁在顶层就选择谁，如果选择了底层，会连带把空白的背景纳入减去的范围，这点小伙伴一定要注意。譬如，我们让桃形处于顶层，让两个图形先都处于合并形状状态，然后，我们要执行减去顶层命令，本应该选择处于顶层的桃形，如（图8），得到（图9）的结果。但如果我们选择了处于底层的三角型（图10），我们得到的是（图11）这样的结果，这可能不是我们想要的。事实上，执行减去顶层图形命令，我们事先就要通过图形观察，预判减去顶层命令后，会剩下什么图形（图12）。但如果我们把底层误选为顶层，即把底层的三角形误选为顶层，那么，三角形相对于白色背景来说 ，它却处于白色背景的顶层，所以，相当于减去了白色背景顶层的三角形的部分，同时，又减去了顶层的桃形，这个过程进行了2次布尔运算。通过这样的观察和预判，非常有助于我们决定把哪个图形放在顶层。当然，这需要有相当熟悉的布尔运算经验，以及扎实的观察能力和预判力。

同时，一定要保持每个图形都是合并形状状态，才能执行减去顶层命令。

图4

图5

图6

图7

本应选择顶层的桃形 图8

本应得到图9结果

图10

图11

观察预判 图12

上面我们提到图层位置处于那层的问题，我们也仅仅举了图层处于顶层和底层的两种情况。至于图层前移一层，后移一层，这是针对多个路径而言的，操作起来也方便，这里不再赘述，我们在后面遇到实践操作，再深入讲解。

---

,