新媒体颜色SVG排版教程

胖友们大家好啊,我是三儿。后台问爆的SVG教程来啦!事情是这样的,昨天三儿在135平台发了一篇文章《新媒体人の颜色挑战》,喜欢的小伙伴超级多,留言都都都都都是要这个SVG教程。

image.png


甚至还有凶我的



有求必应的三儿今天就来给大家还原一下这篇SVG的制作过程!不要怕学不会,文末还有详细的视频教程噢~


(ps:没看过文章的宝戳下面标题看原文)






以下哪个是网易云音乐的红?


·
·
·
·


新媒体人の颜色挑战:今天来玩个有颜色的游戏



1
图片素材准备


每一个色块都需要准备两张图片,分别是点击前的图,和点击后的图。注意每张图片的宽高尺寸要一致。


点击前
点击后


2
打开SVG编辑器


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

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

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


3
添加组合布局


在『互动效果』栏目下的『组合』分类里,下滑找到『基础布局-一行三列』效果,将其添加到编辑区域;



将布局的宽度比例设置为1:1:1;



点击『编辑基础布局』按钮或双击编辑区域的组件,进入基础布局编辑界面。



4
添加SVG组件


进入基础布局编辑页后,在左侧点击『点击翻转卡片-自定义触发』,分别为每一列布局添加点击翻转的效果;



接下来,在右侧点击『添加图片』按钮,分别上传点击前后的图片;



上传好图片之后,鼠标点击组件,可以设置触发点击翻转效果的热区;



点击『完成』,回到主编辑界面即可。



如果要做成三儿这种6个色块的效果,再按以上步骤添加一个『基础布局-一行三列』布局,添加好素材就可以了。


5
保存/同步到公众号


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



6
视频教程




好啦,以上就是今天的全部内容啦,想要使用这款SVG组件的胖友们可以升级年费超级会员免费使用噢!


如果你还不是年费超级会员,来三儿的杂货铺,花99元就能任选5个你心仪的SVG效果,赶快扫描下方二维码,带走它们吧!




看在三儿努力码教程的份上

来个在看呗~



·EN

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

 ■ ■ 

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