欢迎光临公彪的博客
我们一直在努力

简单几步学会字体设计&简单动效

最近在逛花瓣的时候,看到了以春夏秋冬为主题的插画和字体设计,感觉插画中的字体不错,就以其为参考,自己动手把其中的春夏秋冬四个字做了一些变形,然后做了一个简单的动效,发在了dribble。今日有小伙伴反馈说想学一下其中的方法,我就抽出时间,简单的做个说明吧。
先放个最后的成品,大家看一下,不喜欢的可以关掉了。
dribble动效请移步:https://dribbble.com/shots/4890310-Chinese-characters-design
花瓣参考,有知道原作者的麻烦通知一声,如有侵权,请私聊我删除
首先,说明一下我是用PS做的,其实用AI做,然后再导入AE是比较友好的,但是我一开始没想到要添加动效,加上我个人用惯了PS,就用PS做了。为了还原我的创作历程,也为了下面讲解PS路径怎么导入AI,我这还是用PS做。
一、在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的插件,大家感兴趣的也可以试一试。
写在最后
第一次这么正式的写教程,由于个人能力和时间原因,错误在所难免,希望高抬贵手,不喜勿喷。如果大家喜欢,也可以给我留言点赞,你的赞赏是我最大的动力。共勉!

打赏
转载请注明出处 » 简单几步学会字体设计&简单动效
分享到: 更多 (0)