聚焦SVG排版技巧与创意应用的实用手册合集A collection of practical manuals focusing on SVG typesetting techniques and creative applications
组件教程“苹果、星巴克那些连贯高清的序列帧图片,都是怎么弄的啊?”
“苹果、星巴克那些连贯高清的序列帧图片,都是怎么弄的啊?”2024-11-22 09:00

 

                                                           


上传的GIF不高清、不流畅,怎么办?

再来欣赏一下苹果经典的花瓣绽放动效:

 



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

组件:自动-序列帧动效(永远,限100张)

编号:10873(组件)

教程:《“昨天苹果图文中的GIF,咋这么高清啊?”》


还有最近颇受欢迎的点击序列帧动效跳转视频号效果:

 


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

组件:自动-序列帧动效(视频号,永远,限300张)

编号:11785(组件)

教程:《高清得令人发指!这样的视频号动态封面怎么做的?》


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


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元/篇。

 

                                                           
                                                           
                           

热门工具
iPaiban ProSVG黑科技编辑器
立即免费试用
i排版公众号图文编辑器
免费制作图文
MiSum AI聚合国内外先进AI大模型
注册送300积分
品牌时光机SVG交互图文案例库
限时免费搜索
推荐阅读
1
不愧是Apple!6种苹果味儿十足排版效果请收好!12025-06-16
2
不愧是Apple!6种苹果味儿十足排版效果请收好!22025-06-16
3
不愧是Apple!6种苹果味儿十足排版效果请收好!32025-06-16
4
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
5
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
6
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
组件教程
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
SVG案例
推荐指数4.5
来了!新闻早班车科技互联网
人民日报
2025-06-17
推荐指数3.5
来了!新闻早班车科技互联网
人民日报
2025-06-17
推荐指数3.5
来了!新闻早班车体育运动
人民日报
2025-06-17
聚焦SVG排版技巧与创意应用的实用手册合集
首页组件教程
“苹果、星巴克那些连贯高清的序列帧图片,都是怎么弄的啊?”2024-11-22 09:00

 

                                                           


上传的GIF不高清、不流畅,怎么办?

再来欣赏一下苹果经典的花瓣绽放动效:

 



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

组件:自动-序列帧动效(永远,限100张)

编号:10873(组件)

教程:《“昨天苹果图文中的GIF,咋这么高清啊?”》


还有最近颇受欢迎的点击序列帧动效跳转视频号效果:

 


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

组件:自动-序列帧动效(视频号,永远,限300张)

编号:11785(组件)

教程:《高清得令人发指!这样的视频号动态封面怎么做的?》


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


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元/篇。

 

                                                           
                                                           
                           

热门工具
iPaiban ProSVG黑科技编辑器
立即免费试用
i排版公众号图文编辑器
免费制作图文
MiSum AI聚合国内外先进AI大模型
注册送300积分
品牌时光机SVG交互图文案例库
限时免费搜索
推荐阅读
1
不愧是Apple!6种苹果味儿十足排版效果请收好!12025-06-16
2
不愧是Apple!6种苹果味儿十足排版效果请收好!22025-06-16
3
不愧是Apple!6种苹果味儿十足排版效果请收好!32025-06-16
4
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
5
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
6
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
组件教程
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
SVG案例
推荐指数4.5
来了!新闻早班车科技互联网
人民日报
2025-06-17
推荐指数3.5
来了!新闻早班车科技互联网
人民日报
2025-06-17
推荐指数3.5
来了!新闻早班车体育运动
人民日报
2025-06-17
i排版_iPaiban_客服微信扫码加客服领会员
联系邮箱:i@playhudong.com
i排版_iPaiban_公众号i排版_iPaiban_知乎i排版_iPaiban_微博i排版_iPaiban_哔哩哔哩
京ICP备14043207号-2 京公网安备11010802023272号
小黄人科技@2025 | 服务协议