从零开始画图标系列：进阶线性图标设计实战

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

在之前的文章《从零开始画图标系列：线性图标设计实战演示！》中，我们已经讲解了线性图标的绘制方法，在本篇文章，我们就可以从它的基础中延伸出其它线性风格的设计过程。

往期回顾：

• 《从零开始画图标系列：超全面的基础知识》
• 《从零开始画图标系列：工具类图标设计规范》
• 《从零开始画图标系列：线性图标设计实战演示！》
• 《从零开始画图标系列：面性图标设计方法详解》
• 《从零开始画图标系列：装饰图标设计指南》
• 《从零开始画图标系列：启动图标设计指南》
• 《从零开始画图标系列：图标应用详解》

多种粗细风格

通常多种粗细风格的线性图标，会在图形内部选择某条线段，修改它们的描边值。例如在之前的演示中，我们使用了 2pt 粗细的描边，那么通过将图形内部的线段修改成 1pt 的描边，就能制造这种效果。

在这种风格中，如果图形只通过外轮廓展现，就无法融入这个风格的特征，比如点赞的心形图标、搜索图标等。所以设计图形的过程，就得保证它们有内部线条的运用。常见的做法就是在原图标的基础上，进行一些「复杂化」的处理，为它们增加内部的线条样式，比如下面的案例：

有时候为了强化线条间的对比，会降低内部线条的透明度或饱和度，来增加视觉观赏性，比如我们将案例中的图标进行对应调整，最后的效果如下：

描边缺口风格

这种风格看起来简单，实际在细节处理上有很多麻烦。有哪些问题呢？我们来看看实际的操作和解决方案。

首先我们要做的是搜索图标的缺口，通常开口是在原型的镜片边框上。那么，就可以先画一个矩形，并将它进行旋转，用来确定我们要裁切的区域。多数新手会以为只要用这个矩形，和底部的圆进行减去顶部图形操作就可以得到目标图形，其实这个想法是错的。

布尔运算不会改变图形本身的闭合状态，即使裁切了，缺口的部分也会被连接起来。所以，要实现真的缺口，就得换种做法。

方法1

第一种，是使用路径锚点删除的方法。即使用添加锚点工具在两个图形交汇点上打点，然后在中间随意添加一个锚点，再删除它，就可以获得缺口的效果。

这时候，只要在描边设置中，将边缘设置成圆角，就可以获得圆润的切口边缘。

这个操作有个问题，就是会导致圆形本身作为一个闭合路径，变成了非闭合路径。那么本身图形的部分属性设置就会出问题，最直接的就是描边设置，无论原本使用外描边或者内描边，都会转化为居中描边。

在工具图标设计演示中，我们应该知道，使用内描边是最容易控制图形实际大小，以及符合像素对齐规范的，但在这类风格的使用上我们要尽可能在一开始设计时就使用居中描边。而居中描边的使用需要在画布中开启「对齐到像素」的选项，并关闭另外两项，才能保证操作的规范性。

通过文章的形式这个问题很难描述清楚，大家可以自己动手尝试一遍。

方法2

方法1 理论上可以解决大多数问题了，但还有一些说不清道不明的原因，会导致演示 1 中的方法失效。所以，在第 2 个演示中，我们来应用另一种方案。

这种方案重点使用的功能是「轮廓化描边」，也就是一个将所有路径格式转化成完整的比例路径图形的操作。它具体的操作方式是，选中任何矢量图形，然后点击工具栏的对象 - 路径 - 轮廓化描边。

通过这个方法，就可以将描边的图形转化成一个完整的矢量图形，而原本路径的描边就失效了，变成了路径填充色。

当这个图形变成了一个完整的闭合路径以后，就可以用布尔运算进行裁切了。

到这一步，操作看起来都很简单，但有不和谐的地方，就在切口边缘的调整上。如果设计的风格使用尖角，那么不用做什么处理；如果使用圆角，那么这个半圆就非常棘手了。

通常，要制造这个圆角，需要我们画一个直径和之前描边相等的圆，然后关闭所有对齐的选项，再将圆移动到这个边缘中，使它可以和边缘的两侧对齐。

这一步操作是依靠目测完成的，不够严谨，虽然可以通过一些特殊的几何辅助线手段来得到这个圆具体的坐标位置，但往往操作起来太复杂没有可行性。

并且，路径查找器会破坏原本路径的特征，将描边的状态变成了填充状态，会增加我们对整个图形细节调整的成本。所以，尽可能不使用这种方案。

多色描边风格

多色描边的风格，设计起来非常简单，就是更改图标其中一个线段的色彩。和粗细不同的风格一样，如果图标图形没有比较合适的线段来添加一个新的颜色，那么也可以对其进行「复杂化」的处理，多增加一些线段出来。

如果想有一些更有趣的表现，也可以将图标强行拆分成若干线段，然后再替换其中一条的颜色。比如在优惠券图标中，我们可以将虚线左侧的描边修改成其它颜色，而不是调整虚线的色值。

渐变描边风格

渐变描边其实就是为描边填充渐变色，这也就需要我们提前将图标的图形进行轮廓化描边，然后将所有线段进行「联集」，才能统一进行渐变色的处理。

在渐变描边中，要遵守一个规则就是我们要保证渐变的方向和强弱关系是一致的。比如我们使用 45° 倾斜的渐变角度，并且左上颜色较深，那么所有的图标都应该遵守这个规律。

只要在做出第一个图标的渐变以后，通过吸管工具吸取渐变，就可以轻松完成渐变的复制。在这个规则下，既可以使用相同的渐变色，也可以使用不同的渐变色。

描边叠加风格

最后，我们来讲讲描边叠加的设计风格。在图例中应该发现了，我们将圆角改成了直角，之所以有这样的调整，是因为直角在相交的过程能比较好的进行拼合，更适合叠加风格的设计。

在设计这类风格的过程中，主要的难点在于拼接的方式，因为有的图形看起来是一体成型的，需要我们额外为它创造出拼合结构。比如心形图标，在制作过程中就可以通过路径查找器的相关功能将它拆分成两个部分。

在完成了图形的编辑以后，下一步才是填充色彩，在这种风格中可以使用渐变也可以使用纯色，但是我们要为不同的图层添加透明度，才能制造出叠加的效果。如果是在 PS 或是 Sketch 中，除了使用普通透明度的方式，还可以通过调整「图层混合模式」来呈现出更好的叠加效果。

最后，要注意的是，如果使用了图层混合模式，那么要把这个图形导出 PNG 格式以后，再在实际的项目中使用最佳，否则图标应用背景不是白色的情况下可能效果与预期不符。

结语

从这些案例演示中，可以看到只要设计出了基本的线性图形，那么在进一步切换风格的时候是非常容易的。有了这些风格的设计经验，在真实的设计中就不会被禁锢在最基本的基础线性图标设计，可以尝试给它们增加新的视觉样式，丰富界面的视觉体验。

欢迎关注作者的微信公众号：「超人的电话亭」