【AI+AE教程】可爱的小鸡摇摇车动效

关于教程

首先我们来分析这张gif,gif的主体是小鸡和摇摇车,以及底座和投币机等装饰物,所以绘制时,我们将按照5个步骤来进行,分别是1.在Ai中新建文档并创建背景->2.绘制底座->3.绘制支柱->4.绘制摇摇车->5.绘制小鸡->6.绘制投币机->7.在Ae中为小鸡和车车制作动效->8.在Ps中导出gif,现在来一步步详细说明:

教程效果图

  你未来会是一名专业的设计师吗?60秒完成性格测试获取免费学习资料:

  http://www.silusheji.com/zhuanti/xinggeceshi/?js-fxy

  (如无法点击,复制到浏览器打开即可,完成测试可获得相关学习资料一份)

教程步骤

步骤1:新建文档并创建动画背景

1.1打开AI,点击文档→新建,创建一个新文档(快捷键Ctrl+N),参数如下

1.2首先新建一个图层,命名为「背景」。绘制一个800*600的矩形,参数如下

1.3将矩形与画板对齐,并点击小锁将其锁定(这一步操作完记得把对齐选项改为「对齐所选对象」哦)

步骤2:绘制底座

首先新建一个图层,命名为「底座」

2.1 选中「底座」图层,绘制一个140*50的矩形,调整四个角的锚点,并填充颜色#f24077

2.2 接着绘制一个290*50的矩形,同样调整为圆角,填充颜色#dd2651

2.3 同时选中两个图形,在「对齐」面板中选中「水平左对齐」和「垂直居中对齐」。将两个图形Ctrl G编组,命名为「底台」

2.4 接下来绘制半球体。在「底座」图层中,点击椭圆工具(快捷键L)绘制一个80*80的圆形,接着点击矩形工具(快捷键M)绘制一个80*40的矩形。选中两个图形,水平居中对齐,垂直底对齐,同时在「路径查找器」中选择「减去顶层」得到半圆,为半圆填充颜色#421e6b

2.5 选中半圆,按住Alt键拖动复制一次,选中复制层,同样按住Alt键往右平移18px在复制一次。同时选中复制的两个半圆,在「路径查找器」中选择「减去顶层」,得到半球体的亮部。

2.6 选中两个图形,水平左对齐,垂直底对齐。Ctrl G将两个图形编组,命名为「半球」。

2.7 选中「底台」和「半球」,在「对齐」面板中选择「垂直居中对齐」,Ctrl G编组,命名为底座。到这里,底座部分就完成了。记得Ctrl S保存哦!

步骤3:绘制支柱

新建一个图层,命名为「支柱」

3.1 选中「支柱」图层,绘制一个30*60的矩形,填充颜色e0d7ff,再绘制一个10*60的矩形,填充颜色#aca1ff,作为支柱的暗部。选中两个矩形,在「对齐」面板中选择「水平右对齐」和「垂直底对齐」,Ctrl G编组命名为「支柱」

3.2 调整图层顺序,将「支柱」图层移动到「底座」图层下方,选中两个图层居中对齐

步骤4:绘制摇摇车

接下来绘制摇摇车主体。新建一个图层,命名为「车车」。

4.1 选中「车车」图层,绘制一个150*40的矩形,填充颜色#ffffff,使用选择工具(快捷键V)点击矩形调节锚点为圆角得到所示图形

4.2 选中图形,Ctrl C,Ctrl F,原地向下复制一次,将复制得到的图形往右平移9px,填充颜色#e0d7ff,选中两个图形,Ctrl G编组,命名为「车头面板」

4.3 绘制一个4*21,圆角半径为12px的圆角矩形,填充颜色#e0d7ff,选中圆角矩形按住Alt往右平移42px复制一次

4.4 点击混合工具(快捷键W)依次点击两个圆角矩形,双击混合工具,如图设置,将编组命名为「排气孔」

4.5 选中「排气孔」与「车头面板」,水平和垂直居中对齐. 选中三个图形,Ctrl G编组,命名为「车头罩」

4.6 绘制一个18*20的椭圆,填充颜色#e0d7ff,选中椭圆,点击对象→路径→偏移路径,参数如下,并填充颜色#ffe000

4.7 选中黄色椭圆,按住Alt拖动复制两次,并按图所示摆放

选中两个图形,在路径查找器中使用「减去顶层」,得到车灯阴影,将阴影的不透明模式改为「正片叠底」

4.8 选中三个图形,Ctrl G编组,命名为「车灯1」,选中「车灯1」编组,Ctrl C,Ctrl F,原位向下复制一层,将复制层命名为「车灯2」,往右平移106px,得到如图形状。同时选中所有形状,Ctrl G编组,命名为「车头罩子」

4.9 接下来绘制前保险杆,绘制一个170*25的矩形,调整锚点圆角并填充颜色#e0d7ff

4.10 选中矩形,Ctrl C,Ctrl F原位向下复制一层,将复制层向右平移13px,并填充颜色#aca1ff,同时选中两个圆角矩形,Ctrl G编组并命名为「前保险杠」

4.11 接下来绘制发动机盖,使用钢笔工具(快捷键「P」)勾勒出如图所示图形

4.12 车身部分,我们绘制一个220*65的矩形,使用直接选择工具(快捷键A)将右上角锚点调整为17px圆角,将右下角锚点调整为13px的圆角,如图所示

4.13 绘制一个220*30的矩形,将这个矩形与上面的图形垂直居中对齐,水平底对齐,

接下来在「路径查找器」中选择「交集」得到如图所示形状,填充颜色#663399

4.14 用同样的方法得到以下图形,填充颜色# ff5500

4.15 将以上图形按如图所示摆放

4.16 现在开始绘制轮子,首先绘制一个55*55的圆,使用上面做底座半球体的方法,得到轮廓及其亮部,我们为半圆填充颜色# d66100,为亮部填充颜色# ff8b00,选中两个图形,Ctrl G编组,命名为「轮廓1」

4.17 选择「轮廓1」,按住Alt键往右平移92px,将复制层命名为「轮廓2」

4.18 为车车添加后保险杠,首先绘制一个40*25的矩形,调整锚点为圆角并填充颜色# e0d7ff,放置于如图所示位置

4.19 接下来绘制车轮。首先绘制一个35*45的椭圆,填充颜色#885cbc,选中椭圆,按住Alt键往右平移6px。接着使用钢笔工具,以椭圆的四个端点绘制一个矩形,如图所示。选中三个图形,点击「路径查找器」中的「联集」,得到车轮轮廓

4.20 绘制一个35*45的椭圆,填充颜色#663399,与车轮轮廓水平右对齐,垂直居中对齐,作为车轮的暗部

4.21 接着,我们用绘制车灯的方法得到轮毂的形状,为轮毂填充颜色#aca1ff,为轮毂暗部填充颜色#e0d7ff,将轮毂与车轮暗部水平和垂直居中对齐,得到轮子整体

4.22 选中以上图形,Ctrl G编组,命名为「右轮1」,选中「右轮1」,按住Alt键往右平移92px,将复制层命名为「右轮2」

4.23 同样的方法得到左边的轮子,这里需要注意的是左边的轮子暗部颜色填充为#421e6b,同时轮毂部分替换为6*9的椭圆,填充颜色#885cbc,如图所示

4.24 选中三个图形,Ctrl G编组,命名为「左轮1」,按图所示放置

4.25 选中「车车」图层中的所有元素,Ctrl G再次编组,命名为「车车」

由于视角关系,剩下的轮子会被支柱和前轮遮挡,挡风玻璃的部分到了Ae中需要单独处理,所以到这里我们车车的部分已经大体完成了

4.26 接下来绘制挡风玻璃。新建一个图层,命名为「挡风玻璃」

选中「挡风玻璃」图层,使用钢笔工具绘制如下形状,将两个图形水平右对齐,垂直底对齐得到挡风玻璃整体形状,Ctrl G将两个图形编组,命名为「挡风玻璃」

4.27 将挡风玻璃和车车按如图所示放置

4.28 为挡风玻璃制作反光。新建一个图层,命名为「挡风玻璃遮罩」

选中「挡风玻璃遮罩」图层,绘制两个矩形,参数分别是40*125,20*125,选中两个矩形,右键→变换→倾斜,如图设置。选中倾斜后的图形,Ctrl G编组,命名为「反光」

4.29 调整「挡风玻璃」和「挡风玻璃遮罩」图层顺序,如图放置

步骤5:绘制小鸡

5.1 开始绘制小鸡。新建一个图层,命名为「小鸡身体」

选中「小鸡身体」图层,绘制一个140*135的矩形,将上方两个锚点分别往中间缩进35px,调节四个锚点变为圆角,得到如图形状,填充颜色#ffe000

5.2 选中上面得到的图形,按住Alt键拖动复制两次。将复制的第一个图形旋转至如图所示角度与复制的第二个图层做「减去顶层」操作,并将透明度模式改为「正片叠底」

5.3 将两个图形对齐得到小鸡身体的主体。选中两个图形,Ctrl G编组命名为「小鸡身体」

5.4 为小鸡绘制鸡嘴。使用钢笔工具绘制如图所示图形,调整锚点为如图所示的圆角,得到鸡嘴形状,填充颜色为#ff7300

5.5 选择上面的形状,按住Alt键拖动复制一层,如图放置并调整透明度模式为「正片叠底」, 接着绘制一个3*33的圆角矩形,填充颜色#f15a24,如图所示放置,得到鸡嘴造型

5.6 到这里,小鸡身体部分就完成了

5.7 接下来绘制小鸡的墨镜。新建一个图层,命名为「墨镜」

选中「墨镜」图层,绘制两个椭圆,参数分别是25*20和30*20,使用上面提到的「减去顶层」方法得到两个半圆,填充颜色# 663399 ,绘制一个1.5*14的矩形连接两个图形,选中三个图形,使用「联集」合并

5.8 接下来使用钢笔工具绘制以下图形,填充颜色#421e6b,并与上面的图形对齐,得到墨镜的形状

5.9 选中上面的墨镜形状,按住Alt拖动复制一层,按如图所示放置并填充颜色# ffe000,透明度模式改为「正片叠底」

5.10 调整图层顺序,并如图放置所得到的形状

5.11 为墨镜添加反光。新建一个图层,命名为「墨镜遮罩」

选中「墨镜遮罩」图层,使用上面绘制「挡风玻璃遮罩」的方法得到墨镜的遮罩,只需将矩形的参数更换为4*100和2*100,并复制多层即可。Ctrl G编组所有图形,命名为「反光」调整图层顺序,如图放置

5.12 接下来绘制鸡冠。新建一个图层,命名为「鸡冠」

选中「鸡冠」图层,使用钢笔工具绘制以下图形,其中图形1填充颜色#f24077,图形2填充颜色与图形1相同,但透明度模式需要选择「正片叠底」,不透明度调整为60%。Ctrl G将所有图形编组,命名为「鸡冠」

5.13 调整图层顺序,并如图放置所得到的形状

5.14 为小鸡画个手手。新建一个图层,命名为「鸡翅」

选中「鸡翅」图层,使用钢笔工具绘制以下形状,填充颜色# ffe600,接着使用上面绘制小鸡身体的方法得到鸡翅的暗部,如图所示摆放。Ctrl G将所有图形编组,命名为「鸡翅」

5.15 调整图层顺序,并如图放置所得到的形状

步骤6:绘制投币机

6.1 绘制投币机。新建一个图层,命名为「投币机」

选中「投币机」图层,使用绘制车轮的方法绘制投币机主体,只需将椭圆参数调整为40*50,同时图形1颜色填充更换为#f24077,图形2更换为#dd2651即可

6.2 接着,绘制一个10*190的圆角矩形,填充颜色#ffffff,如图所示放置。选中三个图形,Ctrl G编组,命名为「投币机」

6.3最后,调整各个图层的顺序并如图所示放置元素,Ctrl S保存ai文件,命名为「小鸡摇摇车」


到这一步, Ai部分就已经完成了,接着我们到Ae中完成动效的制作

步骤7:Ae中为小鸡和车车制作动效

7.1 打开Ae,在项目面板中右键→导入→文件,「导入为」选择「合成-保持图层大小」

7.2 导入完成后,将不相关的图层锁住

7.3 接着,我们将指示器拖动到04s的位置,按N键截断,使整个动效时长变为4秒

7.4 首先,我们让「底座」,「支柱」和「背景」图层独奏。

为支柱制作动效。点击「支柱」图层,按R键调出旋转属性,并把指示器移动到00s的位置上,点击小秒表为它打上关键帧

7.5 接着我们选择向后平移锚点工具,把支柱的旋转中心拖动到如图所示位置,接着将指示器移动到如图所示位置,把支柱的旋转角度设置为-14°,选中关键帧,按F9键添加缓动

7.6 拖动时间指示器到01s的位置上,调整旋转角度为0°,使支柱回到原点

7.7 移动指示器如图所示位置,调整旋转角度为+14°,并按F9键为关键帧添加缓动

7.8 重复上面的做法,得到支柱的完整动效

7.9 接下来制作车车的动效。点击「车车」图层前面的小点使其独奏,在「父集和链接」处,选择「支柱」作为它的父集,使车车跟随支柱旋转。按R键调出旋转属性,并把指示器移动到00s的位置上,点击小秒表为它打上关键帧。

7.10 将指示器移动到如图位置,调整车车旋转角度为+14度

7.11 使用和制作支柱动效相同的方法,以此类推,得到车车的动效

7.12 制作挡风玻璃的动效。首先使「挡风玻璃」和「挡风玻璃遮罩」图层独奏。点击「挡风玻璃」图层,Ctrl C ,Ctrl F复制一次得到「挡风玻璃2」图层,按如图所示调整图层顺序。接着,点击「挡风玻璃遮罩」图层,在「TrkMat」栏选择Alpha,并如图所示设置各图层的父子集关系

7.13 接下来,我们使「小鸡身体」「墨镜」和「墨镜遮罩」图层独奏,用制作挡风玻璃遮罩的方法制作墨镜的动效,如图所示设置图层父子集关系

7.14 接着制作鸡冠的动效。首先将「鸡冠」图层的父集设置为「小鸡身体」,接着选择向后平移锚点工具,把鸡冠的旋转中心拖动到如图所示位置,接着将指示器移动到00s的位置上,按R键调出旋转属性,点击小秒表为它打上关键帧

7.15 把指示器拖动到如图所示位置,将鸡冠旋转角度设置为-6°,并按F9键添加缓动

7.16 使用制作支柱动效的方法以此类推,得到鸡冠的动效

7.17 为鸡翅制作动效。首先点击「鸡翅」图层,调整旋转中心到如图所示的位置。将指示器拖动到00s的位置,为它打上关键帧

7.18 将指示器拖动到如图所示位置,调整鸡翅旋转角度为+10°并为其添加缓动

7.19 以此类推得到鸡翅的完整动效

7.20 到这一步,我们所有图层的动效都制作完毕了,Ctrl S保存aep文件,命名为「小鸡摇摇车」

7.21 我们需要把小动效导出为avi文件。点击合成→添加到渲染队列,如图设置参数


7.22 输出位置选择桌面,点击「渲染」按钮,Ae部分就完成了

步骤8:在Ps中导出gif

我们在Ps中打开保存好的avi文件,同时按住Ctrl,Shift,Alt和S键,如图所示设置,点击「存储」选择保存的位置,我们的小鸡摇摇车gif就做好啦

最终效果图

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容