教程作者：优设设计师就业衔接班14期-33-仓鼠
本教程将展示文具系列动态图标的详细制作步骤，这个系列里有四个图标，分别是剪刀、记号笔、美工刀和圆规。
一套动效图标的制作包含两个部分，第一部分要运用AdobeIllustrator制作线面结合图标。第二部分是要在AdobeAfterEffects中给图标加上动效。
从动态效果可以看到，每一个图标的黑色边框都会比色块出现的略早一点，并且线和面在动效中使用了不同的制作方法，所以在AI的绘制中，我们将黑色线性外框和纯色错层内部填充部分拆开来制作，再根据文具用品在实际生活中不同的的使用方式，在AE里制作出属于每个图标独有的动态效果。
1、创建文档
打开AdobeIllustrator，点击文件->新建文档（Ctrl+N），尺寸512*512px，颜色模式RGB，分辨率72ppi，如下：
2、设置背景
找到AI的图层面板，双击图层名称处，将名称修改为「背景」；
使用「矩形工具」（快捷键M）在画板中间点击一下，输入数值，绘制一个512*512px的矩形；
注意：在这里我们设置一个区别于白色和黑色的背景，目的是让我们在绘制边框和填充色块时更方便的查看效果，最后在AE里做完动效后会换回白色背景。
3、绘图通用标准
3.1添加参考线（参考线文件在教程最后）
参考线最后在AE里会去掉
3.2检查视图选项，勾选智能参考线，取消对齐网格、像素、点。
3.3存储文档
将此文档命名为「剪刀」存储到自己电脑自定义路径，并复制三个，分别命名记号笔、美工刀、圆规。
3.4图标描边和填充色
本教程图标统一描边设置，后面不再重复说明。打开描边面板，设置如下：
涉及到的填充颜色如图所示，如有额外添加颜色会另行标注。
1、剪刀
绘制效果图
1.1线性边框绘制（只绘制描边，无填充）
绘制线性边框时，可以暂时关闭背景视图，到填充颜色的时候再打开。
1.1.1利用「形状工具」绘制基础形状
新建图层，命名为【线性剪刀】，并移至图层面板最上层。
使用「矩形工具」（快捷键M），分别绘制一个尺寸为85*260px的矩形，命名为「左刀刃」；
一个尺寸70*105px的矩形；
使用「圆形工具」（快捷键L），分别绘制一个尺寸为25*25px的圆形，命名为「中心转轴」
一个尺寸为114*114px的大圆和一个50*50px的小圆
将绘制好的基础形状按下图所示排列，注意转轴和刀刃居中对齐，相邻形状的描边要对齐，不要产生缝隙。
可以在轮廓视图中检查路径是否对齐，如下图所示：
1.1.2利用「钢笔工具」、「形状生成」对基础形状进行变形
l刀刃绘制
用钢笔工具在矩形上添加一个锚点作为刀尖，用选择工具同时选中刀尖两侧锚点，往下平移
（大概平移到图中这个位置就可以了），最后调整圆角弧度。（如图所示，调整中大部分圆角弧度都是拉满的，个别需要调整的我会单独标注出来）
下半部分的调整如图所示，选中整条路径，在下方与手柄交叉处添加锚点①，在左侧与轴心最低点交叉处添加锚点②，将右下角锚点③拖至与锚点①同一垂直线上，再调整圆角弧度。
左刀刃的绘制就完成了~
l手柄绘制
调整手柄形状，选中矩形左上锚点，同时按住Shift向右平移（没有规定平移多少，调整至四边形的左边略微倾斜即可），再选中该锚点的圆角，调整半径为12px；
同时选中四边形和大圆，利用形状生成器工具，将两个形状合并。
还是用形状生成器工具，将刚刚合成的图形和内部小圆一起选中，按住Alt键删去中间形状，松开Alt键，再点击我们需要的手柄部分形成新的形状。
最后记得给新生成的形状重命名为<左手柄>。
现在有了剪刀的左半边，接着将刀刃图层和手柄图层编组（快捷键：Ctrl+G），右键点击画板中的形状，选择变换->镜像->复制，复制出剪刀右半部分，移动复制出来的形状，使左右两边以转轴为中心对称。操作如下：
那么我们剪刀的线框部分就完成了，效果图如下：
l图层命名
接下来用选择工具框选中剪刀，取消编组（快捷键Ctrl+Shift+G），并根据不同部位修改命名，更改图层名称为【线性剪刀】
1.2纯色内部填充
现在我们要打开背景图层前面的小眼睛。
1.2.1建立色块图层
接下来是绘制色块的部分，我们对【线性剪刀】图层进行复制，鼠标拖动所要复制的图层至图层面板最下边的【新建图层】图标上，直到【抓手】图标出现然后松开鼠标完成复制；
复制出的新图层置于线性图层下方，命名为【颜色填充】；
补充一点，为了方便区分图层关系，我们可以按照下图指示调出图层选项面板对新图层进行更改操作；
更改后如下图所示，我们可以看见形状控件的颜色也发生了变化；
l重复上面操作，复制一个新图层，置于【颜色填充】图层下方，命名为【白底】；
1.2.2填充颜色
选中【白底】，设置填充色：#FFFFFF，描边：无；
分别给剪刀每个部分填充颜色，按照下图参数设置即可；
1.2.3制作内部填充错位效果
此步骤将教你灵活运用【形状生成器工具】，掌握形状加减法。
l准备工作
选中【左手柄】，选择形状生成器工具（快捷键Shift+M），点击镂空部分，生成黄色小圆；
再次选中【左手柄】，选择形状生成器工具，鼠标沿颜色区域和镂空区域拖拽，将镂空区域封闭起来，形成新形状；
键盘按住Ctrl+C，Ctrl+F原地复制封闭形状，生成这三个形状是为了下一步形状切割做准备。
这里只演示了【左手柄】的准备过程，【右手柄】也按照上述方式制作；
在准备【左刀刃】的形状时，会更简单，只需要原地复制一次原图层就可以了，需要注意的是准备【右刀刃】的形状时，我们需要多复制一层，为什么要多复制一层呢？看后面正式切割时的图解你就会明白啦~
l正式切割
下面以动图的形式展示每部分图形的形成：
【左手柄】制作：
【右手柄】
【左刀刃】
【右刀刃】
形状切割后效果图：
1.3图层梳理
在到AE里添加图形的动态效果之前，我们要分清楚图层之间的关系，使物体的每个组成部件有合理的位置关系。
接下来我将讲解图层顺序的摆放方式，这一步很重要，清晰的图层关系能帮助我们在AE里的制作更高效。
首先打开图层前面的小眼睛，显示所有图层；
将【白底】里的图层分别移至【颜色填充】里的对应部位下方
选中【白底左刀刃】，Ctrl+C复制，再选中【线性剪刀】图层里的【左刀刃】，Ctrl+B原地粘贴至下方，命名为【遮罩层】，为遮罩层的形状添加描边，描边颜色为白色，描边粗细：9pt。
因为在AE中要对黑色边框加入修剪路径动效，所以每条形状路径需要放在独立的图层；
在路径的运动过程中，会有层叠出现，为了避免线条交叉运动时分不清上下关系，需要在两个刀刃图层中间加一层白色填充，对下方刀刃的路径进行遮罩，这样在视觉上会有更清晰的效果。
接下来对移动后的图层与原图层进行两两编组，如下图所示：
编组后达到这样的效果；
分别选中图层【线性剪刀】、【颜色填充】，按顺序释放，如下图所示：
释放后，对每个单独的图层重命名，并进行最后的存储；
到这里，我们剪刀的绘制就全部结束了。
注意！！！AI文件导入AE后，不要在AE软件外更改AI文件名，因为更改名称后的AI文件在AE里面会读取失败，造成文件丢失！！！
下面三个图标我就不像剪刀讲解的那么细致了，只把我的关键步骤展示出来供大家参考~因为工具的使用方式都是一样的，要学会举一反三哦，这样也会帮助你更熟练地掌握软件的使用~
2、记号笔
效果图
2.1边框绘制
2.1.1打开AI文件
2.1.2绘制基础形状
新建图层，命名为【线性记号笔】；
选择矩形工具（M），双击画板，绘制四个尺寸分别为130*255px、130*35px、60*35px和35*60px的矩形；
以及两条路径，宽度分别为80px、215px；
2.1.3基础形状演变
选择自由变换工具（E）的透视扭曲对矩形进行变形操作，缩窄上边宽度，然后调整上方的圆角半径，下面的倒梯形也是也这样得来的，但不需要调整圆角半径；
变换好了记得给图层命名，并设置垂直居中对齐；
这样我们的线框部分就绘制完成了。
2.2内部填充
2.2.1建立色块图层
复制两次线框图层，删掉多余路径，分别命名为【颜色填充】和【白底】；
2.2.2填充颜色
选中【白底】图层，设置填充：白色（#FFFFFF），描边：无；
打开颜色填充层，描边：无；设置填充色，灰色（#E6E6E6），蓝色（#4DBBEB）；
2.2.3制作内部填充错位效果
选中颜色填充层，原地复制粘贴（Ctrl+V，Ctrl+F），用选择工具将复制的颜色层向左平移，达到错层效果；
选择形状生成器工具（Shift+M）,按住Alt减去左右多余色块；
最终效果：
记得将同一部位的白底和色块进行两两编组；
2.3图层梳理
最后按图中这样把每个图层分好~
记号笔的线框部分在运动时是没有遮挡关系的，所以我们也没有单独设置遮罩层，但是下面要制作的图标是需要用到遮罩层的哦~
3、美工刀
3.1边框绘制
3.1.1打开AI文件
3.1.2绘制基础形状
新建线性图层，命名为【线性美工刀】；
美工刀由外壳、卡槽、刀片和推手四个部分组成，它们都可以从矩形演变出来；
绘制四个矩形，尺寸分别为100*300px、25*200px、65*185px、50*95px；
以及推手上的两条路径，长度分别为1px、26px；
3.1.3基础形状变形
这个图标的绘制比较简单，只用到了锚点的移动、圆角半径的设置；
四个线框的图层顺序由上到下分别是推手、卡槽、外壳、刀片；
最后将四个部分设置为居中对齐。
3.2内部填充
3.2.1建立色块图层
复制线框图层，给图层命名为【颜色填充】，新建【白底】图层，将线框图层的推手和外壳复制到【白底】图层里并重命名为白底推手，白底外壳；
3.2.2填充颜色
打开颜色填充层，设置填充色，红色（#FD3C65），灰色（#E6E6E6），蓝色（#4DBBEB）；
3.2.3制作内部填充错位效果
这里只对【推手】和【外壳】进行分割，操作方式与前面图标里的方式一样，这里省略讲解啦~
分割后的效果；
在将白底和色块编组之前，分别选中白底推手，白底外壳复制（Ctrl+C），选中对应的线框层，粘贴（Ctrl+B）到下方，并显示描边，描边粗细：9pt，描边颜色：白色，给这两个图层命名为【线槽遮罩】，【刀片遮罩】，在AE中将使用到这两个图层；
记得白底和要和对应色块编组哦~
3.3图层梳理
最后把每个要加上动效的部分按顺序释放到独立图层中。
美工刀的绘制告一段落啦~接着绘制最后一个图标吧~
4、圆规
4.1边框绘制
4.1.1打开AI文件
4.1.2绘制基础形状
新建图层，命名为【线性圆规】；
圆规由顶部旋钮、固定架、中心轴、左右脚和脚尖组成；
我们用形状工具绘制基础形状，选择矩形工具（M）绘制出尺寸为：30*55px；75*95px；60*220px的三个矩形；
再选择椭圆工具（L），双击画板，输入尺寸330*330px，得到一个正圆，一会要用它来制作半弧状运动轨迹；
另外用钢笔工具（P）分别绘制宽度为1px的中心轴路径、高度为260px的路径、宽度为275px和40px的两条红色（#FD3C65）路径。
4.1.3基础形状变形
用剪刀工具（快捷键：C）给正圆两边的锚点各点一下，再用直接选择工具框选中不需要的上半边路径，按住Delete键删除，最底端需要用钢笔工具添加两个锚点后再剪断，操作方法是一样的，这样半弧状运动轨迹就做好了；
圆规左右脚包括尖脚是用形状生成器工具制作出来的，另一个尖脚需要复制出来哦；
4.2内部填充
4.2.1建立色块图层
复制线框图层，给图层命名为【颜色填充】，保留需要填充颜色的四个部分，再复制颜色填充层，命名为【白底】；
4.2.2填充颜色
打开颜色填充层，设置填充色，红色（#FD3C65），灰色（#E6E6E6）；
4.2.3制作内部填充错位效果
选中颜色填充层，原地复制粘贴一次（Ctrl+C，Ctrl+F）；
接着用我们熟悉的形状生成器对色块进行切割，操作方法还是一样的哦~
最后效果；
记得颜色填充层和对应白底要编组哦~
为了AE动效制作，我们要给线性图层里的圆规腿加上遮罩层，我们将【线固定】原地复制粘贴至下方（Ctrl+C，Ctrl+B），描边粗细不变，描边、填充颜色：红色。
4.3图层梳理
终于，我们来到了AI中最后一个图标的收尾工作，四个图标绘制下来相信你对释放图层很熟悉了，按照之前的方式将每个图层独立出来，马上就能导入AE中了。
2、导入AI文件
右键点击项目窗口，导入->文件；
选择绘制好的AI文件，导入为改成「合成-保持图层大小」，导入选项勾选「创建合成」。依次导入四个图标文件，导入之后项目窗口会自动为每个图标生成一个合成和一个文件夹。
3、合成设置
这里合成设置的尺寸是默认的512*512px，我们不需要更改，但是到记号笔的时候要把尺寸调整至1024*1024px，这是因为记号笔图标的动效比较特别，它的位置属性在水平、垂直方向都不是固定的，尺寸小了会出框，调整尺寸才能让图标在运动时完整的呈现。
4、创建可编辑形状
这里把四个图标文件都按照第3步和第4步操作一遍；
前期准备工作就告一段落啦。接下来是单个图标的动效制作。
1.1制作空对象动效
1.1.1有效利用【消隐开关】按钮
1.1.2新建空对象图层
右键->新建空对象；
拖动【空对象】中心点与【中心转轴】中心点重合；
接着选中【空对象】图层进行复制（快捷键Ctrl+D）；
将两个空对象分别重命名为【上方旋转】和【下方旋转】。
1.1.3使用轨道遮罩功能
在AI制作部分对遮罩层制作的原因做过说明，这里不再赘述。现在我们要解决如何在AE中实现图层的遮罩效果，这里我们直接在右刀刃的轨道遮罩里选中【Alpha反转遮罩】这一选项就好了。
1.1.4父子级关联
遮罩层跟随剪刀左边一起运动，从线性边框算起，到填充色块图层，属于剪刀左半部分的图层一共有五个，我们让五个图层都与之前建立的空对象【上方旋转】进行父子级关联就OK了，空对象作为【父级】，为它设置的参数将决定【子级】的运动效果。
让我们看看利用父子级链接与空对象关联的效果，
剪刀的另一边也是同样的制作方法哦~这里就省略讲解啦~
1.1.5空对象参数设置
根据剪刀的动态效果修改第2、4帧的旋转数值；
如果想要动效变化得有趣一些，我们可以打开图表编辑器，通过调节运动速度曲线，改变动效的节奏；
这样我们的两个空对象图层的动效就制作完成了~接着对边框添加动效吧！
1.2线性边框动效制作
展开图层，右键添加，选择修剪路径，然后把结束打上关键帧；
按住Shift+T，调出不透明度属性栏，打上关键帧；
这里我们让线条从无到有，所以先把结束的第一帧改为0，把想让线条完全出现的最后一帧改为100，在空对象的动效运动完成时，线条有一个消失的过程，这里需要把之前的关键帧复制到后面，调换顺序就可以啦~（注意：给一个图层插入完关键帧后，其他四个图层把设置好的关键帧全部选中复制粘贴到图层内容栏里就可以了）
接下来是颜色图层的动效制作~
1.3色块动效制作
如何为色块添加有趣的动效呢，这里我们要用到图层的两个属性，分别是缩放（快捷键：S）和不透明度（快捷键：T），调出缩放选项后，按住Shift+T，可以同时调出不透明度的选项。
让颜色图层从透明到显现，同时让色块放大到线框外再收缩回原大小，达到轻微弹射的效果，
具体参数如下，最后要选中这个图层的关键帧复制到所需要同步的其他颜色图层里。
最后按空格键预览；
2.1制作空对象动效
2.1.1新建空对象图层
右键->新建空对象；命名为【45度平移】；
拖动空对象层的中心点控件与蓝线起点重合；
调出空对象层的位置设置（快捷键：P）
2.1.2父子级关联
记号笔除了蓝线层，全部与空对象层做父子级关联，空对象就代表了笔；
2.1.3空对象参数设置
这里笔的位置是根据笔迹的位置决定的，所以我们要先设置【蓝线】的参数，展开蓝线层右键添加修剪路径，设置第一帧的结束值：18%，这个时候的路径长度与笔头宽度差不多，最后一帧的结束值是100%，中间的数值可以自己调试，根据自己喜欢的效果来调整就可以了;
空对象层位置设置参考如下图：
记号笔和笔迹同步来回运动的效果就制作出来啦~
2.2线性边框动效制作
黑色描边的动效和上个图标一样，关键帧、参数设置相同；
2.3色块动效制作
我在这里调用了色块的缩放和不透明度属性，参考如下：
但色块的出现方式，可以是多样的，你可以尝试多种变换，通过调整位置（P）、大小（S）、透明度（T）、角度（R）的数值来达到你想要的效果，思路就是同上面讲解的那样，每个人都可以创造点不一样的东西，发挥你的想象做出独特的图标动效吧~
最后按空格键预览。
3.1制作空对象动效
3.1.1新建空对象图层
重命名为【平移】；
拖动空对象层的中心点控件与推手中心点重合；
调出空对象层的位置属性栏（快捷键：P）；
3.1.2使用轨道遮罩功能
利用AI里绘制好的遮罩形状，让卡槽和刀片层对其进行反转遮罩；
遮罩效果制作完成效果；
3.1.3父子级关联
美工刀的运动方式和上面记号笔的类似，只不过它是垂直方向上的平移，要让空对象同时带动推手和刀片进行运动，需要将属于推手和刀片的全部图层与空对象关联父子级；
3.1.4空对象参数设置
拖动空对象层的位置（P）参数值，让其有一段短距离垂直方向上的运动，我一共设置了五个关键帧，制作出推手和刀片上下滑动的动效；
3.2线性边框动效制作
展开所有线框层，在添加处右键->修剪路径，关键帧和修剪路径的结束值和上两个图标一样哦~
3.3色块动效制作
参考下图；
最后按空格键预览一下；
4.1制作空对象动效
4.1.1新建空对象图层
拖动空对象层的中心点控件与轴心的中心点重合，Ctrl+D复制出新的空对象，为两个图层分别命名【左脚旋转】、【右脚旋转】；
调出空对象层的旋转属性栏（快捷键：R）；
4.1.2使用轨道遮罩功能
复制一个遮罩层，对左右腿分别设置反转遮罩，效果如下；
4.1.3父子级关联
左旋层带动左边运动，右旋层带动右边运动；
4.1.4空对象参数设置
圆规的两条腿在闭合-打开-闭合这样的规律中运动，两个脚要绕中心转轴旋转，达到开合的效果，空对象的旋转度数决定了开合的大小；
4.2线性边框动效制作
展开所有线框层，在添加处右键->修剪路径，关键帧和修剪路径的结束值和上面图标一样哦~
4.3色块动效制作
色块出现和消失的关键点在四个图标里的设置是一致的，但变换方式可以多样化，下图仅做参考；
按住空格键预览效果；
5、图标组合动效
将制作完成的图标合成，放入【文具图标】合成中，通过并对角度、大小的调整，达到和谐、统一的效果；
6、导出文件
选择合成菜单里的添加到渲染队列，不同的电脑系统需要在输出模块进行不同的格式选择，Win系统导出格式选择AVI，MAC系统选择QuickTime，最后点击渲染面板里的渲染按钮即可导出文件了；
如果要制作GIF格式，可以将文件导入到Photoshop里，再以GIF格式导出就好了，记得把循环方式从一次改成永远循环~