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

在日常运营设计中,弹窗的设计有时选添加动效,而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动画吧。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Aegisub中本不支持插入图片,但是使用插件VSFilterMod后,可以在ass字幕中以png图片作为颜色填充...
    小Hshan阅读 3,297评论 0 1
  • 1、使用软件:Adobe Photoshop、Adobe After Effect 版本:当然是越新越好,推荐CC...
    小小程序员jh阅读 6,717评论 0 7
  • 一、了解时间轴动作属性 PS有5种类型的图层按顺序依次为像素图层、调整图层、文字图层、形状图层以及智能对象。而对应...
    WHealer阅读 3,315评论 0 2
  • 2016年的这个季节,当时跟几个妈妈一起去新牌坊竺舍瑜伽馆体验瑜伽,一去就被那个空中瑜伽给吸引了,当时觉得很好玩,...
    绪英阅读 200评论 1 4
  • 现在笔者正在技术转产品中,工作了五年多跟产品处的也不是很差。感觉程序员也是可以跟产品经理做盆友的! 作为一个工作几...
    互联网修真院阅读 164评论 0 1