什么是Linears风？话不多说，上图！！!

这是指一种在大面积暗色背景下，使用渐变、模糊、动态流光、极细描边、微噪点、外发光以及庄重的无衬线字体，外加流畅克制的微动效来组织和修饰界面元素的网页设计风格。

Linear 的设计风格是为了符合软件工程师对于「专业」的要求。黑色背景、灰色 Inter 无衬线字体、一个紫色渐变圆形 logo，基于大多数工程师都很喜欢的暗色编程环境，最大限度的减少设备能耗和视觉疲劳。

这类界面看起来简约、舒适并且耐看，那运用在图标设计中该如何操作呢？其实不难看出，这类风格的图标较主要运用了渐变色、外描边以及外阴影等功能，还是比较容易上手滴，也很适合0基础的你哦。

01 第一步

新建一个画板，在画板内绘制一个圆并设置参数。

画板：尺寸80*80px，背景色填充黑色#141414。

圆：尺寸60*60px；线性渐变填充#5B38C7-#6540F7，不透明度70%；

边框宽度0.02，边框颜色#BABABA。

02 第二步

复制刚刚画的圆，改变尺寸及部分参数得到一个新圆。

新圆：尺寸34*34px；线性渐变填充#7354FF-#B69CFF，不透明度60%；

添加外阴影#000000，不透明度30%，大小【0；0；4；6】。

03 第三步

绘制一个圆角矩形，复制3个并旋转角度，整齐排列成「十」字，选中4个圆角矩形图层进行布尔运算，选择「联集」，给「形状结合」图层添加外阴影并居中摆放。

圆角矩形：尺寸4.5*12px；圆角半径5.5；背景填充#262626；边框宽度0.01，边框颜色#BABABA

形状结合图层：添加外阴影，填充色#FFFFFF，不透明度30%，大小【0；0；4；0】。

最后这个图标就完成啦，是不是超级简单，你也动手试下其他两个图标吧。关注空空，我会在这里持续分享UI设计干货~

Powered by Froala Editor