1. 主页 > 行业资讯 >

创建一个扁平线条样式的海报

前言

平面风格的插图可以用线条来表示,类似于大多数线性图标。不同的是图标的比例明显更小,需要的图形也少很多。线条是一种值得探索的图形表达方式。不管是不是填色,我们都可以通过线条被画进图形本身,这给了我设计产品海报的一些灵感。今天,我们将与您一起制作这张以线条为主要元素的图形海报。

灵感来源

1.图案的参考来自pinterest上浏览的线条插图,基本延续了这种风格,只是改变了线条表达。我们将在稍后的过程中强调它。

2.整张海报的概念源于pagepan生产的“积木”组合,当时乐高积木被选为主要的创作重点。

学习建议

本文适合那些已经有软件基础,想要高级平线插画的小伙伴~

工具

Adobe Illustrator CC (2019)

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

草图流程

素描是一个非常非常重要的过程,甚至是所有后续工作的基础。既然包括我自己在内的大部分人都没有好好对待,这次我们就来弥补一下。我把草图画了三遍,每次都是局部优化,最后的成品如下。

毫不夸张地说,只有认真对待草图的创作过程,才能真正享受到设计的乐趣。

打造线体扁平风格宣传海报

画完草图,最好大家从草图进入图案实现的分析。我们将整个模式的实现大致分为三个部分:

打造线体扁平风格宣传海报

① 立体式的积木② 设备部分③ 背景装饰

接下来,我们将逐步完成这些不同的图形,知道它是如何制作的。

生成多维数据集

在这里,积木最重要的表现就是立体,这是最常见的等距立体风格。等距三维样式,我们曾经在《用AI绘制三维等距三维幻想插画》中讲过它的绘制方法和绘制前的准备工作,所以在本文中省略了一步一步的讲解。

步骤01

打开AI,新建一个1200px*850px的文档,然后在这个新文档中建立等距立体样式的参考线。有人问基准线有用吗?说实话,因为AI有等距立体的默认3D转换设置,所以基本差不了多少,主要用在调整细节的时候。

准备好的参考线如下:

打造线体扁平风格宣传海报

可以按照以下提示操作,更详细的可以用AI在绘制3D等距三维奇幻风格插画中查看。

利用【矩形网格工具】,宽度/高度设置为1000,水平/垂直设置为:50选中网格,鼠标右键,进入【变换>缩放】,不等比的参数设置为,水平:100%,垂直:86.602%【变换>倾斜】,倾斜角度参数:30【变换>旋转】,旋转角度参数:-30【视图>参考线>建立参考线】

步骤02

要画线条图案,首先每个人都要画出形状。形状为非线形,便于塑形。一旦确定了形状的轮廓,就可以通过填充和旋转线条来制作线条图案。

以上思路确定后,我们就开始画立方体了。第一步是画一个160*68大小的矩形。矩形用灰色填充,笔画关闭。

对于这个尺寸,我建议你把它设置成和我的一样,并记下来。我告诉你为什么。

然后选择这个矩形,输入[效果>:3D >;突起和斜面],把它变成立方体。您需要更改这两个参数设置:

位置:等角-右方凸出厚度:68 (这个数值和你的矩形的高度一致)

打造线体扁平风格宣传海报

“位置”列下拉框中“等距”开头的选项都适用于等距立体样式。

步骤03

然后复制上一步制作的立方体。虽然我们现在称这个物体为立方体,但它的本质仍然是一个平面矩形(因为物体没有被展开),所以我们继续将这个平面矩形的大小和宽度从160改变为228。

这就是为什么要求你记住第一个矩形的大小,因为228是从160 ^ 68得到的。既然我们在这里会画三个高度相同但长度不相等的矩形,我们希望它们一步一步等距离的增加,所以需要一个参数。有人问这里是不是不用这样算。没有数学计算有可能好看吗?我的答案是肯定的,但是数字真的是一个控制身体的便捷工具。

当你改变尺寸时,整个立方体就会变长。同理,复制第三个,加68到228,第三个矩形的宽度增加到296。所以我们得到了我们想要的三个立方体,如下所示:

打造线体扁平风格宣传海报

步骤04

调整现有立方体的位置。此时,您需要打开参考线,以帮助以以下方式排列它:

打造线体扁平风格宣传海报

步骤05

使用步骤02-04的方法在另一侧制作立方体。不同之处在于,另一侧的两个立方体具有以下尺寸:

68*68

160*68

当它们被转换成立方体时,它们进入3D工具,并且位置列被设置为[等距>:上方]。当您绘制两个立方体时,您可以将它们拼写成以下形状。当右侧的两个立方体的边缘因遮挡视线而难以对齐时,您可以降低它们的透明度,以查看它们是否对齐。

打造线体扁平风格宣传海报

这时候大立方体基本完成了,接下来就要做细节了。

细节:按钮和圆孔

所谓细节,其实就是细节部分,在这里表现为纽扣、圆孔等一些部分。

步骤06

首先,让我们做一个圆孔。其实我们可以发现圆孔是圆的,但是这个圆看起来像透视(所以不是完美的圆),但是基本上不凸出。那么我们能做什么呢?

也可以使用3D工具:先画一个没有笔画的灰色完美圆。然后输入[3d >:突出和斜角],设置如下:

位置:等角-上厚度:0

打造线体扁平风格宣传海报

步骤07

复制这个代表圆孔的图案,并将其放在顶部矩形上,在那里需要参考线来帮助对齐它。

打造线体扁平风格宣传海报

步骤08

其他地方的圆孔也是这样排的,但是注意这里的位置不同。

打造线体扁平风格宣传海报

步骤09

接下来,画凸圆按钮。这个时候我不建议在这里用3D工具来实现。毕竟凸钮可以用两个椭圆来实现。如果用3D工具画图,转到平面上会遇到麻烦(会有很多形状,让你很难排列)。不过为了让整个图形与等距立体保持一致,我在这里用参考线做了一个按钮,大家可以参考我的做法。

只要复制我们上一步做的圆孔,找到同方向的圆孔,然后用参考线对齐复制另一个,这样它们的颜色就有点不一样了。

打造线体扁平风格宣传海报

你明白吗?虽然目前两个椭圆之间有一个间隙,但是最后变成直线的时候,只需要两条小线就可以形成一个三维凸钮。

变成一条线

一旦完成了重点构建块,就可以直接变成线,剩下的图形用线来实现。所见即所得。

步骤10

首先,将所有三维形状转换成平面。这种说法并不意味着它们返回到以前的平面形状,而是以扩展的方式将三维对象转换成可编辑的对象。

选择每个对象,然后输入[对象>:扩展外观],然后逐个取消这些对象的组合。有些形状需要取消两次。简而言之,当您单击任何形状时,您可以立即看到它的填充颜色。这是AI中一个形状是否“健康”的指标。

打造线体扁平风格宣传海报

步骤11

然后关闭每个形状并打开笔画。笔画大小可以暂时设置为2,因为我们稍后会更改它。笔画颜色为#0d6ffc

打造线体扁平风格宣传海报

步骤12

使用【形状生成器】工具,按住键盘上的ALT键,去掉图形中一些互相遮挡的线条。这个可以参考我们的素描。

然后在STEP 09中提到的按钮上加线,完成立体形态。为了让图形表现的更好,按钮的形状可以稍微放大一些。

打造线体扁平风格宣传海报

绘图平面设备

在这里你会发现周围的设备都是平面的,画图也不比之前的立体图案好多少,所以相对难度降低了很多。所以基本上,这里我们按照草图一步一步画。

步骤13

这里,有从圆孔延伸出来的线条。这些线路具有装饰和连接设备的功能。在这里,我参考其他的线条画,这是一个很好的集中注意力的方法。

先把这部分台词说完吧。用钢笔工具画。钢笔工具在画直角边方面有很大的优势。在下面图片的左侧绘制样式后,选择直角部分并拖动它,将直角变成圆角。

打造线体扁平风格宣传海报

步骤14

填一些细节,比如连接设备的矩形接头,包括积木顶部圆孔的阴影画线。

打造线体扁平风格宣传海报

步骤15

继续画左上角两个手机的形状。记得用圆角矩形工具和线条工具画。其实这个过程是很自由创作的。你也可以安排其他模式,只要考虑到整体协调。这是很多UI设计师经常画的线条画。由于其操作简单,这里就不一一解释了。

打造线体扁平风格宣传海报

步骤16

接下来画右边平板的样式,我在里面用了一个统计图作为图案,文字以断章取义的方式显示。

打造线体扁平风格宣传海报

步骤17

最后,在下面的笔记本风格中,我们在这里使用我们的Pbuilder界面。如果你在做其他虚拟产品,可以在这里画这个产品的界面。

打造线体扁平风格宣传海报

步骤18

在这一步,我们会发现我们用的是等值线,都是同样大小的线。但是,实际上,当有更复杂的物体时,我们需要将线条分层,使形状看起来更加立体。所以,在这里我们可以改变线条的大小,使物体的外边框变粗,然后使一些更细致的线条变细。

所以我们从只用2pt的那一行改成了三行:1pt,2pt,3pt

3pt线用于加厚对象边界的轮廓并增加体积感。或者说重点区域。

2pt线用于普通描述。

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

打造线体扁平风格宣传海报

改善背景细节

步骤19

背景的细节是一些零散的图案,大部分是圆形、三角形等几何形状。相比之下,他们的画是最简单的,所以我们会直接为它安排位置。

打造线体扁平风格宣传海报

步骤20

在草图部分,我们也准备了三个规则立方体,但是在这里,我们不打算使用3D工具进行绘制。而是采用六边形线。

所以我们可以选择画一个等边六边形,然后旋转30度,让它的底部是其中的一个角。然后做一个如下图的立方体。我们之所以在这里使用这种方法,我们将在下一步中讨论。

打造线体扁平风格宣传海报

步骤21

把上面画的三个立方体放在相应的位置。然后给整个图加一个浅蓝色背景。我们这里用的配色方案是一样的。

打造线体扁平风格宣传海报

优化细节

这一步其实已经画好了,只是细节还需要进一步优化。主要体现在细节的位置上,比如中间积木的线条相交的位置不够干净,还有很多不必要的小角,所以线条的状态无法完善,外观需要进一步扩展才能修改。

步骤22

我们先展开整个线条图案的外观,进入【对象>:展开外观】,其他部分基本没问题,就是用3D工具绘制的三维形状的细节需要优化,这也是我们最后加三个小立方体的时候用平面线条解决的原因。

当然中间的积木也可以用平面线来画,但是因为形状比较复杂,很难把握其比例,所以我们就用3D工具的这个能力。

你可以看到这里有很多不完美的关节角:

打造线体扁平风格宣传海报

步骤23

展开后,我们可以使用直接选择工具来调整这些角。这时候要注意整条线的粗细,因为我们不再根据线的对象来编辑图形。

经过处理的图形非常完美:

打造线体扁平风格宣传海报

步骤24

最后,使用生成器工具,用蓝色调(#D7ECF9、#C7E8F9)填充一些块表面,添加的两种颜色比主色略暗,以显示阴影部分或增加视觉权重。较暗的阴影用于较小的区域。

打造线体扁平风格宣传海报

添加文本

对于文字部分,我们用同样的描述线条的方式来设计,然后加上文案。最终效果如下:

打造线体扁平风格宣传海报

打造线体扁平风格宣传海报

最后:动手的力量

线条是一种扁平的风格。如果你平时练习画图标(而不是在需要使用图标的时候拿现成的在线资源),你控制线条的能力会一天天地提高。最好的学习是自己去做,因为有太多说不出的技巧,必须自己去理解。

如果你觉得这个教程比较复杂,可以从一些基本的几何图形和小物体入手,非常适合初学者打扎实基础。如果你觉得这个教程太简单,我也建议你尝试一些新的画图方法,比如把物体换成其他物体,自己创建不同的场景。您也可以更改为其他颜色并添加纹理。加入木纹、水纹等。对飞机会有非常特殊的影响。

总之,设计就是玩,好好玩~

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:https://ffjianzhan.cn/a/xingyezixun/20210511/226.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息