聚焦SVG排版技巧与创意应用的实用手册合集A collection of practical manuals focusing on SVG typesetting techniques and creative applications
组件教程打分、划重点、字幕滚动……这种巧妙的模拟式排版怎么做的?
打分、划重点、字幕滚动……这种巧妙的模拟式排版怎么做的?2025-03-26 09:00

 

图片
图片

 

                                               








要是咱们希望制作出的图文不复杂但又有意思,不妨转换一下思路,把生活中常见的一些操作搬进给图文里。


但想要在图文中通过排版模拟日常生活中习以为常的效果,会不会很难哇?


今天给大家举3个有趣好玩的小例子就知道了,分别为:打分划重点字幕滚动


 






3个案例分别来自用我要WhatYouNeed、戴尔、我是FARMER BOB 3个公众号。



下面一起简单拆解一下。



模拟评分


 

图片
图片








*素材来自我要WhatYouNeed《好人微瑕,我们都做过的26件坏事。》


将前景中的星星区域做成镂空的,背景中设计填充星星的颜色,这样「背景右滑」就可以让用户在微信文章中为不同的行为打分。


素材如下:


图片


该效果可使用 iPaiban Pro 黑科技编辑器中的「双层滑动-背景右滑」组件(编号:10140)制作。


图片


前景和背景图片上传如下:


图片


想要实现同款效果可以在编辑器(SVG.iPaiban.com)搜索使用:

组件:双层滑动-背景右滑

编号:10140(组件)



模拟划重点


 

图片                    
图片                    
图片                    
图片                    










*素材来自戴尔《Buff叠满,戴尔官网福利真的强!》


换个思路,还是双层图片,这次是背景不动,前景滑动。

前景的重要文字处做镂空效果,在背景图的相应设计彩色的颜色条,这样在滑动过程中前景图镂空处就有了色彩的变化。

素材如下:


图片


该效果使用 iPaiban Pro 黑科技编辑器中的「双层滑动-前景左滑」组件(编号:10018)即可制作。

图片

选择组件后,在页面右侧依次点击「换图」和「+」号上传准备好的图片素材。滑动图尺寸和底图保持一致,本文案例中的素材上传效果如下:

图片

想要实现同款效果可以在编辑器(SVG.iPaiban.com搜索使用:

组件:双层滑动-前景左滑

编号:10018(组件)

教程:《“这种进度条式的滑动,是怎么做的?”》



模拟电影结尾字幕滚动


 































*素材来自我是FARMER BOB《新品|以摇滚之名,与BOB一起高唱浪漫的诗》

自动向上滚动播放不同的名字。简单的效果赋予了推文如电影般的仪式感


这个效果由3层图片组成:背景层、中间层和前景层。


前景层的滚动图是多张图拼接而成的,需要使用 iPaiban Pro 黑科技编辑器中的「自动-向上滚动条」组件(编号:10891),支持设置滚动时间。


图片

图片

固定不动的背景和前景图,分别使用「零高图片」组件(编号:10224)和「遮罩」组件(编号:10829)进行配置。

图片

图片


3个组件的放置顺序如下,然后分别上传准备好的图片素材即可。每层图片尺寸都保持一致。

图片

想要实现同款效果可以在编辑器(SVG.iPaiban.com搜索使用:

组件:自动-向上滚动条

编号:10891(组件)

组件:零高图片 | 万能背景图

编号:10224(组件)

组件:遮罩

编号:10829(组件)




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

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

图片

SVG 黑科技交互排版👇🏻

 

                                               
                                               
                                               







iPaiban 团队可提供运营服务、创意策划、多种风格设计、SVG交互开发等服务,如需定制,请添加玉兔微信(ID:playhudong15)沟通咨询。

 

图片
                                                           
图片
                                                           
图片                            


热门工具
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排版技巧与创意应用的实用手册合集
首页组件教程
打分、划重点、字幕滚动……这种巧妙的模拟式排版怎么做的?2025-03-26 09:00

 

图片
图片

 

                                               








要是咱们希望制作出的图文不复杂但又有意思,不妨转换一下思路,把生活中常见的一些操作搬进给图文里。


但想要在图文中通过排版模拟日常生活中习以为常的效果,会不会很难哇?


今天给大家举3个有趣好玩的小例子就知道了,分别为:打分划重点字幕滚动


 






3个案例分别来自用我要WhatYouNeed、戴尔、我是FARMER BOB 3个公众号。



下面一起简单拆解一下。



模拟评分


 

图片
图片








*素材来自我要WhatYouNeed《好人微瑕,我们都做过的26件坏事。》


将前景中的星星区域做成镂空的,背景中设计填充星星的颜色,这样「背景右滑」就可以让用户在微信文章中为不同的行为打分。


素材如下:


图片


该效果可使用 iPaiban Pro 黑科技编辑器中的「双层滑动-背景右滑」组件(编号:10140)制作。


图片


前景和背景图片上传如下:


图片


想要实现同款效果可以在编辑器(SVG.iPaiban.com)搜索使用:

组件:双层滑动-背景右滑

编号:10140(组件)



模拟划重点


 

图片                    
图片                    
图片                    
图片                    










*素材来自戴尔《Buff叠满,戴尔官网福利真的强!》


换个思路,还是双层图片,这次是背景不动,前景滑动。

前景的重要文字处做镂空效果,在背景图的相应设计彩色的颜色条,这样在滑动过程中前景图镂空处就有了色彩的变化。

素材如下:


图片


该效果使用 iPaiban Pro 黑科技编辑器中的「双层滑动-前景左滑」组件(编号:10018)即可制作。

图片

选择组件后,在页面右侧依次点击「换图」和「+」号上传准备好的图片素材。滑动图尺寸和底图保持一致,本文案例中的素材上传效果如下:

图片

想要实现同款效果可以在编辑器(SVG.iPaiban.com搜索使用:

组件:双层滑动-前景左滑

编号:10018(组件)

教程:《“这种进度条式的滑动,是怎么做的?”》



模拟电影结尾字幕滚动


 































*素材来自我是FARMER BOB《新品|以摇滚之名,与BOB一起高唱浪漫的诗》

自动向上滚动播放不同的名字。简单的效果赋予了推文如电影般的仪式感


这个效果由3层图片组成:背景层、中间层和前景层。


前景层的滚动图是多张图拼接而成的,需要使用 iPaiban Pro 黑科技编辑器中的「自动-向上滚动条」组件(编号:10891),支持设置滚动时间。


图片

图片

固定不动的背景和前景图,分别使用「零高图片」组件(编号:10224)和「遮罩」组件(编号:10829)进行配置。

图片

图片


3个组件的放置顺序如下,然后分别上传准备好的图片素材即可。每层图片尺寸都保持一致。

图片

想要实现同款效果可以在编辑器(SVG.iPaiban.com搜索使用:

组件:自动-向上滚动条

编号:10891(组件)

组件:零高图片 | 万能背景图

编号:10224(组件)

组件:遮罩

编号:10829(组件)




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

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

图片

SVG 黑科技交互排版👇🏻

 

                                               
                                               
                                               







iPaiban 团队可提供运营服务、创意策划、多种风格设计、SVG交互开发等服务,如需定制,请添加玉兔微信(ID:playhudong15)沟通咨询。

 

图片
                                                           
图片
                                                           
图片                            


热门工具
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 | 服务协议