直呼「太绝了」，Apple这个粉碎式排版是怎么做的？
我们先看一个文章留言：
是什么样的排版被用户直呼「太绝了」，而且给这个留言点赞的用户数也将近5000，高居留言第一名。
就是这样一个效果：
*GIF录制Apple谁离你最近，却能严守你的隐私？
Apple在这篇标题为《谁离你最近，却能严守你的隐私？》的SVG交互图文中，用了上面左滑粉碎文字的创意交互效果，可以说是完美展现了自家产品注重隐私保护的特点。
一个技术上很简单，但创意很巧妙的交互排版。
我们上手体验一下，来自玛莎拉蒂的一个同款效果，左滑试试：
*素材来自玛莎拉蒂官方服务号新年礼物？用TA犒赏自己就够了！
确实有些「绝」，不过熟悉交互排版的小伙伴或许可以猜到，这其实是利用图片间的色彩关系，使用中间不动上下两层滑动的三层滑动来实现的。
具体怎么制作，今天就以玛莎拉蒂的案例为例大家全面解密一下，从素材的制作到最后的排版一步一步告诉你。
一
素材的制作
我们先看下素材：
这里面有3张图需要单独看一下，中间层是一张有一块镂空的GIF：
文字部分的两张图是这样的：
是不是还是还有点迷糊？这不就是普通的文字图吗？
NoNoNo~可不止这么简单！我们将滑动的文字图拖入PS，再加个黑色背景看看：
这样相信大家基本明白了。原来是在黑色的文字透明图上，文字周围还加了一圈很有破碎感的白色描边设计！
其他素材制作起来比较容易，这里主要教下大家这个文字图是如何设计的。（想要看全部素材的，在本公众号后台回复「玛莎拉蒂」即可获取）
打开Ps，新建画布，尺寸根据自己的需求来定。接着选择文字工具输入文字。
选择栅格化后的文字图层，依次点击上方菜单「滤镜」-「风格化」-「风」为文字添加粉碎感效果。为了粉碎感更明显，这里选择「大风」、「从左」。
第3步：导出PNG图片
隐藏背景后，依次点击上方菜单栏「文件」-「导出」-「存储为Web所用格式」，选择PNG格式导出即可。
二
编辑器排版
第1步：选择组件
登录i排版SVG编辑器后，点击编辑器右侧「组件」按钮，在「滑动」-「三层」分类中找到「三层滑动-左滑」组件，或者直接在搜索框中搜索组件编号10054。
第2步：上传图片素材
点击页面右侧「换图」按钮上传中间层图片，
使用同步功能不用频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码预览在公众号的效果。
如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。
*素材来自智族Lab（原GQ实验室）我，普通女生：▇▇，▇▇。
