怎么用Sketch画图标？

布尔运算后描边样式变了？

裁切形状后，描边端点变歪/斜了？

布尔运算后无法调节圆角了？

无法选中想要调节的锚点？

不知道如何用基础形状绘制常见图标？

… …

如果你有以上疑问，以下内容将对你有所帮助。

- 1 -

如果想要得到端点圆头的描边，需要使用居中描边样式才行（最好一开始就用居中描边，因为闭合的内/外描边路径断开后，端点无法改变为圆头）

- 2 -

内描边/外描边的非封闭路径进行路径合并后，描边样式会变为居中，且不可修改；当你执行路径合并后，描边样式发生变化就是这个原因。

两个封闭路径路径合并后，描边样式不会发生变化。

- 3 -

闭合路径快捷键：command+alt+O

进入编辑路径快捷键：Enter

退出编辑路径快捷键：Esc

只有ENTER进入路径编辑状态时，才会出现路径对齐到像素/半像素/不对齐像素边缘选项

- 4 -

如图进入编辑状态，默认选中的锚点是④，当想要调节锚点①时，直接点锚点①路径会自动闭合；这时需要先选中锚点②或③，再点锚点①就可以选中了

- 5 -

如下面的相机小图标，当外轮廓用几何形状绘制而非钢笔绘制时，过程如1-4，为3中的a/b处加圆角即可得到4；但是进行布尔运算后，a/b处并不能添加圆角，这时需要对布尔运算后的形状进行flatten(拼合路径)后，就可以为其添加圆角了。

注：只有当锚点类型为笔直时才能添加圆角；即只有直线的拼合路径才可以直接调节圆角属性

- 6 -

当遇到有曲线的拼合路径时，已经不能按照5中的方法调节圆角。如下图我们想要通过A圆形和圆角矩形得到C，A拼合路径后无法调节锚点①②，这种情况需要把锚点转换为Straight才能加圆角

在转换为Straight后，①②锚点上面的圆弧会改变怎么办呢？这时可以向下调节③④锚点下面的手柄a、b，如果要跟圆形弧度完全一致的话需要把a/b手柄的长度调成跟c/d一样长（精确的位置可以在进行布尔运算前的XY轴坐标里找到，或者复制一个A中的圆形，找到a、b的Y轴位置即可）

这种情况远没有在ai里绘制高效，本文只是提供在sketch里绘制的方法，虽然看上去麻烦但我还是习惯了都在sketch里画

延伸阅读

如果过A中的圆角矩形为直角时，且在拼合路径后再调节下面的圆角，会出现问题：如拼合后先调节锚点③④的圆角成最大，再调上面圆角后会使下面圆角变小呈图C状；如拼合后先调节锚点①②的圆角，则下面圆角最大只能调成图D状

理解这种现象：

这是因为在sketch里，拼合后调节锚点①②③④的圆角，其实是在调节一个由四个锚点连成的矩形，如图E，你调解下E的四个锚点会出现同样的现象，当四个点连成的矩形是正方形或者高度大于宽度的矩形时则不会出现上述状况

- 7 -

绘制描边为奇数，描边位置为居中的图标时：

①用矩形/圆形绘制时默认是无法无法对齐像素

②用line直线工具绘制默认则是对齐到像素

③用钢笔绘制的奇数线通常也无法对齐到像素（但将路径设置为对齐到半像素且放大到最大显示网格时，点在半个像素的位置画则可以对齐）

①和③中如果要对齐到像素，有两种方案：一是在绘制完成后，在x,y轴位置上各加0.5px的偏移；二是先将图标的描边轮廓化后，再点一下Round To Pixel（对齐到像素）按钮

- 8-

微信关注“小桔设计”，查看完整内容