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

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

苹果这篇「可能引起极度舒适」的图文，有啥特殊的？

苹果这篇「可能引起极度舒适」的图文，有啥特殊的？

2024-08-16

 

                                               


前几天在文章《图片太单调？加个滤镜遮罩试试！》中给大家介绍了几个滤镜遮罩，教大家用不同的滤镜遮罩实现有趣的排版效果。

今天要介绍的也是一个滤镜遮罩，但是它有些特殊。

在介绍之前，我们先来点击下图看下苹果的一篇图文《准备好，本篇内容可能引起极度舒适。》：

 

                                                       



苹果这篇除了设计图比较精美，在交互上好像没有什么特殊的，最大的一个亮点就是有一个流动的光粒在文章中穿梭：

 



*素材来自Apple《准备好，本篇内容可能引起极度舒适。》


这正是这篇图文的特殊之处。如果我们单纯制作一个上方这样色彩丰富的GIF，很难做到如此高清流畅。

苹果的排版技巧，是把流动的光粒和背景图分开，然后排版叠加在一块。而流动的光粒GIF形状复杂，为了防止边缘有锯齿，其实是带有黑色背景，排版时通过滤色的混合模式去掉滤掉黑色保留白色。如下：

 

                           


这就是今天介绍的在 iPaiban Pro 编辑器中的「滤色滤镜遮罩」组件（编号：11898）。

在Ps中，滤色模式一般用于提高亮度，使颜色变浅。任何颜色和黑色执行滤色，原色不受影响；任何颜色和白色执行滤色得到的是白色。

所以在图文排版时，如果一张GIF的主体主要是白色，常常上传一张背景纯黑色的主体白色GIF，然后使用「滤色滤镜遮罩」滤掉黑色。这样可以很好地解决白色GIF在导出时边缘有锯齿或渐变不流畅的问题。

类似的还有NewBalance中国这个，滑动交互和黑色背景的滑动提示按钮GIF：

 

                           



GIF应用「滤色滤镜遮罩」组件叠加后：

 



*素材来自NewBalance中国《尽享618礼遇，焕新夏日穿搭灵感》


下面以NewBalance中国的效果为例，一起看下「滤色滤镜遮罩」的使用方法吧。

详细教程：

工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com
组件：滤色滤镜遮罩
编号：11898（组件）

第1步：制作想要的交互效果

遮罩，在排版中显示的高度为零，用作做前边组件的前景。所以在使用遮罩相关组件时，需要先制作好遮罩下方的交互效果。

本文NewBalance中国的示例，滤镜遮罩下方的效果为自动对齐的双层背景滑动。

①登录 iPaiban Pro 编辑器后，点击编辑器左侧「组件」按钮，搜索组件编号10273或按照分类找到「双层滑动-背景左滑(自动对齐)」组件，点击选择。


②在右侧按照组件要求上传图片素材。其他效果组件可能还需要调整参数。


第2步：添加滤镜遮罩

①在组件「特殊」分类中找到「滤色滤镜遮罩」组件，或者直接在搜索框中搜索组件编号11898，点击选择。


②点击右侧「换图」按钮，上传准备好的遮罩图。图片尺寸比例需要和前面效果组件的显示图片尺寸保持一致。


上传后，遮罩图将会自动覆盖在前面组件的图片上方，同时执行滤色滤镜滤掉黑色。

第3步：导入到公众号后台

点击「预览草稿」可在编辑器中扫码预览效果，效果满意后点击「同步至微信后台」就可以了。


使用同步功能无需频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码查看。

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


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

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



● SVG 黑科技交互排版👇🏻

 

                                               
                                               
                                               

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

 

                                                           
                                                           

热门工具

推荐阅读

组件教程
组件教程
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-08-16 09:00

 

                                               


前几天在文章《图片太单调？加个滤镜遮罩试试！》中给大家介绍了几个滤镜遮罩，教大家用不同的滤镜遮罩实现有趣的排版效果。

今天要介绍的也是一个滤镜遮罩，但是它有些特殊。

在介绍之前，我们先来点击下图看下苹果的一篇图文《准备好，本篇内容可能引起极度舒适。》：

 

                                                       



苹果这篇除了设计图比较精美，在交互上好像没有什么特殊的，最大的一个亮点就是有一个流动的光粒在文章中穿梭：

 



*素材来自Apple《准备好，本篇内容可能引起极度舒适。》


这正是这篇图文的特殊之处。如果我们单纯制作一个上方这样色彩丰富的GIF，很难做到如此高清流畅。

苹果的排版技巧，是把流动的光粒和背景图分开，然后排版叠加在一块。而流动的光粒GIF形状复杂，为了防止边缘有锯齿，其实是带有黑色背景，排版时通过滤色的混合模式去掉滤掉黑色保留白色。如下：

 

                           


这就是今天介绍的在 iPaiban Pro 编辑器中的「滤色滤镜遮罩」组件（编号：11898）。

在Ps中，滤色模式一般用于提高亮度，使颜色变浅。任何颜色和黑色执行滤色，原色不受影响；任何颜色和白色执行滤色得到的是白色。

所以在图文排版时，如果一张GIF的主体主要是白色，常常上传一张背景纯黑色的主体白色GIF，然后使用「滤色滤镜遮罩」滤掉黑色。这样可以很好地解决白色GIF在导出时边缘有锯齿或渐变不流畅的问题。

类似的还有NewBalance中国这个，滑动交互和黑色背景的滑动提示按钮GIF：

 

                           



GIF应用「滤色滤镜遮罩」组件叠加后：

 



*素材来自NewBalance中国《尽享618礼遇，焕新夏日穿搭灵感》


下面以NewBalance中国的效果为例，一起看下「滤色滤镜遮罩」的使用方法吧。

详细教程：

工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com
组件：滤色滤镜遮罩
编号：11898（组件）

第1步：制作想要的交互效果

遮罩，在排版中显示的高度为零，用作做前边组件的前景。所以在使用遮罩相关组件时，需要先制作好遮罩下方的交互效果。

本文NewBalance中国的示例，滤镜遮罩下方的效果为自动对齐的双层背景滑动。

①登录 iPaiban Pro 编辑器后，点击编辑器左侧「组件」按钮，搜索组件编号10273或按照分类找到「双层滑动-背景左滑(自动对齐)」组件，点击选择。


②在右侧按照组件要求上传图片素材。其他效果组件可能还需要调整参数。


第2步：添加滤镜遮罩

①在组件「特殊」分类中找到「滤色滤镜遮罩」组件，或者直接在搜索框中搜索组件编号11898，点击选择。


②点击右侧「换图」按钮，上传准备好的遮罩图。图片尺寸比例需要和前面效果组件的显示图片尺寸保持一致。


上传后，遮罩图将会自动覆盖在前面组件的图片上方，同时执行滤色滤镜滤掉黑色。

第3步：导入到公众号后台

点击「预览草稿」可在编辑器中扫码预览效果，效果满意后点击「同步至微信后台」就可以了。


使用同步功能无需频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码查看。

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


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

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



● SVG 黑科技交互排版👇🏻

 

                                               
                                               
                                               

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

 

                                                           
                                                           

热门工具

推荐阅读

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