135编辑器svg教程

你与排版大神之间,还差学会使用SVG的距离,如果想要排版再往上提升一步,做出更多有创意的推文,那就很有必要掌握SVG的玩法,作为新手小白进阶的第一步,当然是先熟悉我们的SVG编辑器了

新手入门指南
第七期内容
135编辑器

你与排版大神之间

还差学会使用SVG的距离

如果想要排版再往上提升一步

做出更多有创意的推文

那就很有必要掌握SVG的玩法

作为新手小白进阶的第一步

当然是先熟悉我们的SVG编辑器了

所以今天三儿会给大家

仔细讲解我们的SVG编辑器

本期篇幅较长

大家要耐心看下去哦




一、SVG编辑器入口


在编辑器界面的左侧菜单栏选择【SVG编辑器】,跳转到SVG编辑器界面后,点击【进入SVG编辑器】即可打开。


image.png


image.png




二、SVG编辑器界面介绍


在这一部分,三儿会带大家来认识我们的SVG编辑器界面,我们的编辑区域大致可以分为四个版块:功能区、效果选择区、效果编辑区域、导航栏工具区,接下来三儿会讲到如何搜索SVG组件、怎样查看教程、怎样导出到微信后台等操作。


image.png



1.SVG类型


在我们SVG编辑器中有两类SVG效果,第一个叫做SVG组件,另一个则是SVG样式模板。


image.png


SVG组件:在SVG编辑器界面的【互动效果】版块中,SVG组件相当于一个预设好的框架,里面的内容需要你自己添加,如图片、动画时间设置等,可发挥空间大,适合需要想自制效果样式的小伙伴。


image.png



SVG样式模板:SVG样式模板是一个完整的作品,包含了很多重要节日节点主题的效果,大家只需要对里面的字体、图片等进行微调,就可以直接使用。


这类型的SVG效果除了在SVG编辑器的【样式模板】版块中可以找到,在编辑器界面的【样式】—【SVG】中也能进行选择使用。


image.png


(方式一)


image.png


(方式二)



2.搜索SVG效果


搜索SVG组件和SVG样式模板,有两种种方式,第一种是在搜索框输入关键词或ID号码,第二种是通过点击标签来筛选。


WechatIMG407.jpg



ID查看方法:当你将鼠标放在某个效果上时,右侧弹出的面板上就可以查看ID号码。【互动效果】和【样式模板】版块下的SVG效果查看ID号码的方法相同。


image.png


image.png


三儿在这里要特别提醒各位宝子,这两类SVG效果的ID号码是不一样的,所以【样式模板】下的SVG模板的ID号码要对应在这个版块下进行搜索,如果到【互动效果】版块进行搜索则无效,反之亦然。



3.上传图片


在SVG编辑器的左侧菜单栏有【我的图片】选项,点击进入后,即可在里面上传你需要的图片。


image.png



4.查看使用教程


我们的【互动效果】版块下的SVG组件都是有对应教程的,查看教程有两种方式


第一种,当你将鼠标放在该效果上,就会弹出面板,点击【查看教程】即可跳转到教程页面。


image.png



第二种,将该效果放入编辑区域后,选择右侧的菜单栏的【教程】,同样可以进入到教程界面。


image.png



5.预览SVG效果


这里三儿要介绍两种预览情况,第一种是如何预览SVG组件效果,另一种是如何预览自己制作好的作品效果。


第一种:当你想了解该SVG组件可以实现哪种效果时,就将鼠标放在该效果上,右侧弹出的面板中会出现二维码以及效果缩略动图,如果想更直观的体验和查看效果,就可用手机扫码浏览。



image.png



第二种:想要预览自己制作好的作品效果,可以点击顶部导航栏的【预览】查看。有三种形式浏览作品,第一种是通过手机扫码预览,第二种是通过电脑端网页查看,第三种在SVG编辑器的预览窗口直接查看。


image.png


image.png




6.保存/查看/投稿作品


01

如何保存作品


在编辑界面制作好作品后,可以选择导航栏左上角的【作品标题】,为其命名。再点击顶部导航栏的【保存】就可将该作品保存在SVG编辑器系统中。


image.png



02

如何查看保存好的作品


制作并保存好的SVG作品可以在SVG编辑器左侧菜单栏中的【我的作品】中查看。


image.png


03

如何投稿作品给别人


想要将作品投稿给别人,在【我的作品】版块可以实现,点击该按钮,输入好对方的ID号,即可将作品传给对方。


image.png



7.如何同步到公众号后台


这个问题应该是新手小白最迫切知道的,所以在这里三儿分享两种方法可以将制作好的SVG效果同步到公众号后台。


01

第一种


直接将制作好的效果同步到微信后台。


点击页面右上角的【同步】按钮将SVG效果同步到公众号后台。


image.png



将封面、标题等填好,选择需要同步的公众号后,点击同步即可。(ps:可点击【授权公众号】进行绑定,但需要管理员授权才可以哦)


image.png



02

第二种


第二种方法是通过复制粘贴代码到公众号后台。


在制作好SVG效果后,点击最上面的导出,选择【复制代码到微信后台】或【复制代码到135编辑器】。


image.png


WechatIMG408.jpg


接下来的步骤,由于篇幅有限,三儿就不过多赘述,大家可以点击面板中的【如何使用】来了解详细的操作步骤。


image.png




8.智能创作SVG效果


三儿要给大家隆重介绍一个智能黑科技功能,那就是智能SVG创作。大家只需要提供符合要求的图片,智能创作中心就能为你随机匹配相应的SVG效果,在你没有创作思路的时候,无疑是你的最佳得力助手,就算你是新手小白也能轻松驾驭。


⑴ 智能创作位置:在顶部有一个【智能创作】按钮,点击就可进入。


image.png


⑵ 在智能创作中心,上传我们的图片素材,静待几秒,就能出现智能生成的SVG效果。(这里上传的图片素材的宽高需要保持一致)


image.png


录制.gif


GIF图展示↑


每组效果都有对应的预览二维码,我们可以通过手机扫码,更清晰地查看SVG效果。


同时每个生成的效果都支持再编辑,点击【编辑】按钮就会跳转到SVG编辑器界面。


image.png



如果想要更多的效果,选择【换一批】就能出现一批新效果。


image.png





以上就是三儿给大家分享的

有关SVG编辑器的全部内容了

本期内容较多

但都是干货

如果大家还有什么疑问

可以在评论区留言哦

如果觉得还不错

记得点赞+在看哦



END



文章申明:本文章转载自互联网公开渠道,如有侵权请联系我们删除
文章评价
登录后可以评论
立即登录
分享到