美文网首页
移动端动效Gif弹窗的设计与制作

移动端动效Gif弹窗的设计与制作

作者: 小美工方人几 | 来源:发表于2020-03-05 10:14 被阅读0次

在日常运营设计中,弹窗的设计有时选添加动效,而png序列和gif图是主要的两种方式。

1,AE导出带有alpha通道的PNG序列
2,使用ps,再菜单“文件/脚本/文件堆栈/浏览需要添加的文件并选中/确定”
3,打开“窗口/时间轴”,并点击时间轴的“创建帧动画”
4,在时间轴窗口右上角的面包屑按钮,选择“从图层创建帧”
5,在时间轴窗口右上角的面包屑按钮,选择“选择全部帧”
5,在时间轴窗口右上角的面包屑按钮,选择“反向帧”

设计动效是注意事项,

-尽量不要使用半透明元素,尤其是“透明度”相关的动态模糊、羽化等效果。

-png序列在导出是可以为25帧每秒,真正导出gif可以采取隔帧删除的方式,加快gif的播放速度,减少文件体积

-gif图片在设计时,尽量使用纯色,避免渐变和纹理的使用,因为如果使用会因为后期颜色位数的减少出现较为严重的锯齿或图片质量变差的情况。

-在Gif右侧的设置中,可尝试减少颜色位数,比如从256减少为128

DF26D466-C3E3-435A-9FB0-11582648ACD9.png

按照此预设,可以达到文件体积和动效的相对平衡,也可以根据自己情况对颜色位数进行调整,或增加或减少。

最后,Ctrl+Shift+Alt+S 输出自己的Gif动画吧。

相关文章

网友评论

      本文标题:移动端动效Gif弹窗的设计与制作

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