百木园
原图作者：Fraser Davidson
教程作者：我是大灵啊（软件营34期学员）
交作业：#优设每日作业#
关于教程
此次教程临摹了Fraser Davidson的一张作品。原图不论是颜色的搭配，还是时间上的变化都处理地非常细致。这张动效图看似非常简单，总体上是由一个翻页动效+多个爆炸效果组成，但其中的某些部分实际上是需要一帧一帧去处理的，希望大家在作图过程中保持足够的耐心，并且多去思考。
第一次制作教程，如有不足之处欢迎大家提出建议，谢谢！下面就请跟着教程一起来完成吧～
AI部分
步骤 01 — 新建背景
① 打开AI，新建一个800*600px的画布，颜色模式改为RGB
② 选择矩形工具，画一个800*600px的矩形，去掉描边，更改填充颜色为#52CAFC，命名为“背景”
③ 选中“背景”，打开菜单栏-窗口-对齐，在对齐面板的右下角中，将对齐方式改为“对齐画板”，然后选择“水平居中对齐”和“垂直居中对齐”，将它放在画板正中心。
步骤 02 — 绘制爆炸的底板
① 绘制一个400*400的正圆，去掉描边，填充颜色为#0E1C97，并将它放在画板正中心，命名为“爆炸底板”
② 绘制多个小圆，按照图示调整小圆的大小（宽=高），并将它们放在合适的位置
（Tips：为了方便查看和做好后面的操作，这里将所有小圆都填充了白色#FFFFFF，并将它们的透明度调为50%）
③ 选中“爆炸底板”以及所有的小圆，打开“路径查找器”面板，选择“减去顶层”
（Tips：如果备用工具栏中没有找到路径查找器，可以从菜单栏-窗口中调出）
效果图如下：
④ 用直接选择工具（A）选中“爆炸底板”，放大画布，会发现在圆弧之间有一个或两个锚点，我们只需要保留一个锚点即可，用“删除锚点工具”删去多余的锚点
（Tips：如果圆弧之间只有一个锚点，就不需要删去）
⑤ 检查，调整其他剩下的锚点，使它们处于圆弧的中间
（Tips：“爆炸底板”在AE中，会有一个尖角拉长，并变成圆角的动效；如果不将圆弧之间的锚点放在靠近中间的位置，那么效果就会如下图所示，显得特别生硬；虽然在AE中也可以调整，但在AI中调整要方便很多）
步骤 03 — 绘制字体
① 使用文字工具，在画布中输入“N”，并在字符面板中，将字体调整为“Arial”，字体样式改为“Bold”，字体颜色改为#FF859F
② 选中“N”右击，选择“创建轮廓”，并在属性面板中调整宽为82px，高为116px
③ 用直接选择工具（A）选择红色圆圈圈出来的锚点，并按照给出的方向和数据来修改锚点所在位置
（Tips：可直接通过方向键来移动锚点所在位置；例如向右平移12px，选中要移动的锚点之后，直接按住Shift+→，即向右平移10px；再按两次→，即向右平移2px）
④ 选中“N”右击，选择“变换”-“旋转”，在弹窗中输入-10，即可将其旋转-10°
⑤ 使用文字工具，在画布中输入“Y”，重复第1步操作；创建轮廓后，调整宽为123px，高为160px；然后按照下图来移动锚点位置
⑥ 使用文字工具，在画布中输入“E”，重复第1步操作；创建轮廓后，调整宽为64px，高为129px；然后按照下图来移动锚点位置，并旋转18°
⑦ 将三个字母分别放在下图中位置
（Tips：N、Y、E三个字母都有各自的动效，因此需要将它们放在不同的图层中）
⑧ 给三个字母的表面都添加上圆形装饰物，如下图所示，注意小圆的大小有所不同会更加自然可爱；并填充黄色#FACE55和白色#F9FFFB
（Tips：三个字母上的小圆在不同的图层中，图层顺序及命名见下图；宽=高大约在9到13px之间）
步骤 04 — 绘制彩球
① 新建图层，命名为“彩球”。使用椭圆工具，在这个图层里绘制一个146*146px的正圆，随意填充一个颜色，只要不影响接下来使用钢笔工具即可，然后将椭圆锁定
（Tips：这里为了方便查看，我填充了#D7D8DB）
② 使用钢笔工具，按照下图中的方法在圆内绘制三角形
③ 几个注意点：
（1）所有的三角形只有填充色，不需要加描边
（2）所有相邻的三角形，相接的两个锚点之间一定要完全重合！！！
（3）所有的三角形都要放在一个图层内，因为彩球在AE里面是作为一个整体进行缩放的，它只能有一个中心点！！！
④ 效果图
步骤 05 — 绘制彩球的串串
① 新建图层，命名为“串串”，将图层移到“彩球”下方
② 使用椭圆工具，绘制一个宽为5px，高为263px的椭圆，填充颜色#FF859F
③ 先选中“彩球”所在图层，按Ctrl+G进行编组；同时选中“串串”与“彩球”，并再次点击一次“彩球”，将它们进行水平居中对齐；然后再将“彩球”解组（Ctrl+Shift+G）
步骤 06 — 给整个画面添加圆形装饰物
① 使用椭圆工具，给整个画面添加一些大小不一的圆形，分别填充浅蓝色#52CAFC、黄色#FACE55、白色#F9FFFB
（Tips1：一定要将每个小圆都单独放一个图层，因为在AE中它们都有自己的动效）
（Tips2：小圆的大小不必非要按照图中标记的来设定，只要有大有小就可以～）
步骤 07 — 绘制爆炸中心和爆炸遮罩
① 新建图层，命名为“爆炸中心”
② 使用钢笔工具直接绘制出下图中的形状，并填充#F9FFFB
（Tips：宽约128px，高约129px）
③ 复制一个“爆炸中心”到新图层中，并改名为“爆炸遮罩”，随意填充一个颜色，只要能与“爆炸中心”区分开即可；
④ 然后使用“直接选择工具”适当修改锚点位置或者修改手柄，使“爆炸遮罩”与“爆炸中心”的形状有区分即可
步骤 08 — 检查并保存
① 检查所有的图层顺序是否有误
② 检查效果图-有爆炸中心和爆炸遮罩
③ 检查效果图-无爆炸中心和爆炸遮罩
（Tips：“爆炸底板”边缘处的几个“缺口”，实际上是步骤6中给画面增加的圆形装饰物，因为蓝色圆与背景颜色相同，所以看起来像“缺口”）
④ 保存为.ai格式，并命名
AE部分
步骤 01 — 导入文件
① 打开AE，新建项目；新建合成，设置合成名称为“总合成”，然后按照下图框选出来的地方设置好合成；在AE界面左侧的“项目区”就可以看到新建的“总合成”
（Tips：背景颜色可以随意设置，只要便于区分即可，因为在AI中我们已经新建了“背景”图层）
② 在项目区-“总合成”下方的空白区域右击，选择“新建合成”，然后按照上图中同样的方法，新建两个合成，分别命名为“翻页效果”和“爆炸效果”；同时选中“翻页效果”和“爆炸效果”，直接拖到AE界面下方的图层区域
③ 在时间轴区域内，将时间指示器拖到1s40f处，按下键盘上的“N”截断工作区时间
（Tips：截断时间时，AE会默认多出1f，可以直接用鼠标把工作区结束时间点往前移1f；下面都是如此，不再重复了～）
④ 选中“翻页效果”，将时间指示器拖到25f处，按下Alt+] 截断右边时间条；选中“爆炸效果”，将时间指示器拖到21f处，按下 Alt+[ 截断左边时间条
⑤ 在项目区空白处右击，选择“导入-文件”，选择之前保存好的.ai文件，并在弹窗下方的“导入为”中，选择“合成-保持图层大小”
⑥ 双击打开新生成的“00-插画”合成（以下都简称为“插画合成”），会在图层区域出现许多图层，选中所有的图层右击，选择“创建”-“从矢量图层创建形状”，然后删去没有带“轮廓”字样的图层（教程下文中提到的所有图层名称都不写明“轮廓”二字）
⑦ 选中插画合成中的“背景”图层，复制到“总合成”中，并拖动“背景”图层，移至最后，如下图所示
步骤 02 — 为爆炸底板添加动效
① 双击打开“总合成”中的“爆炸效果”，将插画合成中的“爆炸底板”图层复制粘贴到“爆炸效果”中；并在1s40f处按下“N”键阶段工作区时间条
② 将时间指示器移到39f，选中“爆炸底板”，按Alt+[截断左边时间条
③ 选中“爆炸底板”，按键盘上的“S”调出缩放属性，点击前面的秒表给缩放打上关键帧；按“R”调出旋转属性，给旋转打上关键帧；再打开“内容-组1-路径1”，给路径打上关键帧。然后按“U”键调出所有打上关键帧的属性，如下图所示
④ 按照下图中给出的数据来调整相应时间点的参数（先不调整路径属性）
（Tips 1：直接拖动时间指示器，修改相应数据即可，关键帧会自动打上去）
（Tips 2：在新建合成时，我们设置了帧速率为60f/s，因此1s 06f 即对应66f）
⑤ 用鼠标框选所有的关键帧，右击其中任意一个关键帧，选择“关键帧辅助-缓动”（快捷键F9），给这些关键帧添加缓动，使其运动更自然
（Tips：一定要在框选中的某个关键帧上面右击，否则是没有“关键帧辅助”这一选项的）
⑥ 选中“旋转”属性，点击图层右上角的图表编辑器（下图中红框内的标志），可以调出旋转属性变化的速度曲线
⑦ 将时间指示器移至43f，在图层区域里选中“路径”属性，会发现“爆炸底板”这个形状周围出现了实心的正方形（如下图所示），我们在工具栏里选择“选取工具”（快捷键V），在形状周围的空白区域点击一下，会出现形状的中心点，以及周围变成了实心的圆形（见下图）
（Tips：在空白区域点击，注意不要在画布之外点击，否则无效）
⑧ 点击尖角的锚点，会出现该锚点的手柄，将尖角向外拉动适当距离，如下图所示
（Tips：注意拉动方向尽量沿着尖角所指的方向，不要太偏，否则拉动之后的形状会变得丑丑的）
（Tips：调整过程中，要不断地与原图进行对比，观察整体造型、观察尖角之间的凹陷够不够深……多观察多思考）
⑨ 将时间指示器移到1s处，同样选中“路径”属性，修改尖角的锚点，使其变为圆角
⑩ 选中“路径属性”，调出速度曲线，可以进行适当调整
⑪ AE动效中最难操作的“爆炸底板”动效已经完成啦～只要理解了它的变化过程，就会发现其实非常简单。
最难的地方就在于调整锚点的过程中一定要有足够的耐心和细心，多观看思考。
接下来我们来进行排名第二难的动效吧～
步骤 03 — 为爆炸中心添加动效
① 选中插画合成中的“爆炸中心”和“爆炸遮罩”图层，复制到“爆炸效果”合成中，选中这两个图层在33f时按Alt+]截断右侧时间条
② 将时间指示器移到21f，调出“爆炸中心”的“缩放”属性，打上关键帧；将时间指示器移到22f，调出“爆炸蒙版”的“缩放”属性，打上关键帧；具体数据如下图所示
③ 选中“爆炸中心”图层，在后面TrkMat的下拉菜单中，选择“Alpha反转遮罩”
（Tips：如果对遮罩不是很理解，建议观看AE知识树系列-第3课-图层操作）
④ 在工具栏中长按矩形工具，选择“椭圆工具”，设置填充颜色为#F9FFFB，在画布中随意画一个椭圆，将图层移到“爆炸遮罩”图层的上面，并命名为“烟花”，点击“内容”后面的“添加”，选择“中继器”
（Tips：注意千万不要在选中椭圆1的情况下添加中继器，否则中继器会加在“椭圆1”下，而不是加在“烟花”图层下）
⑤ 打开“中继器1”前面的下拉菜单，将副本改为“7”；然后将“烟花”这个图层里面除了“变换-位置”之外的其他所有“位置”全部改为“0”（具体要更改的地方可见下图）；
⑥ 选中烟花图层，观察图层的中心点是否在椭圆的中心，如果不是要记得调整中心点位置，在工具栏中选择“向后平移锚点”工具（快捷键Y），按住Ctrl拖动该点到椭圆的中心，如下图所示
⑦ 在“变换：中继器1”下，将“旋转”改为4°，并将“比例”中数据前面的小锁解除，将Y轴改为“95%”
⑧ 将“烟花”图层的右侧时间条在33f处截断；然后将时间指示器拖到21f处，调出“椭圆路径1”中的“大小”属性，打上关键帧；调出“变换：椭圆1”中的“位置”属性，打上关键帧；按U键调出所有打上关键帧的属性（具体数据见下图）
⑨ 框选所有添加的关键帧，添加缓动（F9），调整速度曲线如下图所示
⑩ 选中“烟花+爆炸遮罩+爆炸中心”三个图层，按Ctrl+D复制一次以便后面使用，并将它们重命名以便查看（如图所示）；然后选中之前那三个图层，按Ctrl+Shift+C新建预合成，设置合成名称为“白色爆炸”
⑪ 双击打开“白色爆炸”，在图层区域的空白处右击，选择“新建-调整图层”，并将其命名为“黏性效果”；在“效果和预设”窗口中，找到“遮罩-遮罩阻塞工具”，直接拖到“黏性效果”图层上
⑫ 将“烟花2+爆炸遮罩2+爆炸中心2”这三个图层的起始时间点移至34f，并将右侧时间条在50f处截断；将“烟花2”和“爆炸中心2”的填充颜色改为#0E1C97；并按照下图中的数据来修改参数
（Tips：修改关键帧数据时，建议将原来的数据全部删去，再按照图中的数据来设置；下面的操作都是这样哦，就不再赘述了～）
⑬ 为关键帧添加缓动，并调整速度曲线
⑭ 根据下面的图片，调整烟花2中“中继器1”的参数
⑮ 添加缓动，并调整速度曲线
⑯ 选中“烟花2+爆炸遮罩2+爆炸中心2”三个图层，按Ctrl+D复制一次以便后面使用，并重命名（如图所示）；然后选中之前那三个图层，按Ctrl+Shift+C新建预合成，设置合成名称为“蓝色爆炸”。双击打开“蓝色爆炸”，重复第11步
⑰ 按照下图修改参数（颜色为#FF859F）——设置“N爆炸”
⑱ 按照下图修改参数——设置“Y爆炸”
⑲ 按照下图修改参数——设置“E”爆炸
⑳ 按照下图修改参数——设置“蓝星爆炸”
㉑ 按照下图修改参数——设置“黄星爆炸-右”
㉒ 按照下图修改参数——设置“黄星爆炸-左”
㉓ 按照下图修改参数——设置“白星爆炸”
步骤 04 — 为NYE添加动效
① 选中插画合成中的“N”、“Y”、“E”以及它们的圆形装饰物，复制到“爆炸效果”合成中，调整图层顺序并按照下图中的数据截断它们的时间条
② 按照下图中的数据调整关键帧
步骤 05 — 为彩球添加动效
① 选中插画合成中的“串串”和“彩球”，复制到“爆炸效果”合成中，调整图层顺序并按照下图中的数据截断它们的时间条；选中“串串”图层，将图层的中心点，移到串串最底端；调出串串的“缩放”属性，按照下图数据打上关键帧，并添加缓动
② 将时间指示器移到45f，选中“彩球”图层，按P键调出位置属性，打上关键帧；按S调出缩放属性，打上关键帧；调出“彩球”图层内所有组的颜色属性，打上关键帧，按U调出所有打上关键帧的属性，按照下图中的数据调整关键帧
步骤 06 — 制作爆炸星星，并添加动效
① 长按形状工具，选择“椭圆工具”，在画布中画一个28*28px的圆，填充颜色#52CAFC；在没有选中任何图层的情况下使用“多边形工具”，按住Shift画一个五边形（默认画出的就是五边形），命名为“尖角1”，填充颜色#52CAFC，按照下图中数据调整五边形
② 将“尖角1”复制6次，按R调出它们的旋转属性，并修改
③ 在1s05f时按Alt+[，截断左侧时间条；并给所有尖角添加父子级；调出“圆”的缩放属性，打上关键帧
④ 新建预合成，命名为“蓝色星星”，并添加黏性效果
⑤ 根据下图步骤，制作“白色星星”
⑥ 根据下图步骤，制作“黄色星-右”
⑦ 根据下图步骤，制作“黄色星-左”
⑧ 注意图层顺序
步骤 07 — 为所有的圆形装饰物添加动效
① 将插画合成中的所有“蓝圆”“黄圆”“白圆”复制到“爆炸效果”合成中，并截断时间条
② 调出所有圆的“位置”和“缩放”属性，按照下图中的数据打上关键帧
步骤 08 — 制作翻页效果
① 在爆炸效果合成中，将时间指示器移到1s40f处，点击菜单栏中-合成，选择“帧另存为”，按照下图导出png
② 在项目区中右击，导入刚才渲染的png图片；双击打开“总合成”中的“翻页效果”，直接拖入图层区域；为png图片添加翻页效果
③ 为翻页效果添加背面
④ 效果图如下（实际上不可见）：
⑤ 设置CCPage Turn的参数
⑥ 给翻页效果添加遮罩
⑦ 最后一步，给翻页效果添加阴影。这里就需要一帧一帧地去调整，希望大家保持耐心，坚持就是胜利～
最终效果图
结语
教程到这里就结束了，真的非常感谢大家看到了最后，第一次写教程，有很多地方写得不好，请大家多多包涵。
相关推荐
→ AI+AE教程！教你制作弹跳的仙人掌可爱动效
→ AI+AE教程！教你制作生态危机主题的Loading动效
一个人做练习的时候，做得好没人发现，做得差没人点评，总感觉很难坚持下去呢···
从今天开始参与「优优教程网 365 天打卡计划」，每天一个小练习， 4 位U站管理员与大家一起打卡练习，点赞点评，互帮互助。优秀练习还有机会被优优转发 【参与方式】每天在 #优设每日作业# 内，上传打卡练习，话题微博格式【 DAY 01~365 】转发视为参加。（动图为打卡演示） 【收获】更好的自己
来源：https://uiiiuiii.com/aftereffects/1212126179.html
图文来源于网络，如有侵权请联系删除。