赞助商
立即赞助

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

UI设计3年前 (2021)更新 流光
2.6K 0 0

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

多种粗细风格

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

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

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

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

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

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

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

描边缺口风格

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

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

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

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

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

方法1

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

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

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

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

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

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

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

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

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

方法2

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

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

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

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

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

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

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

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

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

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

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

多色描边风格

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

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

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

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

渐变描边风格

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

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

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

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

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

描边叠加风格

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

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

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

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

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

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

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

结语

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

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

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

本文我们开始讲解最后一种类型的图标 ── 启动图标。在第一章我们已经对启动图标有了基础的认识,所以下图再简单回顾一遍。 ...
入门
每天努力的用心的去做设计,挺开心的,其中最开心的细节就是“思考自己的设计如何与别人的不一样”,让你的差异化产出得到认可...
图标
在《从零开始画图标系列:超全面的基础知识》中我们知道了,工具图标的三种设计类型,以及对应的不同风格。本篇文章,内容主...
图标设计
有时候觉得做的图标有点奇怪,但又不知道哪里奇怪,今天就来分析两个原理,看看有谁中招了! 亲密性 排版有四大原则,其中有...
ui设计
有趣的灵魂万里挑一,人们对正面情绪的向往使“有趣”成为沟通交流中不可或缺的情感特征。随着越来越多的品牌涌入市场,用户对...
ui设计
如果要设计产品或开发界面,我们通常会需要风格相同的图标,若无法自行绘制或不希望付费购买也有很多替代方案,本文要推荐的...
图标素材
编者按:文章用诸多案例讲解关于「峰终定律」的概念、应用、改善用户体验的步骤。 一、什么是峰终定律 峰终定律是由诺贝尔奖...
入门
@研习设K先生 :配色是很多人都比较关心的一个问题,之前的教程我也给大家讲解过一些配色思路和配色方法,而今天我就教大家一...
入门