新媒体颜色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编辑器提供技术支持

 ■ ■ 

文章评价
登录后可以评论
立即登录
小三儿135主笔
一个酷爱钻研排版的小编!
共343篇文章
最近文章
更多
  • 世界人权日微信公众号推文排版素材(宣扬人权精神文案模版样式)
  • 新冠疫情防控图文文章素材(疫情管理宣传文案样式)
  • 国际志愿者服务公众号图文排版素材(社区志愿者宣传文案模版样式)
  • 全国宪法日法制科普宣传排版素材(普及宪法精神宣传文案模版)
比格设计
热门工具
135编辑器
领先的在线图文编辑平台原创样式素材,一键套用
比格设计
受欢迎的在线作图网站,新媒体配图、手机海报应有尽有
管小助
企业营销、私域流量运营——站式营销管理平台
推荐文章
广告变现近「2000万」却志不在此! 剧情号“遇见她”目标直播带货
通过内容运营的三个阶段,让你掌握内容运营的核心
用户运营平台产品设计指南
浅谈用户运营中的用户分层
内容运营:戴上写作的六顶思考帽
5000字方法论:4个细节,决定私域能不能赚钱
一文详解:渠道投放工作需要的五种思维
一个案例说明白用户分析怎么用
22条视频,涨粉12.6万,一个女孩子在抖音靠洗车也能月入过万!
用户分群模型,这么建才有用
热门素材样式
运营导航
运营工具
分享到