'%3e%3cpath%20d='M9%2021H15'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M5.25001%209.75C5.25001%207.95979%205.96116%206.2429%207.22703%204.97703C8.4929%203.71116%2010.2098%203%2012%203C13.7902%203%2015.5071%203.71116%2016.773%204.97703C18.0388%206.2429%2018.75%207.95979%2018.75%209.75C18.75%2013.1081%2019.5281%2015.8063%2020.1469%2016.875C20.2126%2016.9888%2020.2472%2017.1179%2020.2474%2017.2493C20.2475%2017.3808%2020.2131%2017.5099%2020.1475%2017.6239C20.082%2017.7378%2019.9877%2017.8325%2019.8741%2017.8985C19.7604%2017.9645%2019.6314%2017.9995%2019.5%2018H4.50001C4.36874%2017.9992%204.23997%2017.964%204.12659%2017.8978C4.0132%2017.8317%203.91916%2017.7369%203.85387%2017.6231C3.78858%2017.5092%203.75432%2017.3801%203.75452%2017.2489C3.75472%2017.1176%203.78937%2016.9887%203.85501%2016.875C4.47282%2015.8063%205.25001%2013.1072%205.25001%209.75Z'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_4762_133'%3e%3crect%20width='24'%20height='24'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
'%3e%3cpath%20d='M24%200H0V24H24V0Z'%20fill='white'%20fill-opacity='0.01'/%3e%3cpath%20d='M12%2011C14.2091%2011%2016%209.20914%2016%207C16%204.79086%2014.2091%203%2012%203C9.79086%203%208%204.79086%208%207C8%209.20914%209.79086%2011%2012%2011Z'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M4%2021V20.4857C4%2018.5655%204%2017.6055%204.38753%2016.872C4.72841%2016.2269%205.27235%2015.7024%205.94138%2015.3737C6.70196%2015%207.6976%2015%209.68889%2015H14.3111C16.3024%2015%2017.298%2015%2018.0586%2015.3737C18.7276%2015.7024%2019.2716%2016.2269%2019.6125%2016.872C20%2017.6055%2020%2018.5655%2020%2020.4857V21'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_4762_139'%3e%3crect%20width='24'%20height='24'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
边画边体验：用SVG-Edit绘制应用图标
喵爸联萌
发布于319天前创意设计版霸·老掉牙的设计师·只能依仗AI的艺术家·落伍的伪全栈·除了舌毒嘴贱手残并没有什么别的优点
在互联网的上古时代，是没有SVG这种格式的（虽然2001年就存在了，但2008年才进入W3C标准）。在它之前想在网络上用矢量图，只能依靠Flash这种独行特立的东西。 所以你可能无法理解一个老UI设计师对于SVG这种格式有多么喜爱，用精简优雅的贝塞尔曲线就能完成图形设计，还不存在像素放大后模糊的情况，对于图标绘制实在是太完美了。 然而不知道是技术开发的难度还是交互体难的难度，或者是市场原因，除了Adobe\Corel\Serif这些专业公司的很大部头桌面设计软件，你很难在移动端（尤其安卓端）找到一个得心应手好用的矢量编辑软件。 感谢懒猫之神的跨终端技能，让一些本来只有桌面或网页端才能使用的工具变成应用。 下面的内容我将使用SVG-Edit这个软件绘制一个应用图标。 https://appstore.lazycat.cloud/#/shop/detail/cloud.lazycat.app.svgedit 它有一个早古的和有点另类的界面风格，但该有的功能基本都有了，虽然有的地方略显简陋，有些功能需要熟悉一下才能适应，但在应急的情况下还是完全可以用的，而且各种机制非常适应SVG的格式。  首先让我们调整一下画布的尺寸，由于是矢量格式，所以小一点完全没关系，我设置了480x480，一个正方形的画布就有了。 ||| |---|---| 让我们从经典的矩形开始，绘制好后可以在上面工具条中设置具体的宽高，然后用对齐工具将它放在画面的中心。下方的调色板可以为选中的形状设置颜色。 | |---|---| 工具条最后一个工具是圆角，设置成30，然后按住Alt键拖动，就创建了一个副本，（或在顶部工具条选印章图标生成副本） | |---|---| 将副本缩小后变成白色，放在黑色中央，通常内部形状的圆角要小一些，设置为15。  用钢笔工具开始绘制特殊的形状的顶点，贝塞尔曲线的工具通常体验都很一致，点击即是“尖角”顶点，拖动则会产生“手柄”以控制曲线的曲度。让我们画一个猫耳的形状。 | |---|---| 形状如果不太合意，随时可以双击图形，让它进入编辑模式，然后拖动顶点的位置或手柄，以达到你想要的形状。 | |---|---| 同时选中外框和耳朵，用对齐工具使它们左对齐。 然后绘制另一只耳朵，这个应用唯一缺憾的内容是没有镜象，不过不必太在意是否完全一致，因为图标在缩小后没人会注意到这一点细节。而且不对称有时也是一种美。 | |---|---| 画一个水平式的眼睛，双击进入节点编辑模式，你会发现每选中一个点，它“之前”的线端也会被选中。这应该是SVG格式的特点，所以说应用的开发者还是对格式比较在意的。 | |---|---| 点击添加节点，两个线端的中间就会出现两个新的顶点，将这两个点一起上移，就会发现它变成了^_^ 微笑眼。 | |---|---| 不过我自我否决了这个形状，还是用眯眯眼代替。同时选定两个文件后，可以一起缩放它们的高度，让眼睛更细一些。 | |---|---| 复制一下卡片主体，成组，旋转。双击后可以进入组的编辑状态，让我们将后面的卡做一点微调。 | |---|---| 加一个圆形的鼻子， | |---|---| 一只淡定的狐狸就画好了……  ## 等等？我不是想要狐狸！ 重新画两个圆，一黑一白叠成环形，选中一个节点（及线段）将它删除，另一个点双击即可变成尖顶点，一个半圆就画好了。 | |---|---| 调整一下细节，把嘴加粗，眼睛进一步变细。 | |---|---| 一只可爱的柴犬就画好了。  ## 等等？我要的也不是柴犬！ 重新调整，把白色框变矮（圆角会自动调整，这就是矢量比位图好的地方！），把眼睛变成白色……嗯？ 这次像我要的猫了，可是为什么看着有点奸诈？继续修改，先把鼻子换成猫的三角形，眼睛也换成圆形。 | |---|---| 用钢笔工具画一个潦草的尾巴形状，不用担心，矢量的特点就是你永远有机会调整形状。 | |---|---| 画面少一点颜色，所以干脆改成黑猫特有的黄色眼睛，鼻子的形状过于尖锐，打开编辑模式，选中三个顶点并把它们改成曲线，换上粉色，再细心调整位置，一只可爱的黑猫就画成了。 | |---|---| ## 这次，是我要的。 下面的工作是加入文字，这个应用的名称叫Milka。先找一个合适的字体，然后将它放大放在底端。最后再将i顶端的小点替换成一个大一些的圆点，增加设计的趣味性。 | |---|---| SVG-Edit的窗口左侧有一个图层栏，生成一个新的图层，然后选中文字，把它们加到第二层去。这样元件分类更明确，你可以只编辑你想要编辑的内容。 | |---|---| 现在复制文字元件，加上3个单位粗的圆角边框，再把无边框的文字改成白色，效果就好多了。i的顶端可以设计成猫眼的形状，但是只限独立存在的情况，加在有猫的时候就会比较怪异了，好像猫王爷有三只眼一样。 | |---|---| 把所有元素放大到画布边缘以内，这样它既可以充满空间，双可以更清晰一些。 SVG-Edit有保存为SVG或PNG为主的几种不同位图格式，让我们保存成PNG，然后备份SVG。 | |---|---| 赶紧安装到应用的测试包中，嘿，好像有点意思。  这就是一个简单图标的手工绘制过程，还有一些细节可以再调整，但不妨留到其他应用去测试。 希望你可以 ~~交~~ 学 ~~费~~ ~~废~~ 会！
评论
0暂无评论