人升开发日志#1 | 6/1 APP 图标设计

名字由来

初想过的项目名是“升级人生”、“游戏人生”之类,就想到了以”人“字为原型设计 APP 图标。

仅有一个”人“字未免显得有些单调,于是乎想到”升“字,那么就把”人“字的两笔换成向上升的形态?

APP 图标就由此诞生了。

最终稿是这个样子的:

接下来说说设计的全过程吧。



绘制格式选择以及工具

图标的绘制一般选用矢量图,原因:

  1. 图标一般需要多种规格,矢量图不失真方便调整
  2. 图标一般形状简单,矢量图绘制更为方便


具体用什么格式呢?

我们采用了 svg 格式。

第一个原因是,Android 支持将 SVG 转换成 VectorDrawable。今后开发可能会用到。

第二个原因是,

我们设计的图标期望是 Material Design 设计风格的。

而我所想到的就是拥有着朝向右下角阴影风格的图标,也就是最终稿那个样子。

而且没有检索到具体要怎么做到这种效果,也没有找到这种效果具体的名称。

只模糊地得知可以利用路径的并且差操作做到?

不过,我找到了一个可以简单生成这种风格的网页工具,该网站上传的文件必须是 SVG 格式。


那么,该用什么矢量图绘制工具呢?

首先想到的当然是 Adobe 的 illustrator

其次,我想到之前做 Android APP时候用到的一款免费开源的矢量图绘制工具 Inkscape 。

最后决定用 Inkscape,方便快捷而且符合操作习惯。



开始绘制

首先,先造个“人”字。

首先想到用字符转换矢量图路径,但可能不太适用?很快就放弃了这个想法。

然后尝试了一下用钢笔工具(在 inkscape 里,被称作「绘制贝塞尔曲线和直线」工具)绘制,发现不会用emm。

最后采用了「绘制手绘线」工具,将平滑调整到最高,一次画一条边,勉勉强强画了一个「“人”形 with 两个箭头 」出来。


接着,使用「选择并变换工具」 以及 「通过节点编辑路径」工具进行微调,删除不需要的路径节点,调整曲率等等。

最后封闭路径填充任意一种颜色。



MD风格图标生成器,启动!

无限转圈…

MD风格图标生成器,关闭!

经过测试,发现刚画出来的稿子可以生成,微调之后的不能生成。

而且,此时是没有错误提示的?

按F12调出开发者工具,可以看到 js 文件执行过程中抛了个异常。

当时还随手画了一个路径拿去测试:



问题发现,开始清除

最后发现问题在于必须存在单条封闭路径

而我们的矢量图虽然有封闭路径,但其是由多条路径组成的。

也就是说用「通过节点编辑路径」可以看到路径是断开的。

解决方法也很简单:选中所有路径然后点击菜单中的路径合并即可。


配色

导入之后,可以进行颜色位置之类的调整。

打算采用蓝白配色,在一个MD配色网站挑选具体的RGB值,最后采用的是#29b6f6

因为是亮蓝色,所以阴影强度也要适度调低。

位置的话,一开始想的是左边元素较多,所以稍微偏右。

然后发现实际效果似乎还不如直接居中,于是就采用了居中。



新增元素

做着做着的时候(其实是遇到坑的时候),又浮现了另外一个想法:

以阶梯做图标,还可以加上一个上阶梯的小人。

因为绘制小人不太容易,于是从现有的图标库中检索。

我们使用的是iconfont,检索关键字为楼梯

最后也就是这个样子:


后来,我们打算将这个小人加到我们的图标上。

做法是,在网站生成的svg上进行再修改:

  1. 首先要把小人抠出来。

    摸索出的一个做法是,使用「擦除现有路径」工具,擦出一条边界,然后使用菜单菜单中的路径分离,最后使用「通过节点编辑路径」工具,删掉擦除出现的一堆节点,使边缘平滑。

  2. 将我们的 svg 进行分图层处理,将小人放到图案和背景圆之间。

  3. 使用滤镜,添加小人阴影。

最终效果:


当然,问题又来了:

小人和图案的阴影并不统一。



砍掉重做

为了解决这个问题,在上传到那个网站工具之前,就要把小人加到图标中。

再次抠图,将小人放到合适的位置。

然后全选,使用菜单中的路径并集分离工具,

再次上传到网站中。

此时,阴影已经统一了:



加一级层次

也曾纠结要不要去掉左边的箭头,因为去掉之后更像“人”字,而且左侧的箭头有种会阻碍小人上行的感觉?

纠结一番后决定,把小人所在的箭头提升一个层次,就不存在阻碍感了。

具体地来说就是加一层阴影。


因为我们一开始是没有分图层的,所以要单独把箭头抠出来。

我们采用的做法是

  1. 先复制整个图案(不含阴影)到新的一个图层里。
  2. 然后用「擦除现有路径」工具,用跟之前类似的方法把箭头和小人抠出来,并且加上一层阴影。

这就得到我们的最终稿了。

最后再依次导出各个规格即可。

人升开发日志#1 | 6/1 APP 图标设计

http://sarasarasa.net/post/1188c9f1.html

作者

AyagiKei

发布于

2018-06-02

更新于

2021-08-10

许可协议

评论