主页(http://www.175shouji.com):开放源代码软件为示例Android应用创建自适应图标的过程
无论通过哪个市场或服务分发应用程序,潜在用户都会首先注意到其应用程序图标。在吸引新用户时,第一印象至关重要,这意味着图标是任何应用程序的关键组成部分。而且,不管应用程序的意图如何,创建漂亮的应用程序图标应该是每个应用程序开发阶段的重要组成部分。尽管许多技术应用程序开发人员将图形留给了专门的设计人员,但只要有进行实验和分析的诀窍,了解设计的基础知识并加以应用是任何人都可以做的。应用程序图标也不例外!
本指南将介绍使用开放源代码软件为示例Android应用创建自适应图标的过程。尽管最终结果可能不是您可能需要的格式,但是这里讨论的许多设计技巧在多个平台上都适用。
在使用Android Oreo发布“自适应图标”之后,应用程序图标可以包含三个基本层:不透明的背景层,具有透明性支持的前景层以及定义图标形状的蒙版。所有这些层的尺寸均为108 x 108 dp,尽管用户只能看到内部的72 x 72 dp。另一个区域(由顶部的遮罩切掉)用于UI内的特殊效果,以使图标显得动态。对于未初始化的像素,dp或与显示无关的像素代表所有Android接口的度量单位,并且定义为等于每英寸160点显示屏上的一个像素。)
Google的Nick Butcher谈到了图标中央有一个66 dp的圆圈,这个圆圈没有遮罩可以夹掉,称为“安全区”。这是稍后我们进行实际设计时,图标设计的主要元素所在的位置。超过33 dp半径的任何内容都启用了形状遮罩后,在图标中可能看不到。
弄脏你的手
由于UI缩放使图标更好地成为矢量图像,因此我们将需要矢量图形编辑器来制作图标。Inkscape是开源的,是更昂贵的软件的绝佳替代品,因此对于本教程而言,它是我们的选择。我还设计了一个项目文件可以在这里找到有安全区,并标示出谷歌自己设计的关键线,和一个漂亮的图层蒙版,让我们先睹为快图标的形状。
在Inkscape中打开项目文件并填充并描边(Shift + Ctrl + F),导出PNG图像(Shift + Ctrl + E)和图层(Shift + Ctrl + L)面板后,我们就可以开始了。“层”面板是项目的主要内容,“ 前景”和“ 背景”层用于容纳其名义组件,“准则”和“ 蒙版”则用于打开和关闭(通过单击旁边的小眼睛图标)以供参考。
图标是应用程序身份的表达。因此,它必须兼具应用程序个性的特征和特定于平台的设计准则,就像Android的Material设计语言必须提供的准则一样。出于演示目的,让我们假设我们正在开发一个使用Material元素的气象应用程序。我们可以使用经典的太阳和云彩图案来告知用户该应用程序的用途,并使用投影和几何图形对该基本设计进行一些调整,以使其在Android环境中完美融合。
让我们从设置背景开始,背景由中心的蓝天和黄色的太阳组成。将“ 遮罩”设为“不可见”,我选择“ 背景”图层并使之可见,使用“ 创建矩形和正方形”工具(F4)填充整个画布,然后根据“ 填充和描边 ”将矩形的填充颜色设置为64B5F6FF(浅蓝色)该材料调色板。然后,我选择创建圆,省略号和圆弧(F5)工具,并按住Shift和Ctrl,从关键点的中心到第二大圆圈画一个圆,并将其颜色设置为FFEE58FF,这使我们感到温暖。在任何类型的设计中始终坚持使用基本几何总是好事,尤其是Android的设计语言鼓励简单。为了符合材料准则,我还通过“ 滤镜”→“阴影和发光”→“阴影”为太阳提供了微妙的阴影。
前景
来到前景时,我通过从其他圆的圆周上绘制圆来绘制一组围绕太阳的云,并将它们全部填充为EEEEEEFF。然后,我通过右键单击多个对象并选择Group来适当地对圆进行分组,然后对最后得到的两个最终形状运行阴影生成器。将“指南”变为“不可见”并切换“ 前景”和“ 背景”,可以看到天气应用程序图标的组成层。如果将应用程序的图标拖到主屏幕上,云层将在静止的太阳下层叠!
结果
现在可以将“ 遮罩”设置为可见,并使用“ 按节点编辑路径”(F2)进行调整,以尝试模拟不同形状的遮罩。此外,这两个层可以单独使用导出的导出PNG图像用于使用面板Android Studio中为一个,并一起谷歌播放图标。
在构建产品图标时,始终尝试着抓住应用程序的用途,将其提炼成最抽象的视觉形式,并使用简单的几何图形来表示,这始终是一种好的做法。设计中的任何组件越简单,通常它就会越好,越可靠,这在图形设计中同样适用。在大多数情况下,前景中的对象形状和背景中的纯色或图案(反之亦然)可以很好地工作,但是像在我们的示例案例中一样,如果需要,可以使用另一层对象;过多的堆叠或阴影的使用只会使图标的设计复杂化。
您可以在Material官方网站的 Material界面中阅读有关图标设计的更多信息,并从同一网站上获取免费的系统图标以用于图标设计。