镜头感十足！开工图文用霸王茶姬这种排版回顾假期超适合！

原创赞收藏评论

举报 2024-02-19

扫描,分享朋友圈

当~~~大部分公司都在今天正式开工了。

年前给大家整理分享了一篇开工主题的案例合集，有需要的可以直接点击查看：《新年新开始，年后开工SVG交互图文案例抢先看！》
开工第一天，教大家制作霸王茶姬一篇六周年图文的排版，这篇图文点赞数达10W+，是霸王茶姬23年阅读、点赞、在看都最高的一篇。
这篇图文的排版效果镜头感十足，用于开工图文回顾假期生活也很适合。

我们先来体验一下：

*素材来自霸王茶姬CHAGEE《霸王茶姬六周年，请天下茶友喝“亿”杯！》

组合：连续点击-图片放大消失+展开

编号：11842（组合）

按照提示连续点击指定位置，图片放大消失，配合图片素材局部镂空式的设计，使得图文营造出一种镜头展示的效果，最后一次点击图片放大消失后，图文展开，显现更多内容。
它的巧妙之处是，每一次点击其实是有两张图片在变化，一张是镂空式设计的图片，一张是镂空式图片的背景（正好填充镂空的位置）：

该组合现开放免费获取，点击下方小程序卡片参加活动，即可免费获取兑换码。

下面一起看下制作教程吧。

详细教程：
工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com

组合：连续点击-图片放大消失+展开

编号：11842（组合）
第1步：选择组合
登录 iPaiban Pro 编辑器后，点击编辑器右侧「组合」按钮，在「花样展开」分类中找到「连续点击-图片放大消失+展开」组合，或者直接在搜索框中搜索组合编号11842，点击选择。

第2步：进入组合编辑模式
点击「编辑组合」，进入组合编辑模式。

在组合编辑模式中，分为展开前和展开后两块设置区域。

第3步：设置「展开前」内容
①上传图片：前面说过，该效果每一次点击其实是有两张图片在变化，一张是镂空式设计的图片，一张是镂空式图片的背景（正好填充镂空的位置）。
所以我们需要点击「展开前」区域，在右侧分别上传放大图片和对应的图片背景。所有图片尺寸需保持一致。

②调整放大的中心位置：双击「展开前」区域上传的图片，调出触发区域调整窗口，拖动红框调整触发区到合适位置。依次点击「下一张」调整每张图片的触发区。

注意这里的触发区中心点为放大的中心位置，并非真正的点击触发区域，无论将红框调整在什么位置，点击整张图片都会触发。
③调整参数：根据需求调整图片的放大时长、放大倍数和图片背景消失时长。

第4步：设置「展开后」内容
「展开后」的内容支持嵌套各种组件，需要什么效果就在左侧「组件」分类中找到相应的组件拖动到组件位中，然后上传需要的素材即可。
添加组件位-拖动组件到组件位中-上传图片，每需要一个样式就按照这3步操作：

第5步：设置参数
点击右侧红色小三角，可以设置展开时长。
如果预览效果发现内容没有完全展开或者展开过长，可以通过「加减展开高度（px）」进行调整，输入负数减小展开高度。

第6步：导入公众号后台
内容编辑完毕后，点击左上角「保存并退出」退出组合编辑模式回到编辑器主页面。

继续点击最右侧「预览草稿」扫码预览效果，效果满意后接着点击「同步至微信后台」就可以了。

本内容为作者独立观点，不代表数英立场。
本文禁止转载，侵权必究。