请收下这份炫酷动效指南 | Insight

作者: mosaka | 来源:发表于2016-11-06 17:41 被阅读158次

今天要写的这个教程需要借助外力来实现,步骤非常简单,但实现出来的效果也很不错。下图是我用MobiloAnimated做出来的我的英文名的效果。

你需要准备的东西:

1.After Effects CS3及以上版本

2.翻了墙的电脑(看站内视频需要翻墙,若不需要看视频则联上网即可)

●打开网站

https://animography.net/products/mobilo

你会看到一个配色非常舒服的网站。这个网站提供了一些下载包。有一些是免费的。我开头做的动效就是用了官网首页的一个免费的下载包。这个工具的使用方法是下载好你需要的下载包后,挑选自己喜欢的字体动效,调整大小以后可以运用到自己的项目中。

我下载的是MobiloAnimated下载包。

●从AE里面打开压缩包里后缀为.aep的工程文件

在项目面板组里你可以看到这个文件的目录。里面有26的英文字母的大小写、十个阿拉伯数字、一些常见标点符号和特殊标点符号的动效。且每个英文字母和数字都会有三个动效样式。

●新建一个合成(Ctrl+N),大小随意。从项目面板组里拖动你所需要的字母或数字至合成面板。这里的原理有点像活字印刷,字母间隔和大小都可以根据你自己的喜好来调整(在左下方面板组中,位置控件可以改变字母间隔,缩放控件可以改变字母大小)。

●渲染你所建立的合成(Ctrl+M),输出模块选择Quicktime,输出到你想保存的位置,点「渲染」后,从PS里打开后缀为.mov的文件。点文件-存储为Web所用格式,选择保存为GIF后点击下方存储即可生成一个流畅的GIF文件。

●如果还是觉得有些不太懂的话,可以去官网找教程。讲者语速有些快不过认真听可以跟得上。

还可以有数字格式。

不想让这些字母、数字同时出现的话可以在AE工程文件里微调时间轴。

赶紧学起来和心爱的人告白吧~

- END -

作者:mosaka


相关文章

  • 请收下这份炫酷动效指南 | Insight

    今天要写的这个教程需要借助外力来实现,步骤非常简单,但实现出来的效果也很不错。下图是我用MobiloAnimate...

  • Android常用UI系列(上)

    UI模块 淘宝天猫使用的UI框架 viewpager炫酷画廊效果 炫酷定制输入框 折纸view过渡动画 炫酷动效控...

  • React Native的动画(一)

    前言 React Native作为大前端开发的一种技术,自然离不开各种炫酷的动效。在React Native中动效...

  • Qt开发打字动效软件

    Qt开发打字动效软件 看到vs有炫酷的打字动效插件,心痒难耐,自己也想用上,可自己用的是QtCreator,无奈之...

  • iOS 动画库

    iOS开发之 Lottie -- 炫酷的动效 Lottie 是 Airbnb 在 github 上的开源项目,支持...

  • 动态ui设计为什么越来越受欢迎?

    如今的APP设计当中,其中的UI动效也越来越酷炫,为什么UI动效越来越受到青睐呢? 下面就和大家聊聊APP UI动...

  • 【译】脑洞大开,移动界面的空间思维

    这几年动效设计大热,很多优秀的APP都运用动效设计提升产品的体验,为用户带来炫酷的惊喜,成为业界经典。我们已经...

  • H5 - 简约电子请柬

    h5电子请柬,懒,没做什么炫酷的动效处理,有时间的可以尝试做的炫酷一些。主要用jquery和swiper插件实现,...

  • UI为什么走红?大概是这4个原因。

    UI动效好像越来越火,备受大家的青睐。如今的APP设计当中,其中的UI动效也越来越酷炫,受到大家的追捧,所以APP...

  • go2019

    Go开发者路线图2019,请收下这份指南 原创: Rachel AI科技大本营 今天 整理 | Rachel 责编...

网友评论

    本文标题:请收下这份炫酷动效指南 | Insight

    本文链接:https://www.haomeiwen.com/subject/yqlnuttx.html