春节做海报借势没创意,教你做一张会动的SVG互动海报

胖友们大家好哇,我是三儿。又是一年春节将至,大家的春节借势海报也越来越卷了,卷完文案卷创意,三儿认识的设计小哥已经快被甲方爸爸逼疯了。

image.png

甲方爸爸说:要好看,要大气


在被毙了十多个方案之后,还是用回了第一稿,这是他做的海报:



甲方爸爸又说了:好看是好看,就是感觉不怎么吸引人,没什么创意


然后,这是三儿帮他做的海报:


·



看起来是不是美观和创意都有了?其实三儿只是给海报加了个SVG组件,让海报动起来,给海报增添了一些互动性。


想知道三儿是怎么做到的吗?来看看下面的教程吧!



图片素材准备



制作这样的动态海报效果,需要先把海报的每个图层或者元素,单独另存为PNG格式(即背景为透明的图片格式)。


素材图如下图所示:





01 进入SVG编辑器

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

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

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



02 添加SVG组件

在『互动效果』栏目下的【点击】里,点击『点击图片依次出现』素材,将其添加到编辑区域。




03 上传图片素材

在编辑器右侧上传之前准备好的背景图和展示图。展示图上传后支持鼠标拖动位置。



04 效果设置

展示图展示的顺序设置

按照展示图的序号大小依次展示,在右侧拖拽上下调整图片的位置即可,序号代表出场的顺序


动画设置

【等待时长】:是上一张图出现后等待多长时间出现下一张图

【渐显时长】:是每张展示图从无到完全出现的过程时长




05 同步/导出到微信公众号

制作好的SVG文章可以通过使用『同步』或『导出』功能,保存到微信公众号平台



好啦,以上就是三儿给大家介绍的让海报动起来的玩法了,大家还有没有什么春节创意的点子,快来留言区告诉三儿呀~



·EN

文章排版由135编辑器提供技术支持

 ■ ■ 

文章评价
登录后可以评论
立即登录
小三儿135主笔
一个酷爱钻研排版的小编!
共221篇文章
最近文章
更多
  • 135编辑器x工信部工业文化发展中心:自媒体时代 以赛促学 搭建未来行业新风向
  • 比格设计x工信部工业文化发展中心:探索融媒体创新知识,挖掘新时代新兴人才
  • 135编辑器x天猫校园CLUB:校园排版大赛成功为600余高校学子赋能
  • 这套护士排版样式,我要安利给所有温柔的人
比格设计
热门工具
135编辑器
领先的在线图文编辑平台原创样式素材,一键套用
比格设计
受欢迎的在线作图网站,新媒体配图、手机海报应有尽有
管小助
企业营销、私域流量运营——站式营销管理平台
推荐文章
广告变现近「2000万」却志不在此! 剧情号“遇见她”目标直播带货
通过内容运营的三个阶段,让你掌握内容运营的核心
用户运营平台产品设计指南
浅谈用户运营中的用户分层
内容运营:戴上写作的六顶思考帽
5000字方法论:4个细节,决定私域能不能赚钱
一文详解:渠道投放工作需要的五种思维
一个案例说明白用户分析怎么用
22条视频,涨粉12.6万,一个女孩子在抖音靠洗车也能月入过万!
用户分群模型,这么建才有用
热门素材样式
运营导航
运营工具
分享到