Apple推文效果教程:用135编辑器制作高级排版效果

想学Apple新品推文的高级排版?本文详解用135编辑器实现序列帧动画和零高布局文字流彩效果,适合新媒体人提升微信排版质感。


 Apple
简约又高级的排版
是怎么做的呢?
Apple
新品燃燃爆了


前两天的科技春晚大家看了吗?从预告到发布,这一次库克没让大家失望,iPhone17标准版被大家夸为最值得购买的一代。毕竟iPhone17标准版终终终终于用上了高刷,喜大普奔!不仅如此,一向贵如金子的Apple内存,这一次将标准版存储直接从128GB升级到256GB,加量不加价!Apple这次真的听劝了。


科技博主疯狂评测手机,而我们新媒体人紧盯着Apple推文今夜,怎一个燃字了得》两眼放光:开篇就是清晰的、流光溢彩的动效和尾部绚烂的文字效果,仿佛是流星划过、烟花绽放。又燃又简约,质感拉满。


那么这样的效果如何用135编辑器实现呢?


01




用序列帧模拟GIF图
·

图片素材来源:Apple


当我们使用135插件(点击获取插件的方法)提取Apple推文中的图片素材,我们可以清晰地看到,开篇GIF其实是由一张张静态图通过轮播的方式实现。


image.png


“那为什么Apple不直接使用一张GIF图反而要如此费力用多张静态去模拟一张GIF图效果呢?”


原因很简单,为了让「GIF」图更高清更流畅,大家都知道微信对GIF图的尺寸是有要求的:只能上传10M以内和300帧的帧数限制。


而想要满足Apple的清晰度,显然10M无法满足,只能通过序列帧来实现。

如何制作同款

在135编辑器页面,点击左侧「SVG编辑」进入SVG编辑器,在「SVG效果」中搜索关键词「序列帧」


image.png

SVG编辑入口


image.png


我们选择「图片自动轮播-序列帧」组件ID:35,添加到编辑区域中。


image.png


在右侧,点击添加图片。将序列帧图片依次添加,注意添加图片需要宽高尺寸一致


image.png


注意:该效果默认动画时长为3s,想要图片流畅播放我们可以手动更改动画时长,调成为0.1s。


20250911_145122.gif



02




零高布局实现文字流彩
·
·
·
·

底部GIF素材:Apple


这个效果其实并不复杂,只要我们看到了Apple素材就能立马明白。


空白模板 (2).gif
空白模板 (1).png

底图GIF

顶图带有镂空的字体图


我们需要做的就是将这张GIF图放在另一张图的下面。如何在135编辑器中实现呢?


SVG编辑器搜索零高叠高布局


进入SVG编辑器,在「SVG效果」中搜索关键词「零高叠层布局」组件Id:287


image.png


在编辑区域右侧选择「编辑布局内容」


image.png


在布局内容中添加「无缝图点击不可弹出」组件ID:1


image.png


添加GIF图,点击完成。


image.png


回到编辑页面中,零高叠层布局后再添加一个「无缝图点击不可弹出」组件Id:1


image.png


点击「添加图片」,添加顶层图。


image.png


点击预览就能看到最后的效果了。


20250911_154359.gif


一些tips:


顶层图和背景图需要尺寸一致,GIF图需要提前确定顶层文字镂空位置,这样才能完美呈现。


零高叠层布局在前为底图,在后则为顶图。


image.png



以上就是如何利用135编辑器

制作Apple同款效果教程的全部内容了

相信大家已经学会

看似简单的效果

其实暗藏门道

大家也可以多尝试

相信大家可以做出更有趣的内容


·






文章申明:本文章转载自互联网公开渠道,如有侵权请联系我们删除
分享到