在浏览器中设计SVG图形

null

Vecteezy编辑是一个免费的矢量编辑套件,可以在浏览器中运行。本教程介绍了可用于编辑站点上任何向量的基本形状工具和编辑工具。这样,您可以相对轻松地构建徽章,按钮,徽标或其他任何内容。

此编辑器的GUI与Adobe软件类似,因此如果您已经使用Photoshop或Illustrator,您将更容易学习绳索。但即使是完整的初学者也可以深入研究并从头开始学习基础知识。

我们将使用Vecteezy的这些购物图标。

只需访问图标页面,然后点击“编辑和下载”按钮即可。这将在浏览器中打开编辑器,以便您可以自定义和构建这些图形。在本教程中,我们将向您展示如何抓取其中一些图标并将其转换为更大的进度条图形 - 这是任何电子商务主页的完美选择。

因此,在Vecteezy Editor中打开购物图标,我们就可以开始了!

01.选择图标

Click into the icon group and select one icon, then click Duplicate at the top

单击图标组并选择一个图标,然后单击顶部的“复制”

双击图标组以选择所有图标(可能需要双击两次)。我将在本教程中使用三个特定图标:购物袋,信用卡和礼品盒。

选择购物袋,然后单击页面顶部的“复制”。这应该会给你一个整个图标的副本。将其向上移动到顶部并复制其他两个。

注意:礼品盒没有完全分组,因此当您点击复制时,您只会选择一个图标。要解决此问题,只需在整个礼物图标上拖动一个选择框,然后在顶部单击编辑 - >组。现在,您只需单击一下即可复制整个当前图标。

复制完所有三个图标后,双击空白画布上的任意位置。这会将您带到图标组之外,以便您可以在页面上选择其他对象。如果单击任何旧图标,则将选择整个组。这是完美的,因为你想要将它们从画布上拖下来让它们看不见。

02.清除垃圾

Change the background opacity if you want it to be white instead of transparent

如果您希望它是白色而不是透明,请更改背景不透明度

双击每个复制的图标以访问其中的各个形状。我们只需要主图标,因此您应该选择并删除彩色圆圈背景和阴影。

要执行此操作,只需放大非常近并选择背景圆圈即可。然后按Delete键,它将消失。

如果整个图标消失 - 请不要惊慌。只需单击顶部附近的撤消或按Ctrl / Cmd + Z然后重试。您可能需要双击才能进入图标组。

到最后,您应该准备好三个干净的图标。如果您不喜欢透明背景,您可以随时访问左侧菜单中的背景面板(第三个按钮),并将纯白色背景的不透明度增加到100%。

03.添加文字

Add text labels under each icon with the same font settings

使用相同的字体设置在每个图标下添加文本标签

这个进度条将非常简单;只是宣传一个电子商务商店的三个阶段。

为了强调这个过程,让我们在每个图标下面添加标签。在左侧工具栏中,找到“文本”工具(第二个按钮),然后单击包图标下方以添加文本块。添加文本“SHOP”并按键盘上的Enter键。

这会自动选择文本,以便您可以移动它并找到一个好位置。但是,如果再次选择“文本”工具,则可以更改字体系列,颜色,大小,字母间距和其他功能。

我使用的是Open Sans Semi-Bold尺寸30,字母间距为-1.50。文字颜色是#525252。

复制此文本两次,并将重复项放在其他图标下。使用信用卡图标下的文字“PAY”和礼品盒下的“RECEIVE”。

您应该使用“选择”工具重新定位文本上方的图标。此外,如果可能的话,将每个图标间隔开等距离。

04.调整图形

Shift+click to select the ribbon shapes and change the background colour

按住Shift并单击以选择功能区形状并更改背景颜色

在创建进度条之前,您可以在图标中更改您喜欢的任何颜色。

要执行此操作,请双击以输入任何图标组,然后选择要更改的任何形状。在这种情况下,我将编辑礼品盒功能区,将颜色从蓝色更改为绿色。

进入图标组后,按住Shift键同时单击以一次选择多个项目。我将选择水平和垂直矩形,以及顶部的弓形。

在“选择”面板(左侧菜单中的第一个图标)中,找到“填充”设置。您将看到默认颜色为#2e3192。单击“填充”菜单以访问下拉色轮。在这里,您可以拖动以查找所需的颜色,也可以直接输入十六进制代码。

输入#518531并按Enter键。这应保存结果并一次更新所有三个形状。您可以随意使用您想要更改的任何其他颜色设置!

05.启动进度条

Click the top-left circle in the Elements panel to add a new circle to the canvas

单击“元素”面板中的左上角圆圈,将新圆圈添加到画布

要创建进度条,只需要两个形状:圆形和矩形。值得庆幸的是,这些都可以在“工具”菜单最底部的“元素”面板中找到。

单击“元素”面板,然后选择圆形,这是列表中的第一个项目。它会自动在工作区的中心放置一个深灰色圆圈。

您可以通过拖动角落或选择边界中的小白方框来调整圆的大小。这很好用,但它不如直接调整大小功能那么精确。

因此,请返回“选择”工具,确保选中新的圆圈。在“选择”工具面板的最顶部,您应该看到具有高度和宽度值的选择大小。

在两个字段中输入100,然后在第一个图标下拖动第一个圆圈。

06.复制圆圈

Resize the circle and duplicate twice, then move them under each shopping icon

调整圆圈大小并重复两次,然后在每个购物图标下移动它们

选中圆形后,单击顶部菜单中的“复制”。现在,重新定位此副本,使其与原始圆圈紧密对齐。尝试将其放在第一个圆圈的顶部,使它们看起来像一个形状。

现在,如果按住Shift并单击,则可以将此复制圆水平拖动为直线。这使您可以将所有圆圈完美地对齐在一起(或者足够接近一个)。

这样做直到你有三个不同的圆形状,每个100 X 100,每个圆形状放在三个图标下面。

07.添加一些连接线

Select the rectangle shape and arrange it behind the three circles

选择矩形形状并将其排列在三个圆圈后面

移回“元素”面板,找到方形。单击以在画布上添加一个方块。

选择此形状后,返回“选择”工具,找到宽度/高度尺寸面板。由于此矩形应跨越进度条的整个宽度,因此我们只需要一个非常长的形状。因此,将高度更改为10,将宽度更改为将所有圆圈连接在一起所需的任何数字。我的宽750。

现在,将此矩形放在适当的位置,查看“选择”面板的底部,其中显示“排列和翻转”。单击顶行中的第二个图标,可以将任何选定的形状移动到其他形状后面。

注意:您可能需要单击“下”按钮几次才能获得所有三个圆圈后面的矩形。但现在连接矩形仅在圆形之间可见,因此我们可以稍后在圆圈中添加文本。

08.重新着色

Recolour all the shapes and include a small stroke on the three circles

重新塑造所有形状,并在三个圆圈上包含一个小笔划

当前进度条看起来有点暗,所以让我们稍微改变颜色。

单击以选中长矩形,然后在“工具”面板中找到“填充设置”。将颜色更改为#c5c5c5并按Enter键。

现在,单击画布外的任何位置以取消选择矩形。我们还想改变圆形颜色,它们应该更亮,使用深灰色作为边框颜色。

按住Shift键,然后单击三个圆圈中的每一个。将填充颜色调整为#f5f5f5,按Enter键,然后单击X图标以关闭填充颜色选择面板。下面,您将找到笔触设置。将笔画填充更改为#c5c5c5并按Enter键。

单击X图标以关闭此颜色选择面板,然后将笔触大小更改为6.在此阶段,我还建议通过拖动选择框并转到编辑>组来将所有圆和矩形组合在一起。现在,您可以轻松地一次调整所有形状的位置。

09.添加进度步骤

Add a text label into the first circle and duplicate the text for all three shapes

在第一个圆圈中添加文本标签,并复制所有三个形状的文本

让我们在每个圆圈中添加一些数字以完成进度条设计。

单击“文本”工具,然后在第一个圆圈中输入数字1。我正在使用Open Sans Extra-Bold,尺寸为45,颜色为#c5c5c5,以匹配边框。拖动此文本,使其位于圆的中心。

复制文本元素并将其移动到文本“2”的第二个圆圈中。对文本“3”的第三个圆圈执行相同操作。

10.突出显示第一步

Recolour the first circle blue so it appears like the active progress step

重新着色第一个圆圈蓝色,使其看起来像活动进度步骤

作为点睛之笔,让我们使用浅蓝色轮廓突出第一步。首先选择刚刚创建的数字“1”,然后将填充更改为#4976a3。然后单击以选中文本后面的圆圈。找到笔触设置并将笔触颜色更改为#4976a3。这应该在圆圈周围添加深蓝色边框。选中圆圈后,单击“填充设置”并将颜色更改为#e2ebfa。

就是这样!现在,您可以使用右上角的“下载”功能将其导出为PNG / JPG。您还可以隐藏白色背景以将其导出为透明PNG,并使用“背景”面板(左侧菜单中的第三个按钮)更改整个文档大小。

或者,如果您希望将其保存以供将来更改,请转到文件>稍后保存。您必须创建一个免费的Vecteezy帐户,但这是保存您的辛勤工作以备将来参考的好方法。

这篇文章最初出现在网络杂志问题295.买这里

阅读更多:



翻译字数超限