Illustrator绘制时尚简约的扁平化的线性图标

UI / UI设计教程 / UI图标教程 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词

线性风格一直是很多网页和插画师的最爱,在这篇教程里,我们将教大家绘制一组造型明朗,线条干净且风格简洁的线性图标,比如洁面乳、指甲油、眼影、口红和香水等,赶紧来练手吧。

一、观察和草图

我们要将一个物体绘制成为线条的时候,我们第一件事是需要观察物体本身。比如,在本例中运用几个平时日常化妆品作为创作对象,我会打开天猫,分别在搜索框中输入这些物品。先列出一个所绘制对象的小清单。


Illustrator绘制时尚简约的扁平化的线性图标,PS教程,思缘教程网

每个物品我们都要找到它的共同点,比如第一个洗面奶,其实有各种包装样式,但你需要从中提取出某一类的共性,而不能以偏概全。这是观察进入分析的第一步,接下你需要概括这个样式,去掉各种复杂细节,再保留那些能明显突出物品特征的线条细节。


Illustrator绘制时尚简约的扁平化的线性图标,PS教程,思缘教程网

观察物品的时候要学会化繁为简,把最本质的造型线条给表现出来。

二、绘制第一个图标

STEP 01

打开AI,新建文档,文档的参数可以参考下图所示


Illustrator绘制时尚简约的扁平化的线性图标,PS教程,思缘教程网

STEP 02

你可以打开网格,在网格的辅助下进行绘制,或者也可以打开智能参考线。总之如果你是初学者,最好能有一个辅助的工具对绘制的对象有所控制。

我的做法是做好每个图标的大小控制,因为你的图标不可能制作到刚好占据整个版面,所绘制的对象到边缘需要一个视觉缓冲。但这纯属一种心理偏好。实际操作中,也有越过参考范围的情况也有。

很多人很好奇,AI既然是矢量软件应该就不会有大小之别,因为它可以任意缩放的啊。的确,这是一个值得说明的问题,但比例上你还是遵守一定的秩序,否则你做出的图标在比例上的失衡会影响整体的美观。


Illustrator绘制时尚简约的扁平化的线性图标,PS教程,思缘教程网

STEP 05

第一个所绘制的对象是洁面乳。虽然我们说是用线条来表现,但是实际绘制中我们并不会直接用到直线工具,而是在绘制中突出表现线条。线条所起的是视觉上的强调作用。

了解这一点后,让我们开始画一个瓶身,瓶身用矩形来表现。如果你的AI不是旧版本,那应该就会知道直角的矩形可以直接可以拖动角内的圆点变为一个圆角矩形。如果是旧的版本那就需要运用圆角工具来处理。


Illustrator绘制时尚简约的扁平化的线性图标,PS教程,思缘教程网

矩形的描边设置为4pt,描边为黑色,填充为白色。这一步并不需要考虑色彩。

为了方便你随时缩放图形大小时,描边大小都保持不变,请进入【编辑>首选项>常规】,去掉“缩放描边和效果”这一栏的勾选。


Illustrator绘制时尚简约的扁平化的线性图标,PS教程,思缘教程网

STEP 06

接下再运用矩形画上瓶身的上部,这些矩形都要居中对齐。在瓶身的上部,由于并不是一个几何图形,因此你需要运用不同的几何图形进行相互合并或增减。比如梯形是调整了矩形下方两个锚点的位置后得到的,能得到最终的图形的方法有很多,你可以尝试出最适合自己的方式。


Illustrator绘制时尚简约的扁平化的线性图标,PS教程,思缘教程网

STEP 07

再增加一些装饰性细节,装饰性线条与原有线条保持同样粗细。这里是一个比较随意的创作步骤,你完全可以自由发挥。


Illustrator绘制时尚简约的扁平化的线性图标,PS教程,思缘教程网

STEP 08

产品的初次印象是美在包装,对包装的装饰需要增加一些丰富的细节,比如增加图案和文字。你可以先画一个圆,给这个圆增加一个瓶身的形状作为矢量剪切蒙版。剪切蒙版的含义即用上面的“形”去显示下面的“内容”,根据这个原理,你只需要复制瓶身并粘贴于最上层,再选中这个复制层与你所画的圆,进入【对象>剪切蒙版>建立】即可。

再增加花朵的装饰,先画一片花瓣,再采用旋转工具就很容易组成一朵花形。

文字应该选用线性无衬线字体,线条粗细都能尽量靠近图形本身的线条粗细。


Illustrator绘制时尚简约的扁平化的线性图标,PS教程,思缘教程网

 收藏