*素材来自Apple《独家开箱帖，带你云逛 Apple 三里屯。》

*素材来自PEDRO《上新｜如果你是一种颜色》

相信很多小伙伴都知道可以用序列帧动效排版了，因为跟大家安利过太多次了。

GIF 直接上传到公众号后台会被压缩，为了实现高清的动态效果，像苹果、星巴克、GUCCI等很多大品牌就会选择使用序列帧动效。

上方花瓣绽放的部分素材：

那么问题就来了，如何制作这样一张张连贯的序列帧静态图呢？

当素材是 GIF 时，使用 Ps 导出

第1步：

使用 Ps 打开高清 GIF，然后点击菜单栏的「窗口」-「时间轴」调出动画时间轴，这时我们就能看到构成这张 GIF 的所有帧画面了。

如果想让 GIF 体积变小一些，帧画面少一些，可以对它进行抽帧，抽帧教程见：《切图与抽帧，公众号长图制作的两大技能你还不会？》

抽完帧或不需要抽帧，接着进行第2步。

第2步：

点击菜单栏「文件」-「导出」，选择「渲染视频」。

在出现的「渲染视频」窗口中，点击选择「Photoshop图像序列」就能导出所有的帧画面了。

同时我们还可以给将要导出的帧画面重命名，选择保存的文件夹，以及选择图片格式和设置图片尺寸。

第3步：

设置完毕后，点击右上角「渲染」，渲染完成在保存的文件夹中就能看到所有的帧画面啦。

当素材是视频时，使用 Ae 导出

第1步：

使用 Ae 新建合成，导入视频，然后点击菜单栏的「文件」-「导出」-「添加到渲染队列」，打开渲染队列窗口。

第2步：

点击渲染队列窗口的「无损」，在出现的窗口中选择「"png"序列」格式。

如果背景是白色的，在通道选择「RGB+Alpha」，这样输出时，背景就会被处理掉，产出透明背景的动画图。不需要背景透明保持通道为「RGB」即可。

另外我们还可以调整输出图片的大小，设置完毕后点击「确定」。

第3步：

点击渲染队列窗口「输出到」后面的蓝色文字，设置保存图片名以及保存位置，然后点击「存储」就可以啦。

另外大家需要注意的是，因为序列帧图片数量较多，如果一张序列帧图片1M大，那么100张就是100M啦。

所以导出的序列帧图片在保证清晰度可以接受的情况下，应该尽量压缩每张图片的大小，以保证图文的加载速度和良好的阅读体验。

导出连贯的序列帧图片后，在 iPaiban Pro 编辑器中有超多效果的序列帧效果组件供你选择使用，搜索关键词「序列帧」就能看到。

除了本文开头展示的，还有「点击-切换序列帧+展开」组合（编号：11485）、「长按切换序列帧+点击展开」组合（编号：11816）等。

制作SVG交互图文认准 iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可注册，编辑器所有组件/组合现已全部支持免费试用了。

导出的序列帧图片通过文件夹的方式一键上传编辑器超方便：

新用户在「新手礼包」可领取3天企业标准版会员免费商用，以及22个常用必备组件的大礼包（1年）。随礼包附赠千元优惠券，每单最高立降500元。

● SVG 黑科技交互排版👇🏻

 

如需定制 SVG 黑科技排版，请点此查看定制流程和套餐，低至500元/篇。