AI+AE教程!教你制作会动的线面结合文具类图标

时间:2022-05-10
类别:AI教程
水平:普通
观众:1.6w
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

教程作者:优设设计师就业衔接班14期-33-仓鼠

教程指导:如如优设设计师就业衔接班讲师)

交作业:#优设每日作业#

文章编辑:@雪寄草

关于教程

大家好,我是来自14期就业衔接班的仓鼠君,本期教程为你带来一组文具用品动态图标的设计全流程~

通过本次教程,你将学到 AI 中形状工具、钢笔工具、简单的布尔运算、形状生成器工具,以及 AE 中修剪路径等工具的使用,同时还能掌握线面结合图标切换动效的制作技巧。每个步骤都有十分详细的拆分和讲解,非常适合新手学习,赶紧来上手试试吧~

教程效果图

AI+AE教程!教你制作会动的线面结合文具类图标

思路解析

本教程将展示文具系列动态图标的详细制作步骤,这个系列里有四个图标,分别是剪刀、记号笔、美工刀和圆规。

一套动效图标的制作包含两个部分,第一部分要运用Adobe Illustrator制作线面结合图标。第二部分是要在Adobe After Effects中给图标加上动效。

从动态效果可以看到,每一个图标的黑色边框都会比色块出现的略早一点,并且线和面在动效中使用了不同的制作方法,所以在AI的绘制中,我们将黑色线性外框和纯色错层内部填充部分拆开来制作,再根据文具用品在实际生活中不同的的使用方式,在AE里制作出属于每个图标独有的动态效果。

AI+AE教程!教你制作会动的线面结合文具类图标 AI+AE教程!教你制作会动的线面结合文具类图标

教程步骤

一、绘制前准备工作

1、创建文档

打开Adobe Illustrator,点击文件->新建文档(Ctrl+N),尺寸512*512px,颜色模式RGB,分辨率72ppi,如下:

AI+AE教程!教你制作会动的线面结合文具类图标

2、设置背景

找到AI的图层面板,双击图层名称处,将名称修改为「背景」;

使用「矩形工具」(快捷键M) 在画板中间点击一下 ,输入数值,绘制一个512*512px的矩形;

  • 填充颜色:C2DFE0, 描边:无;
  • 水平、垂直居中对齐画板。
  • 锁定图层

AI+AE教程!教你制作会动的线面结合文具类图标

注意:在这里我们设置一个区别于白色和黑色的背景,目的是让我们在绘制边框和填充色块时更方便的查看效果,最后在AE里做完动效后会换回白色背景。

3、绘图通用标准

3.1 添加参考线(参考线文件在教程最后)

参考线最后在AE里会去掉

AI+AE教程!教你制作会动的线面结合文具类图标

3.2 检查视图选项,勾选智能参考线,取消对齐网格、像素、点。

AI+AE教程!教你制作会动的线面结合文具类图标

3.3 存储文档

将此文档命名为「剪刀」存储到自己电脑自定义路径,并复制三个,分别命名记号笔、美工刀、圆规。

AI+AE教程!教你制作会动的线面结合文具类图标

3.4 图标描边和填充色

本教程图标统一描边设置,后面不再重复说明。打开描边面板,设置如下:

  • 描边粗细:9pt,描边颜色:000000;
  • 圆头端点,圆角连接,使描边居中对齐;

涉及到的填充颜色如图所示,如有额外添加颜色会另行标注。

AI+AE教程!教你制作会动的线面结合文具类图标AI+AE教程!教你制作会动的线面结合文具类图标

二、AI绘制部分

1、剪刀

绘制效果图

AI+AE教程!教你制作会动的线面结合文具类图标

1.1 线性边框绘制(只绘制描边,无填充)

绘制线性边框时,可以暂时关闭背景视图,到填充颜色的时候再打开。

1.1.1 利用「形状工具」绘制基础形状

新建图层,命名为【线性剪刀】,并移至图层面板最上层。

AI+AE教程!教你制作会动的线面结合文具类图标

使用「矩形工具」(快捷键M),分别绘制一个尺寸为85*260px的矩形,命名为「左刀刃」;

一个尺寸70*105px的矩形;

使用「圆形工具」(快捷键L),分别绘制一个尺寸为25*25px的圆形,命名为「中心转轴」

一个尺寸为114*114px的大圆和一个50*50px的小圆

AI+AE教程!教你制作会动的线面结合文具类图标

将绘制好的基础形状按下图所示排列,注意转轴和刀刃居中对齐,相邻形状的描边要对齐,不要产生缝隙。

AI+AE教程!教你制作会动的线面结合文具类图标AI+AE教程!教你制作会动的线面结合文具类图标

可以在轮廓视图中检查路径是否对齐,如下图所示:

AI+AE教程!教你制作会动的线面结合文具类图标

1.1.2 利用「钢笔工具」、「形状生成」对基础形状进行变形

l  刀刃绘制

用钢笔工具在矩形上添加一个锚点作为刀尖,用选择工具同时选中刀尖两侧锚点,往下平移

(大概平移到图中这个位置就可以了),最后调整圆角弧度。(如图所示,调整中大部分圆角弧度都是拉满的,个别需要调整的我会单独标注出来)

AI+AE教程!教你制作会动的线面结合文具类图标

下半部分的调整如图所示,选中整条路径,在下方与手柄交叉处添加锚点①,在左侧与轴心最低点交叉处添加锚点②,将右下角锚点③拖至与锚点①同一垂直线上,再调整圆角弧度。

AI+AE教程!教你制作会动的线面结合文具类图标

左刀刃的绘制就完成了~

l  手柄绘制

调整手柄形状,选中矩形左上锚点,同时按住Shift向右平移(没有规定平移多少,调整至四边形的左边略微倾斜即可),再选中该锚点的圆角,调整半径为12px;

AI+AE教程!教你制作会动的线面结合文具类图标

同时选中四边形和大圆,利用形状生成器工具,将两个形状合并。

AI+AE教程!教你制作会动的线面结合文具类图标 AI+AE教程!教你制作会动的线面结合文具类图标

还是用形状生成器工具,将刚刚合成的图形和内部小圆一起选中,按住Alt键删去中间形状,松开Alt键,再点击我们需要的手柄部分形成新的形状。

AI+AE教程!教你制作会动的线面结合文具类图标

最后记得给新生成的形状重命名为<左手柄>。

现在有了剪刀的左半边,接着将刀刃图层和手柄图层编组(快捷键:Ctrl+G),右键点击画板中的形状,选择变换->镜像->复制,复制出剪刀右半部分,移动复制出来的形状,使左右两边以转轴为中心对称。操作如下:

AI+AE教程!教你制作会动的线面结合文具类图标

那么我们剪刀的线框部分就完成了,效果图如下:

AI+AE教程!教你制作会动的线面结合文具类图标

l  图层命名

接下来用选择工具框选中剪刀,取消编组(快捷键Ctrl+Shift+G),并根据不同部位修改命名,更改图层名称为【线性剪刀】

AI+AE教程!教你制作会动的线面结合文具类图标

1.2 纯色内部填充

现在我们要打开背景图层前面的小眼睛。

1.2.1 建立色块图层

接下来是绘制色块的部分,我们对【线性剪刀】图层进行复制,鼠标拖动所要复制的图层至图层面板最下边的【新建图层】图标上,直到【抓手】图标出现然后松开鼠标完成复制;

AI+AE教程!教你制作会动的线面结合文具类图标

复制出的新图层置于线性图层下方,命名为【颜色填充】;

AI+AE教程!教你制作会动的线面结合文具类图标

补充一点,为了方便区分图层关系,我们可以按照下图指示调出图层选项面板对新图层进行更改操作;

AI+AE教程!教你制作会动的线面结合文具类图标

更改后如下图所示,我们可以看见形状控件的颜色也发生了变化;

AI+AE教程!教你制作会动的线面结合文具类图标

重复上面操作,复制一个新图层,置于【颜色填充】图层下方,命名为【白底】;

AI+AE教程!教你制作会动的线面结合文具类图标

1.2.2 填充颜色

选中【白底】,设置填充色:#FFFFFF,描边:无;

AI+AE教程!教你制作会动的线面结合文具类图标

分别给剪刀每个部分填充颜色,按照下图参数设置即可;

AI+AE教程!教你制作会动的线面结合文具类图标

1.2.3 制作内部填充错位效果

此步骤将教你灵活运用【形状生成器工具】,掌握形状加减法。

l  准备工作

选中【左手柄】,选择形状生成器工具(快捷键Shift+M),点击镂空部分,生成黄色小圆;

AI+AE教程!教你制作会动的线面结合文具类图标

再次选中【左手柄】,选择形状生成器工具,鼠标沿颜色区域和镂空区域拖拽,将镂空区域封闭起来,形成新形状;

AI+AE教程!教你制作会动的线面结合文具类图标

键盘按住Ctrl+C,Ctrl+F原地复制封闭形状,生成这三个形状是为了下一步形状切割做准备。

这里只演示了【左手柄】的准备过程,【右手柄】也按照上述方式制作;

AI+AE教程!教你制作会动的线面结合文具类图标

在准备【左刀刃】的形状时,会更简单,只需要原地复制一次原图层就可以了,需要注意的是准备【右刀刃】的形状时,我们需要多复制一层,为什么要多复制一层呢?看后面正式切割时的图解你就会明白啦~

l  正式切割

下面以动图的形式展示每部分图形的形成:

【左手柄】制作:

AI+AE教程!教你制作会动的线面结合文具类图标

【右手柄】

AI+AE教程!教你制作会动的线面结合文具类图标

【左刀刃】

AI+AE教程!教你制作会动的线面结合文具类图标

【右刀刃】

AI+AE教程!教你制作会动的线面结合文具类图标

形状切割后效果图:

AI+AE教程!教你制作会动的线面结合文具类图标

1.3 图层梳理

在到AE里添加图形的动态效果之前,我们要分清楚图层之间的关系,使物体的每个组成部件有合理的位置关系。

接下来我将讲解图层顺序的摆放方式,这一步很重要,清晰的图层关系能帮助我们在AE里的制作更高效。

AI+AE教程!教你制作会动的线面结合文具类图标

首先打开图层前面的小眼睛,显示所有图层;

AI+AE教程!教你制作会动的线面结合文具类图标

将【白底】里的图层分别移至【颜色填充】里的对应部位下方

AI+AE教程!教你制作会动的线面结合文具类图标

选中【白底左刀刃】,Ctrl+C复制,再选中【线性剪刀】图层里的【左刀刃】,Ctrl+B原地粘贴至下方,命名为【遮罩层】,为遮罩层的形状添加描边,描边颜色为白色,描边粗细:9pt。

AI+AE教程!教你制作会动的线面结合文具类图标

因为在AE中要对黑色边框加入修剪路径动效,所以每条形状路径需要放在独立的图层;

在路径的运动过程中,会有层叠出现,为了避免线条交叉运动时分不清上下关系,需要在两个刀刃图层中间加一层白色填充,对下方刀刃的路径进行遮罩,这样在视觉上会有更清晰的效果。

接下来对移动后的图层与原图层进行两两编组,如下图所示:

AI+AE教程!教你制作会动的线面结合文具类图标

编组后达到这样的效果;

AI+AE教程!教你制作会动的线面结合文具类图标

分别选中图层【线性剪刀】、【颜色填充】,按顺序释放,如下图所示:

AI+AE教程!教你制作会动的线面结合文具类图标

释放后,对每个单独的图层重命名,并进行最后的存储;

AI+AE教程!教你制作会动的线面结合文具类图标

到这里,我们剪刀的绘制就全部结束了。

注意!!!AI文件导入AE后,不要在AE软件外更改AI文件名,因为更改名称后的AI文件在AE里面会读取失败,造成文件丢失!!!

下面三个图标我就不像剪刀讲解的那么细致了,只把我的关键步骤展示出来供大家参考~因为工具的使用方式都是一样的,要学会举一反三哦,这样也会帮助你更熟练地掌握软件的使用~

2、记号笔

效果图

AI+AE教程!教你制作会动的线面结合文具类图标

2.1 边框绘制

2.1.1 打开AI文件

AI+AE教程!教你制作会动的线面结合文具类图标

2.1.2 绘制基础形状

新建图层,命名为【线性记号笔】;

AI+AE教程!教你制作会动的线面结合文具类图标

选择矩形工具(M),双击画板,绘制四个尺寸分别为130*255px、130*35px、60*35px和35*60px的矩形;

以及两条路径,宽度分别为80px、215px;

2.1.3 基础形状演变

选择自由变换工具(E)的透视扭曲对矩形进行变形操作,缩窄上边宽度,然后调整上方的圆角半径,下面的倒梯形也是也这样得来的,但不需要调整圆角半径;

AI+AE教程!教你制作会动的线面结合文具类图标

变换好了记得给图层命名,并设置垂直居中对齐;

AI+AE教程!教你制作会动的线面结合文具类图标

这样我们的线框部分就绘制完成了。

2.2 内部填充

2.2.1 建立色块图层

复制两次线框图层,删掉多余路径,分别命名为【颜色填充】和【白底】;

AI+AE教程!教你制作会动的线面结合文具类图标

2.2.2 填充颜色

选中【白底】图层,设置填充:白色(#FFFFFF),描边:无;

打开颜色填充层,描边:无;设置填充色,灰色(#E6E6E6),蓝色(#4DBBEB);

AI+AE教程!教你制作会动的线面结合文具类图标

2.2.3 制作内部填充错位效果

选中颜色填充层,原地复制粘贴(Ctrl+V,Ctrl+F),用选择工具将复制的颜色层向左平移,达到错层效果;

AI+AE教程!教你制作会动的线面结合文具类图标

选择形状生成器工具(Shift+M),按住Alt减去左右多余色块;

AI+AE教程!教你制作会动的线面结合文具类图标

最终效果:

AI+AE教程!教你制作会动的线面结合文具类图标

记得将同一部位的白底和色块进行两两编组;

AI+AE教程!教你制作会动的线面结合文具类图标

2.3 图层梳理

最后按图中这样把每个图层分好~

AI+AE教程!教你制作会动的线面结合文具类图标

记号笔的线框部分在运动时是没有遮挡关系的,所以我们也没有单独设置遮罩层,但是下面要制作的图标是需要用到遮罩层的哦~

3、美工刀

效果图

AI+AE教程!教你制作会动的线面结合文具类图标

3.1 边框绘制

3.1.1 打开AI文件

AI+AE教程!教你制作会动的线面结合文具类图标

3.1.2 绘制基础形状

新建线性图层,命名为【线性美工刀】;

AI+AE教程!教你制作会动的线面结合文具类图标

美工刀由外壳、卡槽、刀片和推手四个部分组成,它们都可以从矩形演变出来;

绘制四个矩形,尺寸分别为100*300px、25*200px、65*185px、50*95px;

以及推手上的两条路径,长度分别为1px、26px;

AI+AE教程!教你制作会动的线面结合文具类图标

3.1.3 基础形状变形

这个图标的绘制比较简单,只用到了锚点的移动、圆角半径的设置;

四个线框的图层顺序由上到下分别是推手、卡槽、外壳、刀片;

AI+AE教程!教你制作会动的线面结合文具类图标

最后将四个部分设置为居中对齐。

AI+AE教程!教你制作会动的线面结合文具类图标

3.2 内部填充

3.2.1 建立色块图层

复制线框图层,给图层命名为【颜色填充】,新建【白底】图层,将线框图层的推手和外壳复制到【白底】图层里并重命名为白底推手,白底外壳;

AI+AE教程!教你制作会动的线面结合文具类图标

3.2.2 填充颜色

选中【白底】图层,设置填充:白色(#FFFFFF),描边:无;

打开颜色填充层,设置填充色,红色(#FD3C65),灰色(#E6E6E6),蓝色(#4DBBEB);

AI+AE教程!教你制作会动的线面结合文具类图标

3.2.3 制作内部填充错位效果

这里只对【推手】和【外壳】进行分割,操作方式与前面图标里的方式一样,这里省略讲解啦~

AI+AE教程!教你制作会动的线面结合文具类图标

分割后的效果;

AI+AE教程!教你制作会动的线面结合文具类图标

在将白底和色块编组之前,分别选中白底推手,白底外壳复制(Ctrl+C),选中对应的线框层,粘贴(Ctrl+B)到下方,并显示描边,描边粗细:9pt,描边颜色:白色,给这两个图层命名为【线槽遮罩】,【刀片遮罩】,在AE中将使用到这两个图层;

AI+AE教程!教你制作会动的线面结合文具类图标

记得白底和要和对应色块编组哦~

3.3 图层梳理

最后把每个要加上动效的部分按顺序释放到独立图层中。

AI+AE教程!教你制作会动的线面结合文具类图标

美工刀的绘制告一段落啦~接着绘制最后一个图标吧~

4、圆规

效果图

AI+AE教程!教你制作会动的线面结合文具类图标

4.1 边框绘制

4.1.1 打开AI文件

AI+AE教程!教你制作会动的线面结合文具类图标

4.1.2 绘制基础形状

新建图层,命名为【线性圆规】;

AI+AE教程!教你制作会动的线面结合文具类图标

圆规由顶部旋钮、固定架、中心轴、左右脚和脚尖组成;

AI+AE教程!教你制作会动的线面结合文具类图标

我们用形状工具绘制基础形状,选择矩形工具(M)绘制出尺寸为:30*55px;75*95px;60*220px的三个矩形;

再选择椭圆工具(L),双击画板,输入尺寸330*330px,得到一个正圆,一会要用它来制作半弧状运动轨迹;

另外用钢笔工具(P)分别绘制宽度为1px的中心轴路径、高度为260px的路径、宽度为275px和40px的两条红色(#FD3C65)路径。

AI+AE教程!教你制作会动的线面结合文具类图标

4.1.3 基础形状变形

用剪刀工具(快捷键:C)给正圆两边的锚点各点一下,再用直接选择工具框选中不需要的上半边路径,按住Delete键删除,最底端需要用钢笔工具添加两个锚点后再剪断,操作方法是一样的,这样半弧状运动轨迹就做好了;

AI+AE教程!教你制作会动的线面结合文具类图标

圆规左右脚包括尖脚是用形状生成器工具制作出来的,另一个尖脚需要复制出来哦;

AI+AE教程!教你制作会动的线面结合文具类图标

4.2 内部填充

4.2.1 建立色块图层

复制线框图层,给图层命名为【颜色填充】,保留需要填充颜色的四个部分,再复制颜色填充层,命名为【白底】;

AI+AE教程!教你制作会动的线面结合文具类图标

4.2.2 填充颜色

选中【白底】图层,设置填充:白色(#FFFFFF),描边:无;

打开颜色填充层,设置填充色,红色(#FD3C65),灰色(#E6E6E6);

AI+AE教程!教你制作会动的线面结合文具类图标

4.2.3 制作内部填充错位效果

选中颜色填充层,原地复制粘贴一次(Ctrl+C,Ctrl+F);

AI+AE教程!教你制作会动的线面结合文具类图标

接着用我们熟悉的形状生成器对色块进行切割,操作方法还是一样的哦~

AI+AE教程!教你制作会动的线面结合文具类图标

最后效果;

AI+AE教程!教你制作会动的线面结合文具类图标

记得颜色填充层和对应白底要编组哦~

AI+AE教程!教你制作会动的线面结合文具类图标

为了AE动效制作,我们要给线性图层里的圆规腿加上遮罩层,我们将【线固定】原地复制粘贴至下方(Ctrl+C,Ctrl+B),描边粗细不变,描边、填充颜色:红色。

AI+AE教程!教你制作会动的线面结合文具类图标

4.3 图层梳理

终于,我们来到了AI中最后一个图标的收尾工作,四个图标绘制下来相信你对释放图层很熟悉了,按照之前的方式将每个图层独立出来,马上就能导入AE中了。

AI+AE教程!教你制作会动的线面结合文具类图标

三、动效制作前准备工作

1、创建文档

打开Adobe After Effects,新建合成(Ctrl+N),命名为【文具图标】,设置宽度:750px,高度:750px,帧速率:30,持续时间11s,背景色:白色。

AI+AE教程!教你制作会动的线面结合文具类图标

2、导入AI文件

右键点击项目窗口,导入->文件;

选择绘制好的AI文件,导入为改成「合成-保持图层大小」,导入选项勾选「创建合成」。依次导入四个图标文件,导入之后项目窗口会自动为每个图标生成一个合成和一个文件夹。

AI+AE教程!教你制作会动的线面结合文具类图标

3、合成设置

选中导入的合成项目,右键->合成设置(快捷键Ctrl+K ),设置该项目的持续时间为3秒10帧,背景颜色为白色(#FFFFFF),所有图标合成设置同步;

AI+AE教程!教你制作会动的线面结合文具类图标AI+AE教程!教你制作会动的线面结合文具类图标

这里合成设置的尺寸是默认的512*512px,我们不需要更改,但是到记号笔的时候要把尺寸调整至1024*1024px,这是因为记号笔图标的动效比较特别,它的位置属性在水平、垂直方向都不是固定的,尺寸小了会出框,调整尺寸才能让图标在运动时完整的呈现。

AI+AE教程!教你制作会动的线面结合文具类图标AI+AE教程!教你制作会动的线面结合文具类图标

4、创建可编辑形状

双击合成项目,所有的AI图层会在时间轴面板里按顺序展开。选中所有图层右键->创建->从矢量图层创建形状,删除多余的AI格式图层。

AI+AE教程!教你制作会动的线面结合文具类图标

这里把四个图标文件都按照第3步和第4步操作一遍;

AI+AE教程!教你制作会动的线面结合文具类图标

前期准备工作就告一段落啦。接下来是单个图标的动效制作。

四、AE动效制作

1、剪刀

1.1 制作空对象动效

1.1.1 有效利用【消隐开关】按钮

【消隐开关】的使用将贯穿整个AE使用过程,它方便我们查看图层,编辑图层;让时间轴面板只显现当前需要编辑的关键图层就够了。

AI+AE教程!教你制作会动的线面结合文具类图标

1.1.2 新建空对象图层

右键->新建空对象;

AI+AE教程!教你制作会动的线面结合文具类图标

拖动【空对象】中心点与【中心转轴】中心点重合;

AI+AE教程!教你制作会动的线面结合文具类图标

接着选中【空对象】图层进行复制(快捷键Ctrl+D);

AI+AE教程!教你制作会动的线面结合文具类图标

将两个空对象分别重命名为【上方旋转】和【下方旋转】。

AI+AE教程!教你制作会动的线面结合文具类图标

1.1.3 使用轨道遮罩功能

在AI制作部分对遮罩层制作的原因做过说明,这里不再赘述。现在我们要解决如何在AE中实现图层的遮罩效果,这里我们直接在右刀刃的轨道遮罩里选中【Alpha反转遮罩】这一选项就好了。

AI+AE教程!教你制作会动的线面结合文具类图标

1.1.4 父子级关联

遮罩层跟随剪刀左边一起运动,从线性边框算起,到填充色块图层,属于剪刀左半部分的图层一共有五个,我们让五个图层都与之前建立的空对象【上方旋转】进行父子级关联就OK了,空对象作为【父级】,为它设置的参数将决定【子级】的运动效果。

AI+AE教程!教你制作会动的线面结合文具类图标

让我们看看利用父子级链接与空对象关联的效果,

AI+AE教程!教你制作会动的线面结合文具类图标

剪刀的另一边也是同样的制作方法哦~这里就省略讲解啦~

1.1.5 空对象参数设置

编辑两个空对象图层的时间条长度,同时选中空对象图层,将当前时间指示器放在20f处,切断为层入点(快捷键:Alt+【),再将指示器挪动至2s07f处,切断为层出点(Alt+】),其他图标的空对象持续时间都是这么长,不另外说明,参照这个设置即可;

AI+AE教程!教你制作会动的线面结合文具类图标

调出空对象图层的旋转属性(快捷键:R),分别按照下图中时间点插入关键帧,选中所有关键帧->右键->关键帧辅助->缓动(快捷键:F9),此教程里的关键帧都要添加缓动哦~;

AI+AE教程!教你制作会动的线面结合文具类图标

根据剪刀的动态效果修改第2、4帧的旋转数值;

AI+AE教程!教你制作会动的线面结合文具类图标

如果想要动效变化得有趣一些,我们可以打开图表编辑器,通过调节运动速度曲线,改变动效的节奏;

AI+AE教程!教你制作会动的线面结合文具类图标

这样我们的两个空对象图层的动效就制作完成了~接着对边框添加动效吧!

1.2 线性边框动效制作

展开图层,右键添加,选择修剪路径,然后把结束打上关键帧;

按住Shift+T,调出不透明度属性栏,打上关键帧;

AI+AE教程!教你制作会动的线面结合文具类图标

这里我们让线条从无到有,所以先把结束的第一帧改为0,把想让线条完全出现的最后一帧改为100,在空对象的动效运动完成时,线条有一个消失的过程,这里需要把之前的关键帧复制到后面,调换顺序就可以啦~(注意:给一个图层插入完关键帧后,其他四个图层把设置好的关键帧全部选中复制粘贴到图层内容栏里就可以了)

AI+AE教程!教你制作会动的线面结合文具类图标

接下来是颜色图层的动效制作~

1.3 色块动效制作

这里的色块动效在线条动效之后出现,比线条动效更早消失,那么我们把色块图层的入点改到第5帧,出点改到2秒20帧,整个颜色图层的时间条就设置完成了;

AI+AE教程!教你制作会动的线面结合文具类图标

如何为色块添加有趣的动效呢,这里我们要用到图层的两个属性,分别是缩放(快捷键:S)和不透明度(快捷键:T),调出缩放选项后,按住Shift+T,可以同时调出不透明度的选项。

让颜色图层从透明到显现,同时让色块放大到线框外再收缩回原大小,达到轻微弹射的效果,

具体参数如下,最后要选中这个图层的关键帧复制到所需要同步的其他颜色图层里。

AI+AE教程!教你制作会动的线面结合文具类图标

最后按空格键预览;

AI+AE教程!教你制作会动的线面结合文具类图标

2、记号笔

2.1 制作空对象动效

2.1.1 新建空对象图层

右键->新建空对象;命名为【45度平移】;

拖动空对象层的中心点控件与蓝线起点重合;

AI+AE教程!教你制作会动的线面结合文具类图标

调出空对象层的位置设置(快捷键:P)

AI+AE教程!教你制作会动的线面结合文具类图标

2.1.2 父子级关联

记号笔除了蓝线层,全部与空对象层做父子级关联,空对象就代表了笔;

AI+AE教程!教你制作会动的线面结合文具类图标

2.1.3 空对象参数设置

空对象层的出点和入点和上面的剪刀图标所设置的是一样的,后面两个图标也是,四个图标的空对象层时间条出点、入点全部一致~

AI+AE教程!教你制作会动的线面结合文具类图标

这里笔的位置是根据笔迹的位置决定的,所以我们要先设置【蓝线】的参数,展开蓝线层右键添加修剪路径,设置第一帧的结束值:18%,这个时候的路径长度与笔头宽度差不多,最后一帧的结束值是100%,中间的数值可以自己调试,根据自己喜欢的效果来调整就可以了;

AI+AE教程!教你制作会动的线面结合文具类图标

在空对象时间条上的关键帧和蓝线上的是同步的哦,利用时间指示器就可以准确的打上关键帧了,记得添加缓动(F9)~

空对象层位置设置参考如下图:

AI+AE教程!教你制作会动的线面结合文具类图标

记号笔和笔迹同步来回运动的效果就制作出来啦~

2.2 线性边框动效制作

黑色描边的动效和上个图标一样,关键帧、参数设置相同;

AI+AE教程!教你制作会动的线面结合文具类图标

2.3 色块动效制作

图标的线条和色块一前一后出现,中间间隔5帧,线条和色块第一次和最后一次完整出现的时间点对应的就是空对象的出点和入点,这在四个图标的设置中是一致的;

AI+AE教程!教你制作会动的线面结合文具类图标

我在这里调用了色块的缩放和不透明度属性,参考如下:

AI+AE教程!教你制作会动的线面结合文具类图标

但色块的出现方式,可以是多样的,你可以尝试多种变换,通过调整位置(P)、大小(S)、透明度(T)、角度(R)的数值来达到你想要的效果,思路就是同上面讲解的那样,每个人都可以创造点不一样的东西,发挥你的想象做出独特的图标动效吧~

最后按空格键预览。

AI+AE教程!教你制作会动的线面结合文具类图标

3、美工刀

3.1 制作空对象动效

3.1.1 新建空对象图层

右键->新建空对象;

重命名为【平移】;

AI+AE教程!教你制作会动的线面结合文具类图标

拖动空对象层的中心点控件与推手中心点重合;

调出空对象层的位置属性栏(快捷键:P);

AI+AE教程!教你制作会动的线面结合文具类图标

3.1.2 使用轨道遮罩功能

利用AI里绘制好的遮罩形状,让卡槽和刀片层对其进行反转遮罩;

AI+AE教程!教你制作会动的线面结合文具类图标

遮罩效果制作完成效果;

AI+AE教程!教你制作会动的线面结合文具类图标

3.1.3 父子级关联

美工刀的运动方式和上面记号笔的类似,只不过它是垂直方向上的平移,要让空对象同时带动推手和刀片进行运动,需要将属于推手和刀片的全部图层与空对象关联父子级;

AI+AE教程!教你制作会动的线面结合文具类图标

3.1.4 空对象参数设置

拖动空对象层的位置(P)参数值,让其有一段短距离垂直方向上的运动,我一共设置了五个关键帧,制作出推手和刀片上下滑动的动效;

AI+AE教程!教你制作会动的线面结合文具类图标AI+AE教程!教你制作会动的线面结合文具类图标

3.2 线性边框动效制作

展开所有线框层,在添加处右键->修剪路径,关键帧和修剪路径的结束值和上两个图标一样哦~

3.3 色块动效制作

参考下图;

AI+AE教程!教你制作会动的线面结合文具类图标

最后按空格键预览一下;

AI+AE教程!教你制作会动的线面结合文具类图标

4、圆规

4.1 制作空对象动效

4.1.1 新建空对象图层

右键->新建空对象;

拖动空对象层的中心点控件与轴心的中心点重合,Ctrl+D复制出新的空对象,为两个图层分别命名【左脚旋转】、【右脚旋转】;

AI+AE教程!教你制作会动的线面结合文具类图标

调出空对象层的旋转属性栏(快捷键:R);

AI+AE教程!教你制作会动的线面结合文具类图标

4.1.2 使用轨道遮罩功能

复制一个遮罩层,对左右腿分别设置反转遮罩,效果如下;

AI+AE教程!教你制作会动的线面结合文具类图标

4.1.3 父子级关联

左旋层带动左边运动,右旋层带动右边运动;

AI+AE教程!教你制作会动的线面结合文具类图标

4.1.4 空对象参数设置

圆规的两条腿在闭合-打开-闭合这样的规律中运动,两个脚要绕中心转轴旋转,达到开合的效果,空对象的旋转度数决定了开合的大小;

AI+AE教程!教你制作会动的线面结合文具类图标AI+AE教程!教你制作会动的线面结合文具类图标

4.2 线性边框动效制作

展开所有线框层,在添加处右键->修剪路径,关键帧和修剪路径的结束值和上面图标一样哦~

4.3 色块动效制作

色块出现和消失的关键点在四个图标里的设置是一致的,但变换方式可以多样化,下图仅做参考;

AI+AE教程!教你制作会动的线面结合文具类图标

按住空格键预览效果;

AI+AE教程!教你制作会动的线面结合文具类图标

5、图标组合动效

将制作完成的图标合成,放入【文具图标】合成中,通过并对角度、大小的调整,达到和谐、统一的效果;

AI+AE教程!教你制作会动的线面结合文具类图标

来到时间轴面板,选中四个合成,按住Alt键往左拖动时间条的尾部,至第3秒结束,最初设置的时长偏长,动效看起来比较慢,现在我们微调一下;

AI+AE教程!教你制作会动的线面结合文具类图标

最后将时间条排序,每个图标的合成首尾相连,形成闭环。

AI+AE教程!教你制作会动的线面结合文具类图标

6、导出文件

选择合成菜单里的添加到渲染队列,不同的电脑系统需要在输出模块进行不同的格式选择,Win系统导出格式选择AVI,MAC系统选择QuickTime,最后点击渲染面板里的渲染按钮即可导出文件了;

AI+AE教程!教你制作会动的线面结合文具类图标

如果要制作GIF格式,可以将文件导入到Photoshop里,再以GIF格式导出就好了,记得把循环方式从一次改成永远循环~

AI+AE教程!教你制作会动的线面结合文具类图标 AI+AE教程!教你制作会动的线面结合文具类图标

好啦,以上就是本教程的全部内容,希望你能从中得到灵感或者启发~

最终效果图

AI+AE教程!教你制作会动的线面结合文具类图标

想要来「优优自学团」和500位小伙伴一起交流学习进步吗?
添加管理员微信:uisdc2 备注「优优自学团」(无备注不通过哦)

学完这篇教程的人还在学…

附件下载

文件名 文件大小 提取码 下载来源
辅助线 & 背景素材853KBnc9m 点此复制 登录下载
6 收藏 87

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接
img

发表评论 已发布 6

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了

优优教程网 365 天打卡计划

点击 #优设每日作业# 进入微博超话页面,上传并发布你的练习作业,话题微博格式【 优优教程网365打卡计划 – DAY 01 】,优秀作业将有机会被 @优优教程网 官方微博转发点评。

/

支持键盘 ← → 键翻阅图片