直呼「太绝了」，Apple这个粉碎式排版是怎么做的？

i排版编辑器

发布于:2026-03-31

文章内容来源于公众号：i排版编辑器，点此可查看原文，内容版权归相关企业所有，本网站仅供交流学习。若涉及版权问题或存在侵权情况，请及时与我们联系，我们将第一时间进行删除处理。

摘要：

我们先看一个文章留言：

是什么样的排版被用户直呼「太绝了」，而且给这个留言点赞的用户数也将近5000，高居留言第一名。

就是这样一个效果：

*GIF录制Apple谁离你最近，却能严守你的隐私？

Apple在这篇标题为《谁离你最近，却能严守你的隐私？》的SVG交互图文中，用了上面左滑粉碎文字的创意交互效果，可以说是完美展现了自家产品注重隐私保护的特点。

一个技术上很简单，但创意很巧妙的交互排版。

我们上手体验一下，来自玛莎拉蒂的一个同款效果，左滑试试：

                    

                    

*素材来自玛莎拉蒂官方服务号新年礼物？用TA犒赏自己就够了！

确实有些「绝」，不过熟悉交互排版的小伙伴或许可以猜到，这其实是利用图片间的色彩关系，使用中间不动上下两层滑动的三层滑动来实现的。

具体怎么制作，今天就以玛莎拉蒂的案例为例大家全面解密一下，从素材的制作到最后的排版一步一步告诉你。

一

素材的制作

我们先看下素材：

这里面有3张图需要单独看一下，中间层是一张有一块镂空的GIF：

文字部分的两张图是这样的：

是不是还是还有点迷糊？这不就是普通的文字图吗？

NoNoNo~可不止这么简单！我们将滑动的文字图拖入PS，再加个黑色背景看看：

这样相信大家基本明白了。原来是在黑色的文字透明图上，文字周围还加了一圈很有破碎感的白色描边设计！

其他素材制作起来比较容易，这里主要教下大家这个文字图是如何设计的。（想要看全部素材的，在本公众号后台回复「玛莎拉蒂」即可获取）

**第1步：**新建画布，输入文字

打开Ps，新建画布，尺寸根据自己的需求来定。接着选择文字工具输入文字。

第2步：制作文字粉碎效果

Ctrl+J复制文字图层，并将复制的文字改为白色，然后右键文字图层栅格化文字。（这里为了给大家演示的更明显，将背景图层改为了黑色）

选择栅格化后的文字图层，依次点击上方菜单「滤镜」-「风格化」-「风」为文字添加粉碎感效果。为了粉碎感更明显，这里选择「大风」、「从左」。

接着将白色的栅格化文字图层挪至黑色文字图层下面，即可看到文字粉碎的效果。

为了粉碎效果更逼真，我们可以给白色文字图层添加蒙版，用黑色画笔在蒙版上擦除掉不想显示的部分。

**第3步：**导出PNG图片

隐藏背景后，依次点击上方菜单栏「文件」-「导出」-「存储为Web所用格式」，选择PNG格式导出即可。

二

编辑器排版

**工具：**i排版SVG编辑器，网址：SVG.iPaiban.com

**组件：**三层滑动-左滑

**编号：**10054（组件）

**第1步：**选择组件

登录i排版SVG编辑器后，点击编辑器右侧「组件」按钮，在「滑动」-「三层」分类中找到「三层滑动-左滑」组件，或者直接在搜索框中搜索组件编号10054。

**第2步：**上传图片素材

点击页面右侧「换图」按钮上传中间层图片，

点击第一个「+」号上传4张前景图片，第一张前景图片注意为全透明图片。

点击第二个「+」号上传4张背景图片，背景图片的后三张均为纯白图。

所有图片尺寸需保持一致。

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

点击页面最右侧「预览草稿」可随时预览效果，效果满意后点击「同步至微信后台」同步到自己的公众号就可以了。

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

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

---

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

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

之前还介绍过一个类似滑动粉碎文字的玩法，排版层级关系稍微有些不一样，详细教程戳：GQ这个滑动粉碎文字的排版，真是「好东西」！

*素材来自智族Lab（原GQ实验室）我，普通女生：▇▇，▇▇。

● SVG交互排版👇🏻

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