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

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

多种粗细风格

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

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

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

描边缺口风格

种风看来简单，际在细节处理上有很烦。有哪问题呢？我们来看看际的操和决方案。

首先我们的搜索图标的缺口，通常口原型的镜片框。那么，就可以先画一矩形，并将它行旋转，用确我们裁切的区域。多数新手会以只用这矩形，底部的圆行减去顶部图形操作就可以得到目标图形，其实这法错的。

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

方法1

第一种，使用径锚点删除的方法。即使用添加锚点具两图形交汇点打点，然后中间随意添加一锚点，再删除它，就可以获得缺口的效果。

这时候，只描设置中，将设置圆角，就可以获得圆润的切口。

这操作问题，就会导致圆形本身作一闭合径，变了非闭合径。那么本身图形的部分属性设置就会出问题，直接的就描设置，无论原本使用外描或者内描，都会转化居中描。

具图标设计演示中，我们应该道，使用内描边是最容易控图形际大小，以及符合像素对齐规范的，但在类风的使用上我们要尽能在一开始设计时就使用居中描边。而居中描边的使用需要在画中开启「对齐到像素」的选项，并关闭另外两项，才能证操的规范。

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

方法2

方法1 理论上以决大数问题，但还有一说不清道不明的原因，导致演示 1 中的方法失效。所以，在 2 个演示中，我们来应用另一种方案。

这种方案重点使用的功能「轮廓化描」，也就一将所径格式转化完整的比例径图形的操作。它具体的操作方式，选中任何矢图形，然后点击具栏的对象 – 径 – 轮廓化描。

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

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

这一步，操作起来都简，但有不和谐的地方，就在切边缘的调整上。如果计的风格使用尖角，那不用做什理；如果使用圆角，那这个半圆就非常棘了。

通，要制这个圆角，需要我们画一个直径和之前描边相等的圆，然后闭有对齐的项，再将圆移到这个边缘中，使它可和边缘的两侧对齐。

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

并，路径查找会破坏原本路径特征，将描边状态变成了填充状态，会增加我们个图形细节调成本。所以，尽可能不使用这案。

多色描边风格

多色描边的格，设计起来非简单，就是更改图标中一个线的色彩。和粗细同的格一样，如果图标图形没有较合适的线来添一个的颜色，那么可对进行「复杂」的处，多增一些线来。

如想有些更有趣表现，也可以将图标强拆分成若干线段，然后再替换其条颜色。比如在优惠券图标，我们可以将虚线左侧描边改成其它颜色，而不是调虚线色值。

渐变描边风格

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

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

只要在做第一个图标的渐变后，通过吸管工具吸取渐变，就可轻松成渐变的复制。在这个规则，既可使相同的渐变色，可使同的渐变色。

描边叠加风格

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

在设计这类格的过程中，要的难点在于拼接的方式，因为有的图形看起来是一体成的，需要我们额外为它创拼合结构。如心形图标，在制作过程中就可通过路径查器的相功将它拆分成两个分。

在成了图形的编辑后，一步才是填充色彩，在这种格中可使渐变可使纯色，但是我们要为同的图层添透明，才制叠的效果。如果是在 PS 或是 Sketch 中，除了使普通透明的方式，还可通过调整「图层混合模式」来呈现更好的叠效果。

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

结语

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

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