这样做公众号的动态头图,超简单还很酷炫!

​胖友们好啊,我是三儿.又双叒叕有胖友来问三儿怎么做动态头图啦!之前三儿已经给大家介绍过了几种做动图的方法(没看过的胖友戳我)。




看最近大家对做头图的热情这么高,三儿又再帮大家想到了一种更简单的方法。其实头图的动效除了用gif动图来展示,还可以直接用酷炫的SVG来制作动效!


像下面这种经典的自动展开动效就可以在SVG编辑器中制作,可以用于作为logo展示,公众号头图、栏目图等等👇


(图源:郑州升达经贸管理学院公众号)


·

(SVG编辑器竖向动态头图效果)


·

·

(SVG编辑器横向动态头图效果)



01
动态头图制作教程


# 图片素材准备

准备两张宽高尺寸一致的图片。





# 进入SVG编辑器

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



或者直接在浏览器输入svg编辑器网址进入:https://www.135editor.com/svgeditor/



# 添加SVG素材

在『互动效果』栏目下的『自动』分类里,找到『横向/竖向动态头图效果』素材,点击将其添加到编辑区域。



在编辑器右侧找到『添加图片』按钮,将准备好的图片分别上传到头图1、头图2。




你还可以根据需要,为SVG设置背景图、背景色、滚动的线条颜色。



# 效果设置

方向设置:可以设置头图滚动的方向是向左还是向右

动态头图边距:可以设置头图距离上下左右的边距数值

其他配置:可以勾选头图是否循环滚动



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

制作好的SVG头图可以通过使用『同步』或『导出』功能,保存到135编辑器或者微信公众号平台。



以上就是SVG头图的制作教程

学会了的胖友赶紧实操起来吧


还想get更多酷炫的SVG效果?

那就去SVG编辑器看看吧~


·EN

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

如有侵权 请联系删除

 ■ ■ 



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