每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
手把手教你用AE和AI做纪念碑谷风格...
- 经验类型教程原作者：Gaël Schlupp
- 经验属性自译外文
- 经验版权署名-非商业性使用
43082
22
78
2015-11-10
书接上一回，这次我们就让小树小鱼们都动起来吧！
这次更新是紧接上一回的教程的，有感兴趣的同学可以先回头学学。这次翻译已经得到原作者的同意和授权，原作者非常nice，但很遗憾的是原作者由于现在的工作和自己在开发游戏，所以暂时这段时间都不会再有教程更新了。
由于我也喜欢这类型风格的插画，在今后肯定也会带来自己学习的一些经验和教程，请大家敬请期待。
http://v.youku.com/v_show/id_XMTM4MjE2NzgwNA==.html
在上次的教程，我们做了一个矢量等距视图的岛屿，今天我们将让岛屿中一些元素动起来。
我们将使用Adobe Illustrator中准备的文件和After Effects制作动画。
本教程的目的是要采取这个例子，来为我们以后制作动画增添一点生活色彩。
我已经准备了一些文件（附件下载），可帮助您按照教程制作。
下载完成后，我们就可以开始准备开始制作了。
1.动画制作前的准备（这一步可以略过，原文作者已经准备好需要的文件了，此步骤主要针对有跟上一教程制作的同学）
打开Ai，动画中会动的元素包含：
- 水和球的波纹
- 环游小岛的小鱼
- 那些随风摇曳的树与阳伞
理清这里的关系，这有助我们集中于动画的制作，并有一个明确的目标，还有我们要实现的效果。
步骤1
为了将ai文件导入至AE更好地进行编辑，我们一定要在Ai图层中进行一些调整。为了制作时更清楚，我们将需要动起来的元素分开来。
打开(Command-O)文件"Ressource_animation.ai"和"Island.ai".
步骤2
首先，在“Island.ai”中选择一条鱼，复制(Command-C) 和粘贴(Command-F) 到 文件"Ressource_animation.ai"中“Fish”图层。现在，更改透明度（窗口>透明度）至100％正常，并设置颜色（#652C90）。
这样做的原因步骤是，我们将所有的元素转换成可编辑的矢量图形，在AE里面清理这些文件要比Ai棘手很多。这个任务是乏味的，当然你可以使用文件“Final_Ressource_Animation.ai”直接开始。
2.让小岛的波纹动起来。
步骤1
打开After Effects和文件“Animation_island.aep”，并导入文件“Final_Ressource_Animation.ai”文件。选择“合成－保持图层大小”并且将此拖入"resources"文件夹里。
创建一个新的合成 (Command-N)，设置如图。
步骤2
双击该合成，并且将"Ressources" 文件中的"Ripple"图层加入其中。然后，将该层转换为矢量图形（图层>从矢量图层创建形状）。添加修改偏移（添加>位移路径），并设置偏移量为1个像素。改变图层Ripple混合模式为叠加，不透明度（T）为40％。
步骤3
要添加关键帧，请单击秒表图标，然后1秒后增加一个关键帧，其值为8像素。
完成动画的循环。创建一个新的合成“Loop_ripple”，并将其拖放至合成“Ripple”中。
现在，点击合成“Ripple”激活时间重映射（Command-Option-T）。'此处原文应该有误快捷键写为了Command-Option-R'
在秒表图标按住Alt键单击添加Loopout表达式，如下图所示
loopOut("pingpong");
乒乓球方法会做1和8之间的来回和两个关键帧之间来回循环。
您可能会注意到动画消失在1秒。
为了解决这个问题，扩展合成“Ripple”的持续时间（单击并拖动）。
那么最后一个关键帧前添加一个关键帧，并删除最后一个关键帧。
3.动起来吧！环游小岛的小鱼们！
步骤1
创建一个新的合成，设置如下图所示。
步骤2
双击该合成，并添加在资源文件夹中的图层“Fish”进来。
然后，将矢量图层转换为形状并且用锚点工具（Y）改变小鱼的锚点。
用钢笔工具（G）去创造小鱼游动的路径。
确保路径包含最少三个顶点。
步骤3
在组1添加关键帧（位置和旋转），而不是图层"Fish"。
选择您之前创建的路径，展开并选择路径，复制并粘贴到组1的位置。
现在的鱼跟着你画的路径，因此延长关键帧六秒。
复制(Command-D)组1。
选择之前画的路径，并双击选择另一个顶点。
左键单击更改它的顶点（蒙版和形状路径>设置第一个顶点）。
选择路径，展开并选择属性路径，复制并粘贴到组2的位置变换。
重复之前的操作创建第三条小鱼。
步骤4
现在，每两秒钟调整旋转，以配合它们走的那条路。
点击图形编辑器中，选择所有关键帧。
拖动黄色手柄更改插值贝塞尔曲线来匹配每个关键帧之间的曲线。
添加关键帧，如果你觉得转换还不够自然。
你可以重复这一步以到达你想要的效果，由于时间的关系我做了做了三条路径。
如果你满意的你创造欢乐的效鱼群，那我们就去把小树们动起来吧！
4.制作随风摇曳的小树和阳伞
步骤1
创建一个新的合成，设置如下图所示。
步骤2
添加图层"Tree"，然后矢量图层转换成形状。
添加两个组，一组为树干（形状和高光），一个用于树叶（形状和高光）。
在树干组内拖动树叶组。
然后复制图层，删除其他东西剩下树干，并在Trunk_texture上创建一个透明通道。
最后，改变这两个组和图层的锚点（Y），并调整光线（包括树和叶）的混合模式为叠加，60％。
步骤3
添加关键帧（倾斜），并添加另一个关键帧，树干组（1秒的值 -8）的倾斜和树叶组（1秒的值 12）。
树干组的值分别复制粘贴到Mask_texture和Trunk_texture的关键帧属（倾斜）。
步骤4
完成动画的循环。
创建一个新的合成“Loop_tree”，并将其拖放至合成“Tree”中。
现在，也是在合成“Tree”激活时间重映射。
在秒表图标按住Alt键单击添加Loopout表达式，如下所示。
loopOut("pingpong");
现在，使用图形编辑器以自己的喜好调整动效。
继续丰满场景，复制和粘贴树木。
你可以用"background_top.png"
和 "background_bot.png"
作为位置的参考。
阳伞的制作也是同样的步骤。
完成后，可以继续调整一下动画。
5.导出和调整GIF动画
步骤1
创建一个新的合成，设置如下图所示。
步骤2
将每个动画和“background_top.png”、
"background_bot.png"完成最后的场景。
然后添加沙滩巾到场景里。
然后，添加排球进入现场，将它们转换成形状，阴影部分混合模式为正片叠底 40%，高光部分为叠加，60％。
添加蒙版，使用钢笔工具，修改蒙版的类型并且画出排球在水下的阴影。
这样复制每个球（Command-D键），反转这些球的蒙版，拖放第一批至合成“Loop_ripple”下。
步骤3
添加纯色(Command-Y)，然后添加渐变效果(效果>生成)。
改变渐变到起始色（＃D3E169）和终结色（＃091098）和混合模式设置为叠加,80％不透明度（T）。
步骤4
添加到渲染队列(Command-M／Ctrl-Command-M) 。FLV（输出模块> FLV），或者直接预览。
借此机会看看动画，并调整。
如果你满意动画效果，添加到另一个渲染文件(Command-M／Ctrl-Command-M) 并且导出为PNG序列。
步骤5
打开PS,并且打开你的PNG序列。
使用调整面板（窗口>调整）进行调整，例如是修改一下亮度和对比度，主要根据个人所需。
步骤6
然后，导出GIF (Command-Alt-Shift-E) 以保存你的GIF动画。
循环选项选择永远并且调整GIF的质量。
如果你想分享你的作品这一步是非常重要的。
在Dribbble平台上分享GIF格式必须是8MB以下的，UI中国是5MB以下。
上面是我的输出设置，仅供参考。
恭喜了！哈哈！
在本教程中，您可以通过让几个元素动起来和调整场景的色调就营造了一个很有活泼的场景。
请自由发表意见，并告诉我你的结果，非常很乐意看到你的作品。
全部评论：22条
-
-
-
一只肉卷子
2016-02-22 15:08也是醉了，自己英语烂，别人用英文版的还被说装逼，典型的刁民屌丝心理，不知道感激就算了，还BBB，有本事你自己出个中文教程，别看别人英文的啊，不知道好多优质资源都是英语的么，国内的大多数教程都是翻译来的，像AE，C4D，Animate，看教程我就喜欢看英文的，而且之前AE官方没中文，汉化后的偶尔出错好么，一些人的素质真是醉了
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
更多作品
发表评论