“这些可以闪烁、缩放的按钮是怎么做的啊？”
运营人掌握一些简单的作图技巧，可能会大大提高自己的工作效率。
之前i排版发过一篇教程《公众号长图排版，经常说的的切图、抽帧到底是什么？》，教大家用Ps切图和抽帧，很受欢迎。
这几天，在《公众号图文点击按钮设计大全》文章中，一些小伙伴发现许多按钮都做成了闪烁或缩放的动态效果，很想知道是怎么做的，今天就教给大家。
专业的动效设计师制作动效一般使用Ae，不会Ae，只懂一点点Ps操作的运营人也能自己制作动图，而且流畅度一点也不差！制作成品的大小也很小。
操作步骤非常简单，只需要掌握好「时间轴」这一个功能。
以最常见的闪烁按钮为例。
第1步：
准备背景图和按钮图两张图片，然后导入Ps中。图层分布如下：
第2步：
在菜单栏「窗口」中找到「时间轴」，点击打开。
打开后，点击创建帧动画。
第3步：
重点来了，接下来只需要下方「过渡动画帧」和「复制所选帧」两个按钮就可以做出好多动画。
先点击「复制所选帧」按钮，复制一帧一样的画面。
选中新建的这一帧画面，在右侧图层中把按钮的透明度调整为0%。
接着点击「过渡动画帧」按钮，就能自动创建从上一帧（有按钮的画面）过渡到现在没有按钮的这一帧。
可以输入过渡的帧数，越多动画越细致，过渡越自然，但成品动图也会变大。
点击确定后就完成了，可以点击时间轴上的「播放」按钮看一下效果。
现在就完成了按钮从显示到消失一半闪烁动画，另一半按照同样的步骤操作就能完整实现从显示→消失→显示的完整闪烁效果了。
第4步：
效果满意后，点击菜单栏「文件」-「导出」-「导出为 Web 所用格式（旧版）」，在出现的窗口中选择「GIF」格式，最后点击「存储」就可以啦。
成品：
除了透明度变化，按照以上方法，元素的缩放、位移、旋转，甚至多种效果组合同步变化，都可以实现，大家可以自行探索。
有了GIF动图，使用 iPaiban Pro 黑科技编辑器可以在公众号排版中实现多种互动玩法，比如点击播放动图、点击滑动打开、点击飘落切换、点击水平移动以及各种展开效果等。
制作SVG交互图文认准 iPaiban Pro 黑科技编辑器，网址：x.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可开始注册并使用。
新用户在「新手礼包」可领取3天企业标准版会员体验权，以及22个常用必备组件的大礼包（1年）哦。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）