聚焦SVG排版技巧与创意应用的实用手册合集

A collection of practical manuals focusing on SVG typesetting techniques and creative applications

谷粒多这种选新年关键词的排版，怎么弄啊？

谷粒多这种选新年关键词的排版，怎么弄啊？

2024-12-23

 

                                               








每逢年末和新年，除了想要总结一下过去的一年，也忍不住展望新的一年。

元旦将至，今天带大家看两种在图文中选新年关键词的排版玩法。

首先是李宁的这种，每行可选择一个关键词：

 

                                                           
                                                   
                                                   
                                                           
                                                   
                                                   
                                                           
                                                   
                                                   
                                                           
                                                   
                                                   



*素材来自李宁运动生活《元旦好礼｜愿力显眼包在线发福利！》

组件：自定义海报(按钮在上,4排)

编号：11830（组件）


这种效果和之前介绍过的DIY海报属于一种，相关实现教程戳：《图文里也能DIY海报，像H5一样！》

另外一种来自谷粒多，全部关键词都可以选择：

 



*素材来自谷粒多《2024“喜”气上新，快来扛起新年FLAG!》

组件：点击-切换图片(多触发区)

编号：11514（组件）


该效果同样使用 iPaiban Pro 黑科技编辑器的一个组件就能实现，但要注意对应素材的制作。

具体怎么排的，一起看下教程吧。


详细教程：

工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com
组件：点击-切换图片(多触发区)
编号：11514（组件）

第1步：选择组件

登录 iPaiban Pro 编辑器后，点击编辑器左侧「组件」按钮，在「点击」-「普通切换」分类中找到「点击-切换图片(多触发区)」组件，或者直接搜索组件编号11514，点击选择。


第2步：上传图片素材

点击右侧「换图」按钮上传背景图，点击「+」号上传切换图。所有图片尺寸需保持一致。


注意，为了让切换图在显示时不相互覆盖影响，切换图素材在保持尺寸一致的同事，需为PNG格式的背景透明图片，并且画面内容尽量互不重叠。

第3步：调整触发区域

双击编辑区图片，调出触发区域调整窗口。每个序号图片代表触发区及对应的切换图。

拖拽序号图片到背景图的指定位置，调整完毕后点击「保存设置并退出」。


第4步：调整动画参数

调整图片切换的时间。


点击最右侧「预览草稿」可随时预览效果。

第5步：导入公众号后台

效果满意后点击「同步至微信后台」同步到自己的公众号就可以了。


使用同步功能不用频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码预览在公众号的效果。

如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。



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

iPaiban Pro 四周年优惠活动进行中会员费用迎来首次大降价，价格是之前的5折不到！

 


                                                       
                                               



● SVG 黑科技交互排版👇🏻

 

                                                               
                                                               
                                                               







如需定制 SVG 黑科技排版，请添加玉兔微信（ID：playhudong15）沟通咨询。

 

                                                           
                                                           

热门工具

推荐阅读

组件教程
组件教程
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-12-23 09:00

 

                                               








每逢年末和新年，除了想要总结一下过去的一年，也忍不住展望新的一年。

元旦将至，今天带大家看两种在图文中选新年关键词的排版玩法。

首先是李宁的这种，每行可选择一个关键词：

 

                                                           
                                                   
                                                   
                                                           
                                                   
                                                   
                                                           
                                                   
                                                   
                                                           
                                                   
                                                   



*素材来自李宁运动生活《元旦好礼｜愿力显眼包在线发福利！》

组件：自定义海报(按钮在上,4排)

编号：11830（组件）


这种效果和之前介绍过的DIY海报属于一种，相关实现教程戳：《图文里也能DIY海报，像H5一样！》

另外一种来自谷粒多，全部关键词都可以选择：

 



*素材来自谷粒多《2024“喜”气上新，快来扛起新年FLAG!》

组件：点击-切换图片(多触发区)

编号：11514（组件）


该效果同样使用 iPaiban Pro 黑科技编辑器的一个组件就能实现，但要注意对应素材的制作。

具体怎么排的，一起看下教程吧。


详细教程：

工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com
组件：点击-切换图片(多触发区)
编号：11514（组件）

第1步：选择组件

登录 iPaiban Pro 编辑器后，点击编辑器左侧「组件」按钮，在「点击」-「普通切换」分类中找到「点击-切换图片(多触发区)」组件，或者直接搜索组件编号11514，点击选择。


第2步：上传图片素材

点击右侧「换图」按钮上传背景图，点击「+」号上传切换图。所有图片尺寸需保持一致。


注意，为了让切换图在显示时不相互覆盖影响，切换图素材在保持尺寸一致的同事，需为PNG格式的背景透明图片，并且画面内容尽量互不重叠。

第3步：调整触发区域

双击编辑区图片，调出触发区域调整窗口。每个序号图片代表触发区及对应的切换图。

拖拽序号图片到背景图的指定位置，调整完毕后点击「保存设置并退出」。


第4步：调整动画参数

调整图片切换的时间。


点击最右侧「预览草稿」可随时预览效果。

第5步：导入公众号后台

效果满意后点击「同步至微信后台」同步到自己的公众号就可以了。


使用同步功能不用频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码预览在公众号的效果。

如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。



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

iPaiban Pro 四周年优惠活动进行中会员费用迎来首次大降价，价格是之前的5折不到！

 


                                                       
                                               



● SVG 黑科技交互排版👇🏻

 

                                                               
                                                               
                                                               







如需定制 SVG 黑科技排版，请添加玉兔微信（ID：playhudong15）沟通咨询。

 

                                                           
                                                           

热门工具

推荐阅读

组件教程
组件教程
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 | 服务协议