保时捷好会啊,用一张全透明图就把排版整高级了!

原创 收藏 评论
举报 2024-05-20


全透明图片,是能让排版高级感瞬间提升的秘密武器!

全透明图片,顾名思义,就是没有任何背景颜色的图片。我们来看保时捷的一篇排版:

1.gif

*素材来自保时捷中国《全新 Panamera 就是敢!》

组合:上滑组合

编号:11400(组合)


保时捷这篇上滑效果图文,主要分为背景和前景两层内容,背景层不动,前景层可以滑动。
它的巧妙之处在于,看似背景层为一个点击跳转视频号的效果,而其实是前景层的第一屏为点击跳转视频号的效果。

它的制作方法是,在滑动的前景第一屏使用了一个「视频号图片」组件,上传了一张「全透明图片」,而背景图上传的是引导点击跳转视频号的动图。


这就是全透明图片的妙用。


我们再来看两个简单的例子,NewBalance中国的这个双层前景左滑效果,前景第一屏便使用了一张「全透明图片」,这样可以完全展示出背景图。

 2.gif

*素材来自NewBalance中国《NB TALK x和平和浪|韵律生活“浪”出色》

组件:双层滑动-前景左滑(自动对齐)

编号:10270(组件)


一汽丰田这篇,在前景滑动的最后一屏,也是使用了一张「全透明图片」,滑动开始时和滑动结束后都能看到完整的背景,显得高级很多。

3.gif


*素材来自一汽丰田《亚洲龙|春来 气场全开》

组件:双层滑动-前景左滑

编号:10018(组件)


下面一起看下保时捷中国图文的制作教程吧。


详细教程:

工具:iPaiban Pro 黑科技编辑器,网址:SVG.iPaiban.com

组合:上滑组合

编号:11400(组合)

组件:视频号-图片

编号:10228(组件)
第1步:选择组合
登录 iPaiban Pro 编辑器后,点击编辑器右侧「组合」按钮,在「滑动组合」分类中找到「上滑组合」组合,或者直接在搜索框中搜索组合编号11400,点击选择。



第2步:进入组合编辑模式

点击「编辑组合」,进入组合编辑模式。



第3步:设置「滑动布局」内容
①上传图片:在组合编辑模式中,左侧为「滑动布局」设置区域,右侧根据需要还可选择上传遮罩图背景图
遮罩图和背景图根据需要可传也可不传,保时捷中国这篇需要上传一张引导点击跳转视频号的背景图,点击背景图处的「换图」按钮上传即可。如下:


②添加组件:「滑动布局」不局限于无缝图,还可以嵌套使用各种交互效果组件

需要什么效果就在左侧「组件」分类中找到相应的组件拖动到组件位中,然后上传需要的素材即可。


点击编辑器右侧「组件」按钮,在「视频号」分类中找到「视频号-图片」组件,拖拽进组件位。
点击「换图」按钮上传一张全透明图片,并提取输入要跳转视频的视频号代码。


③添加组件位:添加组件位-拖动组件到组件位中-上传图片,每需要一个样式就按照这3步操作:



注意,上滑效果滑动范围的大小,由「滑动内容」中第1个组件的图片尺寸决定。所以我们需注意第1个组件的切图大小,另外步骤3-①中上传的背景图,尺寸最好与第1个组件的图片尺寸保持一致。


第4步:导入公众号后台

内容编辑完毕后,点击左上角「保存并退出」退出组合编辑模式回到编辑器主页面。



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



使用同步功能无需频繁在编辑器和微信后台切换,同步成功后可以立即扫描二维码查看。

本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
转载请在文章开头和结尾显眼处标注:作者、出处和链接。不按规范转载侵权必究。
本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
未经授权严禁转载,授权事宜请联系作者本人,侵权必究。
本内容为作者独立观点,不代表数英立场。
本文禁止转载,侵权必究。
本文系数英原创,未经允许不得转载。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权,侵权必究。

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    暂无评论哦,快来评论一下吧!

    全部评论(0条)