聚焦SVG排版技巧与创意应用的实用手册合集A collection of practical manuals focusing on SVG typesetting techniques and creative applications
组件教程苹果这篇「可能引起极度舒适」的图文,有啥特殊的?
苹果这篇「可能引起极度舒适」的图文,有啥特殊的?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元/篇。

 

                                                           
                                                           

热门工具
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-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元/篇。

 

                                                           
                                                           

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