文字动效：从字体设计到AE动效落地

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

前言：相信大家见过写字效果的动效，就是文字按照书写的顺序一笔一划的写出来，这种效果其实很简单，今天分享从文字设计到动效落地的全过程，你会发现这种动效其实没有想象中的复杂，而且很简单哦，让我们一起学习吧。

文字设计完成效果图：

本教程用到的工具：PS,AI,AE
难度：★ ★★

一、在PS中做出基本字体图形

1.新建800*600的画布，然后画四个200*200的田字格，写汉字嘛，就要按照习惯来，也为了装B好看点。

2.动笔之前，分析一下，字体组成元素，主要是横、竖、撇、捺、点，我们根据自己的想法，把构成字体的基础元素用直线和圆切割出来。其中字体的有效区域是160*160px，我用的方法是路径加8px的描边。当然你们也可以根据自己的喜欢尝试一下其他的参数和方法。这里主要是阐述一下思路，具体步骤不再赘述，相信牛逼的你们肯定做的比我更好。

3.按照上述思路，完整做出“春夏秋冬”四个字。插句题外话，有朋友建议我做一套这种类型的字体，被我婉拒了，一来我本身不是字体设计师，对字体设计算是门外汉，不敢关公面前耍大刀；二来是这种比较个性的字体，只针对几个特殊的字比较好看，这些元素并不一定适合所有的字，如果真的做成好几千字的字体，可能效果会大打折扣；最后还有就是版权问题，严格来说我只是找参考做了一些变形，并不属于真正意义上的原创。权当是个艺术字，当做练习罢了。

4.按照惯例，加个装逼线，简单包装一下，装装逼，哈哈（此步骤可以省略）

二、导入AI

1.在AI中也是新建800*600的画布，把上边第一步中的田字格背景导入到AI，然后回到PS，用路径选择工具选中所有的字体路径，Ctrl+C复制，然后到AI中Ctrl+V粘贴，在弹出的粘贴选项中，选择复合路径（较快）。

2.适当调整位置，让每个字和背景中的田字格对齐。然后进行导入AE中的准备工作——为字体分层。

3.在AI中我们知道，形状路径等默认都是在一个图层上的，虽然我们在这个案列中，不分层也可以做出预期的动效（下面步骤我会解释为什么），但是为了保持良好的习惯，我们还是为每个字体单独分个层比较好。

4.新建四个图层（怎么新建图层不用说了吧，和PS一样，右下键垃圾桶左边那个就是新建图层），分别命名为春、夏、秋、冬，然后把相应的复合路径拖拽到相应的图层即可，最后把田字格背景放到最底部。如下图所示

5.这里再多说句，就是这个图层中复合路径的顺序，这里的顺序代表着字体的书写顺序，在这里可以根据你想要的书写顺序，把相应的复合路径顺序调好，这样再导入AE后就不用调了。如果这里不调也没关系，导入AE后也是可以调节的。

6.保存AI文件，打开AE。

三、导入AE制作简单动效

1.打开AE后，导入AI文件，在弹出的对话框选择合成-图层大小。

2.下面就是把AI矢量文件，转化成AE中的矢量形状了。这里先说一下动效的原理，主要是利用AE中的修剪路径，而修剪路径只能对AE的形状才有作用，对图片等其他格式是不起作用的。所以选中春夏秋冬这四个图层，右键，从矢量图册新建形状。

3.新建完形状图层，AI里的这四个图层使命就算结束了，可以删掉了。剩下的就是展开图层，在内容右侧，有个添加，然后选择修剪路径。

4.在内容下边，就会多出来修剪路径，展开后，先把“修剪多重形状”改成单独，再把结束改成0%，这样可以字就完全消失了。这时你在滑动开始或者结束，就会发现字按照笔画书写起来了。如果之前在AI里面没调整顺序，那，上边的那个组1到组7就是对应的之前AI的复合路径，调整这个顺序就能调整字的笔画书写顺序。

5.到这步就是添加关键帧了，假如每个字书写的时间是1秒（可以根据笔画多少适当调整每个字的动效时间，比如冬这个字笔画比较少，就可以让他的时间稍微少一些），那么在第0帧，开始为0，在1s的时候，开始为100%，这样一个字的动效就做出来了。

6.其他字一次按照上述方法，完成关键帧的制作就可以了。到这就可以回答上面的一个问题了，如果四个字不分层的话，按照这个方法也可以，甚至说要更简单，那为什么我们还要分层呢？当然是为了给自己留后路，也为了保持一个良好的习惯。不分层的话，整个动效是一起下来的，调整笔画的顺序容易出错，也不适合后期添加其他的一些效果。所以，虽然麻烦点，我们还是保持分层比较好。下面是我做出来的简单效果

7.AE的导出想必不必多说了，必须先导出视频，然后再从PS导出gif，不过AE也有导出gif的插件，大家感兴趣的也可以试一试。

作者 | dygongbiao
来源 | ui.cn