从零开始画图标系列:启动图标设计指南 - 优设网 - UISDC

从零开始画图标系列:启动图标设计指南

2019/05/09 19344评论区

本文我们开始讲解最后一种类型的图标 ── 启动图标。在第一章我们已经对启动图标有了基础的认识,所以下图再简单回顾一遍。

想要在启动图标设计上入门,就要先从规范开始学习,然后了解不同的风格以及对应风格的设计过程。

往期回顾:

启动图标的设计规范

说到启动图标的规范,首先会想到的,就是 iOS 提供的图标栅格。通过这个栅格,会规范图形的尺寸,以及所处的位置。

这个模板和工具图标的使用方法类似,我们在后面的案例进一步讲解。接着,来说明一个更重要的问题,就是启动图标画布的尺寸。

默认的情况下,我们使用 1024×1024 尺寸来设计启动图标,这个?#38382;?#22312; iOS 和 Android 中都适用。

之所以使用这么大的尺寸,是由屏幕分辨率的差异和使用场景导致的。

第一,在手机硬件中,根据屏幕规格的不同,展示图标的?#23548;?#20687;素量也不同,即图标的尺寸会发生改变。

例如在 1x 的屏幕中,图标使用 60x60px;在 2x 的屏幕中,就使用 120x120pt;3x 则是 180×180。

第二,不同设备和显示场景里,应用的图标尺寸也不一样。对于一个真实的项目来说,图标不是只放在手机上运行,无论是 iOS 还是 Android 的 APP 都可以在 PAD ?#20064;?#35013;,图标尺寸规格就不同。并且,在网页或者手机应用商店里,也需要展示启动图标,显示的规格和真实应用列表中又不同。

所以,在 iOS 官方的图标模板中,我们会看见里面罗列了非常多的图标尺寸,我们只需要设计第一个 1024 规格的,将这个图标置入到 PS 的智能对象,或者 Sketch 的 Symbol 中,就可以一次性生成所有尺寸,不需要我们自己手动调整各种规格的图标输出。

应该?#22411;?#23398;这时候还会产生疑问,模板里的画布就是一个正方形,但是大多数手机的 APP 图标使用的是?#27493;牽?#25152;以,应该如何制作这个?#27493;牽?#20197;及它的相关?#38382;?#21602;?

真实项目中,除非项目的特定要求,只需要提交正方形的图形即可,之后无论是 APP Store,还是多数安卓应用商店,都会「自动」对该图形进行?#20204;校?#29983;成符合自己系统的?#27493;?#22270;标。

如果我们想要设计出正方形图形后预览真实的效果,就可以用我们准备的 PSD 模板,将正方形置入到模板中即可。

在设计已经确认以后,我们就要导出这些图标。因为启动图标有很多拟物的设计或会使用真实的摄影素材,所以应用商店提交的格?#20132;?#36873;用位图格式而不是矢量格式,所以导出启动图标,只需要导出对应尺寸的 PNG 即可。

启动图标的设计演示

1. 图标形式

在一些比较基础的应用类型中,通常会直接使用工具图标的图形设计启动图标。因为基础的 APP 服务大多有表意极其清晰的工具图标与之对应,例如邮箱、计算器、音乐、地图等类型应用,企业往往在使用一些抽象的品牌化图形与表意更清晰的工具图标中选择后者。

工具图标的设计其实很简单,就是在画板?#22411;?#25104;两种元素的设计,一个是背景,一个?#24039;?#26041;图标。

背景的设计,比较常见的有两种类型,纯色、渐变。而上方图标的设计里,包含的类型就是我们前面讲过的几种常见的工具图标。所以你看,只要将它们组合,就可以很轻松地设计出符合主流特征的启动图标。

所以,如果我们要设计一款?#22987;?#24212;用,那么就可以先画一个线性的?#22987;?#22270;标,然后再将它置入格线模板中确认大小,再分别为它们上色,就可以完成设计了。

2. 文字形式

文字形式的设计,背景?#34581;?#26041;一样,也只使用纯色和渐变,但这种设计的主要?#35757;?#22312;于字体的设计上。

想要放文字,大家首?#35748;?#21040;的肯定是直接用字体打进去,但是切记,字体的商业版权问题是不能视而不见的。选择字体前,一定要关注该字体是否是免费的,百?#28982;?#32773;官网都可以查询。或者一开始就在免费字库中挑选,如思源黑、思源宋、王汉宗系列等?#21462;?/p>

可商用字体合辑:《我整理了200款免费商用字体,放心下载不会侵权!》

如果觉得直接使用字库文字太没有设计感,?#24378;?#20197;选择做一次字体的二次创作,对于新手来说简单一点。即一开始挑选一个合适的字体,然后在 AI 中对该字体进行临摹,再对细节进行重新加工,?#28909;緋南?#30340;调整,笔画粗细的调整等?#21462;?/p>

?#28909;?#35201;设计一个我的应用,那么我可以取「超人的电话亭」的第一个字──超,作为图标上方的文字。然后我选用「方正兰亭大黑」作为基础字形,对它进行重构即可。

最后建议,如果不是一些比较严肃或是传统的题材,尽量不要选?#30431;?#20307;或?#24378;?#20307;进行设计。

前往优设字体设计专题学习更多干货:「字体设计」

3. 拟物形式

虽然现在整体设计环境中,拟物已经被扁平取代,但不代表它已经消失,或是在形式上不合理。?#23454;?#30340;拟物设计会让我们对应用功能的认识更清晰,且更有趣味性。

还?#25250;?#24815;例,我们从简单的拟物设计入手。目前拟物的领域中,使用最普遍的风格?#24425;?#26032;手最容易学习的风格,?#30784;?#36731;拟物」的设计。这种风格需要刻画的细节相对较少,更易于我们掌握,只要能用好渐变即可。

?#28909;紓琲OS 的官方应用──文件,图标的形式?#22836;?#21512;轻拟物的特征。简单分析一遍,即在确定完轮廓后,通过渐变填充来表示物体本身的高光和阴影,并添加投影来制造立体感。

如果要设计一些更复杂的拟物图形,可以通过多做拟物图标的练习会更有帮助。在今天扁?#20132;?#22270;形当道的环境中,设计得精良的拟物图标往往可以在满屏的扁平图标?#22411;?#39062;而出,助于吸引用户启动应用。

总结

启动图标的介绍到这里就结束了,新?#25351;?#25484;握的知识点并不多。无论是更好的字体、图案、插画,都已经进入 LOGO 设计的范畴。如果要在这个领域进一?#25945;?#21319;,那么针对性训练的效果反而不理想,需要长期积累视觉、图形的整体设计能力。

欢迎关注作者的微信公众号:「超人的电话亭」

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.51294208.com/start-icon-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 设计师干货 界面设计 排版布局 职场 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 设计规范 海报设计 用户体验设计 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立?#20004;瘢?#19968;直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里

云南时时彩开奖今天
腾讯微扑克官方网站 上海时时乐178 内蒙古时时彩1019号 竞彩足球让分胜负技巧 彩宝贝排列五走势图连线 2019年白小姐奖特 168澳洲幸运10开奖网 极速时时彩是不是假的 浙江6十1几个号码有奖 江苏快3杀号技巧 篮球胜分差奖金是多少 浙江快乐12选5遗漏数据 娜莎解曾道人一句话 任选9场18134期开奖结果 海南七星彩规律图准确