图片太多怎么摆有创意,用这个SVG创意排版技巧

胖友们大家好啊,我是三儿。今天又是一期干货教程噢,大家备好零食快乐水,来一起涨涨姿势吧。

image.png

很多胖友在排版的时候,会遇到有多张图片需要排版的情况,三儿一般会建议新手小白们先按最简单方式上下、左右平铺排列,这样最不容易出错。


这么说,难道还有高阶的玩法?先卖个关子,来看看三儿下面做的这个图片展示的案例吧。


(ps:旋转屏幕,横屏观看噢)



点击人物展开图片


·
·



怎么样,用SVG来展示这5张图片,是不是更有创意了!


这种图片展开,人物跟随移动的效果使用的是SVG编辑器的『点击展开同时上层物体移动-自定义触发』组合,展开内容中的图片数没有限制,想放几张就放几张!


想学吗?来看看三儿是怎么做出来的吧↓



使用教程



01 进入SVG编辑器


通过135编辑器左侧入口进入svg编辑器



或者直接在浏览器输入svg编辑器网址进入:

https://www.135editor.com/svgeditor/





02 添加素材


找到『点击展开同时上层物体移动-自定义触发』,点击将组合添加到中间的编辑区




03 添加图片


在编辑页面右侧点击『添加图片』按钮,为素材添加触发展开图和小元素图片




04 设置触发区域


鼠标拖动红色方框,为小元素图片设置触发热区的大小和所在位置。




05 展开动画设置


为展开的内容设置动画时长,数值越大,展开的时间越慢;数值越小,展开的时间越快




06 编辑展开内容


点击编辑器右侧『编辑展开内容』进入新的编辑页面,编辑展开内容



选择『批量无缝图(点击不可弹出)』或『无缝图(点击不可弹出)』素材,上传好图片即可




注意:

该效果展开内容只支持放不可弹出无缝图,除了小元素图片以外的底部所有背景图都需要宽度一致



展开内容编辑完成后,点击页面上方的『完成』按钮,返回主编辑页面




07 同步/导出


制作好的SVG文章可以通过使用『同步』或『导出』功能,保存到微信公众号平台(ps:不知道咋同步和导出的胖友,点击按钮,根据提示操作即可)


 


注意:

如使用导出代码功能,则需根据SVG效果的使用平台(135编辑器/微信后台),选择对应平台的代码进行复制,尽量不要直接粘贴代码,以免效果有误。




以上就是

『点击展开同时上层物体移动』的使用教程

除了这种图片展示方式

SVG编辑器里还有更多

酷炫又有创意的图片展示SVG


『点击放大换图展开』

『自动拼图分裂式换图展开』

『点击开门展开』

......


下一期你想看什么

欢迎在评论区留言呀~


·EN

本文素材仅供交流学习使用

 ■ ■ 

文章评价
登录后可以评论
立即登录
分享到