SVG创意推文—『点击开窗』教程

最近这段时间,各大官媒齐齐出手,朝着SVG创意推文进军。

640


嘿,胖友们大家好呀,我是三儿。


好久不见,胖友们有没有想我呀!最近这段时间,各大官媒齐齐出手,朝着SVG创意推文进军。之前人民日报推了一篇《点亮武汉》在当时引起了不小的轰动,三儿也连忙出了一篇教程。


>>>>点我查看《点亮武汉》的教程


前两天,新华社又推了一篇『点击开窗』的推文,用户可以点击打开窗户,看到各地的美景。


为了让胖友们更直观的感受推文的效果,三儿将这些图做成了动图,胖友们可以通过滑动来查看哦!


grey.gif
grey.gif
grey.gif
grey.gif
grey.gif
grey.gif
grey.gif

<左右滑动查看更多>



怎么样,是不是超级好玩,那么今天,三儿就来教你们如何制作这种点击滑动的效果吧!


话不多说,教程来咯~



grey.gif


点击开门样式

ID:98647


【样式作用】:点击窗户,样式两侧内容会自动滑开,显示出底部的内容,可以搭配无缝样式制作出更多有趣味性的推文。


【使用说明】:新版的SVG样式均可以在『动画』按钮中完成所有的设置。


【这些样式也可以用这个教程哦】样式ID:98646




01
样式展示

本样式由135编辑器出品,不允许任何第三方编辑器抄袭使用,违者必纠。


👈点击有惊喜哦👉

grey.gif
grey.gif

图片切换样式ID:98647



02
样式教程(文字版)


由于编辑器升级了专业版,简化了部分svg样式的操作流程,使得修改svg样式大部分参数无需再通过html代码实现。本点击样式所有参数都可通过动画设置调整。


grey.gif


将编辑器切换到专业版模式,点击样式区域弹出对话框,在【全局样式】中点击动画按钮,开始修改SVG样式参数。


grey.gif


这里需要注意的是:不是所有样式都有动画选项哦,只有SVG样式会有动画显示!








2.切换完成后,我们就可以对样式进行修改了,在左侧搜索样式ID『98647』,将样式插入至编辑器中。


grey.gif


这里需要注意的是:编辑时请不要点击图片区域,以防触发动画保存失效。








3.接下来我们要准备三张图片,两张开门的图片以及需要展示的背景图,这里需要注意的是,滑动的两张图合在一起时需要和底部的图片宽高一致。


grey.gif

▲滑动图片和底图展示


如果胖友们想直接使用我们样式里的滑动图片,那么需要注意的是,将底部图片修改为样式素材中底图的尺寸即可。


胖友们可以在这里查看底图的尺寸哦!



grey.gif








4.点击选中样式(在样式周围出现红框时,才算选中哦!),在弹出的菜单栏中,选择『动画』按钮,进入动画设置界面。


grey.gif


这里需要注意的是:只有SVG样式才会有动画按钮哦,普通的样式是没有动画按钮的!








5.在动画设置界面,我们就可以对样式的内容进行设置了,胖友们可以对顶部的文字,背景图片,以及左右两侧滑动图片进行更换。


grey.gif


在更换左右两侧图片时,我们需要注意的是,在上传图片界面需要选择『自由』进行上传,才会让图片更好的适配哦!


grey.gif








6.设置完所有内容以后,胖友们可以在右侧的预览框中进行测试,也可以返回编辑器界面,点击右侧菜单栏中的『手机预览』进行测试。


grey.gif



注意事项:

grey.gif


这里需要注意的是,由于微信后台限制,所以排版完成后的推文需要使用保存同步功能,如果使用复制粘贴会导致样式失效哦!


grey.gif



现在SVG推文这么火,还不赶紧学会了给用户们露一手?



04
福利时间


想学习更多的SVG样式吗?想制作出更好玩的互动排版吗?


那还等啥,赶快去评论区留言,说出你最喜欢用的SVG样式,我们将在评论区抽出10位胖友,送出岩植主编的《SVG变形记》课程哦!


grey.gif


grey.gif


好啦,今天的教程就到这里啦

胖友们学会了吗?


如果你还有关于其它样式的疑问

都可以留言告诉三儿哦


点击https://www.135editor.com/users/invite/ddb12a17ce400c35fe041d275a578351,注册135编辑器,即可获得7天VIP会员

grey.gif


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