分享此网站可得100G教程,联系小洁领取点击这里给我发消息

Ae制造-制作livephoto动态图标教程

icon图标 学UI设计 739次浏览 0个评论

最近在处理一些icon动效方面的工作,细细研究了下苹果这个容易被忽视的动态livephoto启动icon,顺便模仿了一下,分享一下制作过程,相对还是比较简单的。
Ae制造-制作livephoto动态图标教程
Ae制造-制作livephoto动态图标教程

Ae制造-制作livephoto动态图标教程

文中需要用到的弹性表达式
amp = .3;
freq = 0.8;
decay = 10;
n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){n–;}
}
if (n == 0){ t = 0;}
else{t = time – key(n).time;}
if (n > 0){
v = velocityAtTime(key(n).time – thisComp.frameDuration/10);
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}
else{value}

忘了说导出的问题,这里补充一下常规的导出格式和转gif的办法;

添加背景

添加纯色图层,选择合适背景色即可,将纯色置于底层;如果需要渐变,右击纯色图层-图层样式-渐变叠加,这里和ps内的操作差不多。

导出效果较好且便于传播携带的视频格式

将合成添加到渲染列表(合成-添加到渲染队列),然后在列表中,点击“输出模块:无损”,弹窗中格式选择“QuickTime”,点击“格式选项”,弹窗中视频编解码器选择H264(win下默认选择),确认后点击“输出到”,选择输出位置,点击渲染导出后缀为.mov格式的文件,这样导出的视频内存相对小且清晰度可以得到较好的保证。

将视频转换成GIF

将mov用ps打开,然后选择文件-导出-存储为web所用格式,在“预设”中选择gif 128 仿色,在循环选项中选择“永远”,存储就可以了。


推荐:查看最受欢迎的设计导航网站 → http://www.xueuisheji.com

交流:结交更多有才华的设计师?请加入UI设计QQ群 ,与设计师交流设计。

喜欢 (0)
[关注:设计军团]
分享 (0)
关于作者:
学UI设计网专业的UI设计师交流、学习与展示的平台。我们将打造中国最专业的UI设计交流平台,为UI设计师做最好的职业生涯一站式服务,提高UI设计乃至互联网设计的行业价值!