如果您喜欢『PS学习网』,请推荐给您身边的朋友!本站永久域名:www.ps-xxw.cn

AI设计制作恐怖万圣节夜景插画图片

当前位置 : PS学习网 > 矢量绘图 > 正文来源:网络作者:网络时间:2019-06-18人气:

此次的教程是AI+AE教程,灵感来自于大神Hash Elias的作品,很喜欢其表现形式,于是就做了同系列的作品致敬。第一次制作教程,有不足之处希望多包涵。

首先确定动效类型后,我们开始发散思维,因为需要表现光感,场景以夜景为首选。同时,夜景的元素很多,这里选择了刚过完不久的万圣节元素来烘托气氛,像蝙蝠、墓碑、蜘蛛、南瓜等,可以依照喜好添加。

先看看AI的效果图

AI设计制作恐怖万圣节夜景插画图片

AI部分绘制—

步骤1 – 建立背景

1. 新建一个1280*600px的画布,分辨率为72

AI设计制作恐怖万圣节夜景插画图片

(Tips:这里要说明一下,最后的效果图实际尺寸是800*600px,之所以在AI绘制1280*600px,是因为后期AE动效的过程中,画面移动内容会更丰富,而且AI里超出画布的部分,AE导入后是不会显示的,这里就要求我们需要显示的部分一定要放在画布内!!)

2. 运用矩形工具,画出1280*600px的渐变紫色背景,命名为背景一,色值如下左图

复制一层矩形,改变渐变参数,表现上深下浅的光影关系,命名为背景二,色值如下右图

AI设计制作恐怖万圣节夜景插画图片

当前效果如下

AI设计制作恐怖万圣节夜景插画图片

步骤2 – 分层绘制

仔细观察动图的运动规律,我们可以大致将其分为5大层与人物装饰元素层,分别画出虚实与远近效果,摆放位置后期可灵活调整。

1. 第一层场景绘制

第一层在离我们视觉最近的位置,所以图层应该在最上方,不被遮挡

用钢笔勾出地面起伏形状,此步骤需要注意的是起始位置和结束位置的锚点高度应在用一水平线,这是为了后期做AE位移时,前后位置能更好的衔接

AI设计制作恐怖万圣节夜景插画图片

接着添加小装饰~

AI设计制作恐怖万圣节夜景插画图片

以上部分绘制完成后,编组并重命名为一层地面

然后分别绘制左右两颗树,两棵树单独成组,分别命名为右树和超大树。

AI设计制作恐怖万圣节夜景插画图片

到了这一步第一层就绘制完成了,整体效果如下

AI设计制作恐怖万圣节夜景插画图片

 

2. 第二层场景绘制

与第一层一样,绘制起伏地面要注意前后的衔接位置,第二层的曲线坡度较高,与一层的起伏位置最好稍微错开,让画面显得更有层次,并添加一些小的元素

AI设计制作恐怖万圣节夜景插画图片

一层的墓碑与小草可以沿用,变换一下大小方向与颜色,摆放在合适的位置,其余的草可以用钢笔绘制

复制两遍一层的右树,改变其颜色与大小,其中一棵树添加一只蜘蛛,增强趣味性

AI设计制作恐怖万圣节夜景插画图片

绘制完后,地面部分编一个组(含小植物),命名为第二层,两颗蘑菇树分别编组,命名为二层左树、二层右树

复制第一层最大树的树干部分,缩小后放置第二层的中间位置,此时效果如下图

AI设计制作恐怖万圣节夜景插画图片

3.第三层场景绘制

第三层的效果较为简单,复制二层树干,可自由调节枝丫做出一些变化,错落分布在一二层间隙位置,不透明度改为40%,分别给三棵树命名为三层左树、三层中树、三层右树,效果如图

AI设计制作恐怖万圣节夜景插画图片

4.云层场景绘制

得到以上效果之后,添加了云层与帐篷来丰富画面

AI设计制作恐怖万圣节夜景插画图片

绘制完成后,放在二层的图层下,三层的图层上,注意前后关系

AI设计制作恐怖万圣节夜景插画图片

5.第四层场景绘制

和第三层的步骤一样,第四层也是复制三棵树干,可以去掉枝丫的部分,将不透明度改为15%

AI设计制作恐怖万圣节夜景插画图片

 

步骤3 – 绘制人物与装饰

这个阶段,大致的场景已经绘制好了,这时候我们添加人物与一些小的装饰元素~

AI设计制作恐怖万圣节夜景插画图片

南瓜灯绘制不难,需要注意光影关系。灯与灯棍分开,重命名~

以南瓜灯发光区域为圆心,绘制直径为314px的圆,颜色#ffe5a4,图层混合模式改为柔光,放在人物与南瓜灯的图层下

人物层要注意,放在一层下方二层上方的位置,整理好图层的前后顺序

AI设计制作恐怖万圣节夜景插画图片

画面效果还可以更生动点,这时候我们添加蝙蝠与一些萤火虫~

运用椭圆工具,画一个直径为16px的圆,描边2.1px、色值#fb882b,填充#fddb67

原位复制一个圆,大小改为7.5px,去掉描边,填充#fddb67

给大圆添加高斯模糊

AI设计制作恐怖万圣节夜景插画图片

萤火虫有大有小,有远有近,所以可以复制多层改变其大小,自由分布~

接下来用钢笔绘制蝙蝠~

AI设计制作恐怖万圣节夜景插画图片

画面整体效果如下

AI设计制作恐怖万圣节夜景插画图片

AI的教程到这里就结束了,要整理分层,准备做AE动效了~

分层很重要!分层很重要!分层很重要!

重要的事情说三遍,导入AE之前的准备工作一定要做好,不然后期会很麻烦

AI设计制作恐怖万圣节夜景插画图片

通常来讲,没有刻意分层绘制的同学,画出来都是在同一个图层的,所以这里我们需要新建图层,把每一组放在各自单独的图层

这个时候分别给图层重命名,如图所示,注意图层的摆放顺序,保存文件~

(Tips:图层分层的原理,是要分析之后AE的运动规律,分开要动的部分和不需要动的部分,图层不会太多,操作也比较方便)

好了,愉快地开始AE吧~

AE部分绘制—

步骤1 – 导入AI文件

1. 打开AE,点击菜单栏的文件,选择导入

AI设计制作恐怖万圣节夜景插画图片

2.导入后不要新建合成,直接点击系统建立好的合成文件,这个时候图层的大小位置就和源文件一样了,接着修改合成设置,改变合成的宽度~

AI设计制作恐怖万圣节夜景插画图片

 

3.文件打开后,发现光晕和ai里显示不一样了,选中光晕图层,右边的模式改为柔光,这样就和原本的效果一样了~

AI设计制作恐怖万圣节夜景插画图片

为了更清楚的看到效果,我们依旧一层一层依次做动效(可以先把其它层隐藏)

步骤2 – 制作主场景动效

1.第一层动效

要实现地面的循环移动,先将一层地面转变为预合成,然后在效果和预设面板内找到位移效果添加

AI设计制作恐怖万圣节夜景插画图片

回顶部