一、确定所需要做的动效

1、制作logo背景形状动效 2、制作U的动效 3、制作I的动效 4、制作消失动效

二、制作logo背景形状动效1、”合成 - 新建合成“ 新建一个1000*800的合成

2、“图层 - 新建 - 纯色”创建一个#00A8FF的图层

3、在AI中绘制一个六边形,具体怎么绘制就自己百度吧

4、复制AI中的这个形状,粘贴到AE中,一个六边形就出来啦

5、选中纯色图层,选择“S”,在初始点打上关键帧并且调整为0,然后选择“R”,在初始点打上关键帧,然后选择“U”即可显示所有的活动帧

6、在“15F”处将缩放调整到100,旋转调整到1X

7、可以打开"Form"调整“缩放”的动画曲线具体教程可以看“AE教程:汽车开动&弹性动画【重要】”:

http://www.ui.cn/detail/361480.html

8、打开运动模糊可以减少生硬感

三、制作U的动效由于要用钢笔进行描边,所以可以将UI中国logo放进AE合成中用钢笔工具“G”进行描边

打开添加后的“修剪路径”

打开修剪路径,在“15F”处打上“结束”的关键帧,并且调整为0,然后在01:10f处调整为100,打开“Form”选择缓动曲线替换上去

接下来需要创建圆球掉落的效果,新建一个圆形,“图层 - 新建 - 新建形状图层”,然后在添加中选择“椭圆”、“填充”

将其圆点缩放到适合大小并且放到U上方

将其红点改为白点,打开位置“P”属性,在15F处打上关键帧,然后在01:00F处移到U的上方

打开"Form"选中缓动曲线替换上去

可以选择“效果 - 时间 - 残影”并且调整参数,残影时间“-0.001”数量“50”

接下来调整U的时间轴,将其后移。

四、制作I的动效首先制作I的动效 可以按照上面做U的步骤继续用钢笔沿着I进行描边,并且做出动效,可以在I加上一个缓动,由快到慢

接着可以绘制圆点的位置,从U的右侧飞上后掉到I的上部

可以复制之前掉落的那个小圆球,删掉之前的动画后移到右侧U的右侧顶部

现在来想办法如何让圆球按照之前的轨迹进行移动

首先“图层 - 新建 - 纯色”新建一个纯色图层,然后用钢笔进行绘制一个半圆形

选中纯色的蒙版下方的蒙版路径,Ctrl+C进行复制

选择点下方的位置属性粘贴其路径

可以看到有几个问题

1、圆点应该需要先消失等U形走完再出现2、圆点的移动太过于缓慢3、圆点的右侧会有明显的拐角

首先解决第一个问题 在U形走完的时候,选择这个圆点,按下“T”调整不透明度为0,1帧后调整为100%

接下来解决第二个时间缓慢的问题 可以看到圆点的起始点和终点,将终点往左挪动,整体的时间点即可减少

继续解决第三个圆点拐角的问题 选择画板的第四个点或者时间轴的第四个点进行删除,拐角即可消失

进行最终的调整 将I的时间轴往后进行调整,让右侧圆点掉落的时候I才会运动

为了让整体的运动有个循环,需要让整体旋转并缩放到0

可以将所有图层选中,右键预合成处理

选中预合成后选中“T”在I运动结束后面1秒打上关键帧,并且在15f处调整透明度到0

这个教程也是我现学现卖,希望大家能一起进步

编辑:千锋UI设计

作者:UILEO

来源:UI中国主页

AE教程:学会这个,你做的Logo就可以单独出道了的更多相关文章

  1. Wix 安装部署教程(九) --用WPF做安装界面

    经常安装PC端的应用,特别是重装系统之后,大致分为两类.一类像QQ,搜狗输入法这样的.分三步走的:第一个页面可以自定义安装路径和软件许可.第二个页面显示安装进度条,第三个页面推荐其他应用.先不管人家怎 ...

  2. PyTorch快速入门教程七(RNN做自然语言处理)

    以下内容均来自: https://ptorch.com/news/11.html word embedding也叫做word2vec简单来说就是语料中每一个单词对应的其相应的词向量,目前训练词向量的方 ...

  3. 一个圆的移动 AE教程 速度曲线调节

    AE里面速度的曲线调节 最终的小效果 两个关键点: 一:速度曲线调节 编辑速度图标,他的曲线是编辑速度的. 二:节点不要用贝塞尔曲线 编辑值图标,就是圆圈的x值y值的曲线.控制位置移动的. 选择一个节 ...

  4. Typora使用教程 之 PicGo集成做图床

    目录 一.Typora是什么 二.研究它的原因 三.需要解决的问题 四.解决图床问题 1.下载PicGo 2.安装下载的PicGo,并根据下图所示配置(必须安装nodejs,否则插件一直是" ...

  5. 一步HTML5教程学会体系

    HTML5是HTML最新的版本,万维网联盟. HTML5是下一代的HTML标准,HTML5是为了在移动设备上支持多媒体. 新特性: 绘画的canvas元素,用于媒介回放的video和audio元素,对 ...

  6. 学会C#可以做什么

    C#基于.NET Framework  和 .NET CORE平台 Client/Server 客户端/服务端 windows桌面应用程序 winform  2D WPF  3D Browser/Se ...

  7. ASP.NET Core教程:使用Supervisor做ASP.NET Core应用程序守护进程

    一.前言 在上一篇文章中,我们讲解了如何在Linux服务器上面部署ASP.NET Core应用程序,并且使用Nginx作为反向代理.我们在Linux服务器上面,是通过ASP.NET Core自宿主的方 ...

  8. DEDECMS5.5怎样调用{dede:field.content/}做简介之类的单独页面?

    很多时候,如果用dede来做一些企业公司网站,或者一些部门网站的时候.需要某些栏目是一个单页的文章,用于公司简介或者企业文化之类的.那么就要用到栏目功能的栏目内容,也就是dede的content标签. ...

  9. XX-NET史上最详细完整教程

     转 https://www.cnblogs.com/phperkang/p/8780123.html 前言 XX-NET,系GAE类代理,即通过可用Google ip连接Google App Eng ...

随机推荐

  1. python内置函数详细介绍

    知识内容: 1.python内置函数简介 2.python内置函数详细介绍 一.python内置函数简介 python中有很多内置函数,实现了一些基本功能,内置函数的官方介绍文档:    https: ...

  2. Java内存原型分析:基本知识

    转载: Java内存原型分析:基本知识 java虚拟机内存原型 寄存器:我们在程序中无法控制 栈:存放基本类型的数据和对象的引用,但对象本身不存放在栈中,而是存放在堆中 堆:存放用new产生的数据 静 ...

  3. Mysql-表关系

    表关系分为三种:一对一,一对多,多对多 一对多:一个学院对应多个学生,而一个学生只对应一个学院   --  这儿classroom 是代表的学院. -- 一对多 - A表的一条记录 对应 B 表多条记 ...

  4. nslookup域名解析

    域名解析 nslookup docker.xxx.com.cn

  5. char数据类型,编程能用的最小数据类型.

    关于数据类型, char占1bit,8bites. signed代表有符号,包括正负数,和0; unsigned代表无符号,只包括0和整数; signed和unsigned的主要区别就是它们的最高位是 ...

  6. OpenCL 设备队列

    ▶ 按书上写的设备队列的代码,需要 OpenCL2.0 的平台和设备,先把代码堆上来 ● 程序主要功能:用主机上的数组 Ahost 和 Bhost 创建设备缓冲区 Adevice 和 Bdevice, ...

  7. 24. Swap Nodes in Pairs + 25. Reverse Nodes in k-Group

    ▶ 问题:单链表中的元素进行交换或轮换. ▶ 24. 每两个元素进行翻转.如 [1 → 2 → 3 → 4 → 5] 变换为 [2 → 1 → 4 → 3 → 5] ● 初版代码,4 ms class ...

  8. reportng代替testng的默认报告——pom设置

    既然是maven项目,直接关注pom设置. 这篇写得很清楚了:maven+testng+reportng的pom设置 强调一点的是,guice必须依赖,就因这个卡了大半天. <dependenc ...

  9. as3 声明变量

    var a:int=0, b, c:Number=2; trace(a,b,c) /* 0 undefined 2 */ var a:int, b:uint, c:Number; var d:Stri ...

  10. redis 查询key数量

    info查询所有库的key数量 dbsize查询当前库的key数量 keys * 查询当前库的所有key,数量少的时候可以用,当key很多的时候很慢,be careful!