全民飞机大战百度贴吧|全民飞机大战2018神冠战机|

Illustrator教程:打造线体扁平风格宣传海报

来源:中国设计在线    时间:2019-03-11    站内收藏

前言

扁平风格的插画可以是采用线来表现,这和大部分线性图标的制作方法类似,所不同的是,图标的规模明显小一些,所要兼顾的图形也要少得多。线是一种值得我们探索的图形表现方式。无论是否将其进行填色,我们都能被线条所牵引进入到图形本身,这给了我在设计产品海报时一些灵?#23567;?#20170;天我们就和大家一起来制作这个由线条来作为主元素的图形海报。

灵感来源

1、图案的参考是来自 pinterest 上浏览到的线体插画,基本是延续这个风格,只是改变了线条表现方式,稍后我们在过程中再重点提示。

2、整个海报的概念是起源我们在做 pagepan 这个产品所产生的「积木」的联想,这时选用了乐高积木来作为主要的创作重心。

学习建议

这篇文章适合那些已经有软件基础想要进阶扁平线体插画的小伙伴~

工具

Adobe Illustrator CC (2019)

我已经习惯用AI来画线条的图案,其他软件不熟悉也没有深入了解。


最终效果

草图过程

草图是一个非常非常重要的过程,甚?#20102;?#26159;后面所有工作的基础。鉴于我们大部分人包括我自己都没有好好?#28304;?#36807;,所以这一次我们来弥补这一?#26041;凇?#33609;图我画了三次,每次都作部分优化,最后成品如下。

毫不夸张,只有认真?#28304;?#33609;图的创作过程,才是真正享受到设计的乐趣。

画好草图后,大家最好能从草图进入对图案实现的分析。我?#21069;?#23454;现整个图案大致分为三个部分:

① 立体式的积木

② 设备部分

③ 背景装饰

接下我们?#22836;?#27493;骤来完成这些不同的图形,要知道它是如何制作出来的。

生成立?#25945;?/h4>

这里积木的表现最重要的一个表现是?#27627;?#20307;,并且是大家平时最常见的等距立体风格。等距立体风格,我们曾经在用AI绘制3D等距立体梦幻风格插画中讲过其画法以及在开始绘制前的准备工作,那么这篇文章里我们就省略分步骤的讲解。

STEP 01

打开AI,新建一个1200px*850px的文档,然后再在这个新文档中建立起等距立体风格所需要准备的参考线。有人问参考线用处大不大?说实话,因为AI当中?#24515;?#35748;的等距立体的3D转换设置,因此基本不会差多少,主要是调整细节的时候用得上。

准备好的参考线如下图:

你可以按以下的提示操作,更详细可以进入用AI绘制3D等距立体梦幻风格插画中查?#30784;?/p>

  1. 利用【矩形网格工具】,宽度/高度设置为1000,水平/垂直设置为:50

  2. 选中网格,鼠标右键,进入【变换>缩放】,不等比的参数设置为,水平:100%,垂直:86.602%

  3. 【变换>倾斜】,倾斜角度参数:30

  4. 【变换>旋转】,旋转角度参数:-30

  5. 【视图>参考线>建立参考线】

STEP 02

要画线体图案,首先大家要把形体画出来,形体是非线体的,这方便塑形,一旦形体外轮廓确定,就可以通过填充转线条的方式做出线条图案。

以上的思路确定好后,我们就要开始绘制立?#25945;濉?#31532;一步,我们先画出一个尺寸为160*68的矩形。矩形填充为灰色,关闭描边。

对于这个尺寸我建议大家最好和我的设置相同,并且记录一下,等下?#19968;?#21578;诉大家为什么要这样做。

然后选中这个矩形,进入到【效果>3D>凸出与斜角】,将其转为立?#25945;濉?#20320;需要改变这两个参数设置:

  • 位置:等角-右方

  • 凸出厚度:68 (这个数值和你的矩形的高度一致)

位置一栏下拉选框里的「等角」开头的选项,都是适用于等距立体风格的。

STEP 03

接下复制上一步所做的立?#25945;澹?#34429;说我们现在称这个对象为立?#25945;澹?#20854;实它的本质还是一个平面矩形(因为还没扩展对象),所以我们继续改变这个平面矩形的尺寸,改变它的宽度,将其宽度从原来的160改变为228。

这就是要求你要记住第一个矩形尺寸的原因,因为228是从160+68得到的。由于我们这里会画出三个等高而不等长的矩形,但是我们希望它们表现是逐级等距增大,所以需要一个参数。有人?#25910;?#37324;不需要这样计算行不行?就是看着好看但不需要数学计算可不可以,我的答案是当然可以,但是数字的确是一个便捷控制形体的工具。

当你把尺寸改变后,整个立?#25945;?#20063;就是延长了。用相同的方法,复?#39057;?#19977;个,也是在228基础?#26174;?#21152;68,第三个矩形的宽度增加到296。于是我们得到想要的三个立?#25945;?#22914;下:

STEP 04

将?#24310;?#30340;立?#25945;?#30340;位置进行调整,这时需要打开参考线,辅助将其排列成一下的样式:

STEP 05

用STEP 02-04 的方法来做出另外一边的立?#25945;澹?#25152;不同的是另一边的两个立?#25945;澹?#23427;们的尺寸分别是:

68*68

160*68

而他们在转变为立?#25945;?#26102;,进入3D工具中,位置一栏设置为【等角>上方】。当你绘制好两个立?#25945;澹?#23601;可以将它们拼?#19978;?#38754;的形?#30784;?#24403;右边的两个立?#25945;?#22240;为挡住视线很?#35759;?#40784;边缘时,可以?#26723;?#23427;们的透明度来查?#35789;?#21542;对齐。

这时立?#25945;?#30340;大形体基本完成,让我们转战制作细部。

细部:按钮和?#37096;?/h4>

所谓的细部其实也就是细节的部分,这部分在这里表现就是一些诸如按钮、?#37096;?#36825;样的部分。

STEP 06

我们首先来制作?#37096;祝?#20854;实大家可以发现?#37096;?#23601;是一个圆,只是这个?#37096;?#19978;去有透视之感(所以它不是一个正圆),但基本上它没有凸出。那?#21019;?#23478;可以如何做呢?

你?#37096;?#20197;用到3D工具:首先绘制一个灰色的无描边的正圆。然后进入【3D>凸出与斜角】,设置可以如下所示:

位置:等角-上方 厚度:0

STEP 07

复制这个代表?#37096;?#30340;图案,然后放置在最上方的矩形上,这里需要参考线来辅助将其对齐。

STEP 08

用同样的方式?#25165;?#20854;他地方出现的?#37096;祝?#20294;是注意这里不同的位置。

STEP 09

接下绘制凸出的圆形按钮,这时我不建议这里再使用3D工具?#35789;?#29616;,毕竟其实凸出的按钮利用两个椭圆就能实现,如果采用3D工具绘制,最后转平面时会遇到麻?#24120;?#20250;有非常多形状会出现,而让你很难整理)。但是为了保持整个图形符合等距立体,我在这里利用参考线来做一个按钮,大家可以参考我的做法。

就复制我们上一步所做出的?#37096;祝?#25214;到同样方向的?#37096;祝?#28982;后利用参考线对齐再复制一个,让它们的色彩有点差异。

看懂了吗?虽然目前两个椭圆之间有间隙,但是等到最后转为线体时,彼此只需要两个小线条就能连成一个立体凸出的按钮。

转为线体

一旦焦点积木的部分完成,我们就可以直接转为线体,剩下的图形都用线条?#35789;?#29616;。所见即所得。

STEP 10

首先将所有的立体形状都转为平面,这个说法并不是指他们?#21482;?#21040;之前的平面形状,而是将立体以扩展的方式转化成可编辑的对象。

选中每个对象,然后进入【对象>扩展外观】,然后将这些对象一一进行取消编组的操作,有些形状需要取消两次,总之要达到你?#25105;?#28857;击某个形?#35789;保?#37117;能立刻看到它的填色。这是AI中一个形?#35789;?#21542;「健康」的指标。

STEP 11

然后把每一个形状填充关闭,开启描边。描边的大小可以暂时设置为2,因为之后我们还会有变化。描边色彩为 #0d6ffc

STEP 12

运用【形状生成器】工具,按住键盘上的ALT键,清除掉图形中彼此遮挡的部分线条。这个可以参考我们的草图。

然后把我们在STEP 09中提到的给按钮增加线条的方式来完成立体形态。为了让图形表现更好,按钮的形状可以稍微调大。

绘制平面设备

这里大?#19968;?#21457;现周边的设备是平面的,在绘制上不比之前的立体图案,因此相对?#35759;冉档?#20102;很多。所以基本这里就?#21069;?#29031;草图分步骤来画出。

STEP 13

这里从?#37096;?#22788;有线条?#30001;歟?#36825;些线条既有装饰作用,又有链接设备的作用。这里参考?#20284;?#20182;的线体插画的Idea,这是一个不错的集中视线的做法。

我们首先来完成这部分的线条。用?#30452;?#24037;具来绘制,?#30452;?#24037;具在绘制直角的边线时很有优势,画好下图左边的样式后,选中直角的部分,利用?#38553;?#30340;方式就能将直角变为?#27493;恰?/p>

STEP 14

补齐一些细节,比如连接设备的矩形接头,包括积木顶部的?#37096;?#30340;阴影描绘线条。

STEP 15

继续绘制左上的两部?#21482;?#30340;造型。记得这时利用?#27493;?#30697;形工具和线条工具进行绘制。其实这个过程创作非常自由,你?#37096;?#20197;?#25165;?#20854;他的图案,只要兼顾到整体的协调性即可,这是很多UI设计师常常画的线稿图,由于操作简单,我们这里就不一一讲解。

STEP 16

接下绘制右边的平板的样式,其中我用了一个统计图表来作为图案,文字采用了断线的方式展示。

STEP 17

最后下方的?#22987;?#26412;电脑样式,这里用了我们Pbuilder的界面。如果你是做其他的虚拟产品,这里就可以绘制这个产品的界面。

STEP 18

到这一步大?#19968;?#21457;现我们用的是等线,所谓等线就是相同大小的线条,但是实际上在比?#32454;叢印?#23545;象比较多的情况下需要将线条分出层次才能让造型看起来更立体。所以,这里我们可以改变线条的大小,在物体的外边框加粗,然后把一些更细节的线条调细。

于是,我们从之前只用2pt的线,变为三种线条:1pt、2pt、3pt

3pt的线用来加粗对象的边框轮廓,增加体积?#23567;?#25110;者是焦点区域。

2pt的线用来做普通的描绘。

1pt的线用在比较细节的小的部分。

完善背景细节

STEP 19

背景的细节是一些零散的图案,大部分是圆形、三角等几何形,相比而言,它们的绘制是最简单的,因此我们也直接就给它?#25165;?#22909;位置。

STEP 20

在草图的部分,我们还准备了三个正立?#25945;澹?#20294;在这里,我们不准备采用3D工具来绘制。而是采用的是六边形+线条的方式。

所以我们可以选择绘制一个等边的六边形,然后旋转30度,让它的底部为其中一个角。然后按照下图所示,制作一个立?#25945;濉?#36825;里我们用这个方式的原因,下一步我们会讲到。

STEP 21

将上面绘制好的三个立?#25945;澹?#25918;置在相应的位置。然后给整个图形增加一个浅蓝色的背景。在这里我们用到的配色是同色系的配色。

优化细节

到这一步其实就完成了绘制,但是细节的部分还需要我们进一步优化。主要体现是在细节的位置,比如中间积木的线条交接的位置就不够干净,有很多不需要的小边?#29301;?#36825;在线条的状态是没办法完?#39057;模?#38656;要进一步扩展外观之后才能修饰。

STEP 22

我们首先将整个线条图案都进行扩展外观,进入【对象>扩展外观】,其他的部分基本都没什?#27425;?#39064;,就是用3D工具绘?#39057;?#31435;体形状细节需要优化,这也是为什么我们最后增加三个小的立?#25945;?#30340;时候用平面线条来解决。

当然,中间的积木其实?#37096;?#20197;用平面线条绘制,但是因为它的造型相对复杂,所以很难把握它的比例,我们才借助3D工具的这个能力。

大家可以看到这里有很多的不完美的接?#29301;?/p>

STEP 23

经过扩展后,我们就可以利用直接选择工具来调整这些边?#29301;?#36825;时大家要兼顾到整个线条的粗细,因为我们已经不?#21069;?#29031;线条的对象来编辑图形了。

处理后的图形已臻完美:

STEP 24

最后利用生成器工具将部分的块面填充蓝色调(#D7ECF9、#C7E8F9),增加的这两个颜色略比主色深一点,以表现阴影的部分,或增加视觉重量的作用。更深的那个色调用在比较小的区域。

添加文字

文字的部分,我们采用了相同的线条描绘的方式来设计,然后增加文案。最后的效果如下:

最后:动手的力量

线条是扁平化风格的一种,如果大家平时练习了图标的画法(不是在需要用图标的时候拿现成的网上的资源),那么你对线条的掌控能力就能?#25214;?#22686;进。最好的学习就是自己动手做,因为有太多不可说的?#35760;桑?#26159;必须自己体会过才理解的。

如果觉得这个教程比?#32454;?#26434;,那么你可?#28304;?#19968;些基础的几何图形、小物件开始练习,所以这是非常适合初学者夯实基础的。如果觉得这个教程过于简单,我也建议大家多尝试一些新的画法,比如可以?#35759;?#35937;改为别的物体,自己创作不一样的场景。?#37096;?#20197;换成别的色彩,还可以增加纹理。把木纹、水?#39057;?#31561;增加到平面中,会出现非常特别的效果。


本文来源:中国设计在线

上一篇:返回列表
编辑:cdo
相关阅读
    正在加载...
全民飞机大战百度贴吧