打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
UI设计 | 原来设计师是这么设计图标的

原文地址:http://designmodo.com/create-app-icon-illustrator/

翻译:MartinRGB

当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放

遥远 陈泳弘 - 陈泳弘精选吉他曲

在这篇教程中,我将展示我为聊天应用设计图标的流程和心得,我用了一个“邮差鸟“作为寓意,来传达一种“信息传达“的理念。这个教程将具体展示从草图,到矢量化图标的过程。

绘制草图

虽然草图是只是简略用来表达创意,表现可以很丑陋,很简洁,但是在脑海中思路必须清晰,务必将视觉概念逐步简化,将视觉元素尽可能的提炼,追求“用少诠释多“的境界。视觉元素提炼的越精纯,所传达的理念便会越清晰。


 

还有一点要提的是,尽量保持原创性。尽管对于一些新手来说,做到这一点可能不是很容易。因为现成的诱惑往往不可抗拒——“我借鉴一下别人的作品,马上就能获得不错的视觉效果”(比如说上Dribbble去逛逛),尽管Dribbble伤有很多优秀的作品,但是你看到的只是结果,理念迭代过程是你所看不到的。比方说一副简约的作品,你上去就临摹,可能临摹到的只是其“”形“,而设计者在过程中,很可能经历过多次减法设计,他考虑到了什么,这都是你不知道的。所以,尽量保持原创,完完整整的把思考——设计——修改——成品的过程走一遍。好的设计作品,是需要花时间去琢磨、修改的。

为了保持原创性,我的建议是在绘制草图之前不要去看别人的作品。这样才会保证目标的专一性,无干扰的表达灵感。


 

而本教程所涉及的案例中,我最开始希望用草图绘制一个鸟嘴,加上邮差的形象,让人明白,这是一款用来沟通、交流的应用。我没有完整的画一只鸟,而是表达了最传神的部分。

我希望草图能够尽可能的简单,因此草图没有附带太多的细节。一旦草图数量足够后,开始选择一种设计概念,这时我就会去做一些调查。

 

 

将所有版本的草图整理到一起,然后挑选一个作为概念

调查研究

调查研究研究什么呢,主要收集一些能够提高效率的模板、动作,收集一些设计规范(iOS,ANdroid,Windows),选择图标将要适配的平台。然后开始着手情绪板的创建,收集一些能够启发你灵感的作品,以及相关的文章和书籍——我用Ember创建情绪版,这是个非常棒的应用,能够很方便的收集灵感。

 

 

这是我创建的情绪版,可以借鉴其中的配色、线条、形状,以及风格


 

开始用AI绘制矢量插画


 

下面我将一步一步描述流程

步骤 1:设定工作区域

打开AI,cmd+N创建新新文档。尺寸1024x1021px,图标尺寸的最高规格。这份教程,设计的图标将应用于iOS设备中。因此需要参考苹果的iOS设计规范。

首选项>参考线和网格,间隔10px,子网格10px,视图>显示网格,视图>对齐网格

窗口>工作区>基本功能,确保创作时,可是范围的最大化。

 

 

创建新文档,设置尺寸和色彩

步骤2: 导入草图


 

文件>置入,选择草图,然后导入,勾选链接。图层不透明度设置为50%,将图层命名为“草图“,然后锁定之。然后在草图图层的上方创建新图层,开始勾勒图标。

建议先用红色打打样,因为红色比较明显,能够很好的和草图对比,从而比较形状。建议在正式绘制之前,先分析一下草图,哪些形状可以用形状工具实现,哪些形状需要用钢笔工具绘制。

 

 

花上几分钟分析一下草图,会对创作大有帮助


步骤3:将每个元素放置到属于自己的图层中

组织文件

一旦完成了准备工具,开始组织文件,然后将元素分别放到属于自己的图层中,然后命名。图层堆叠顺序如下:

    1.    帽子;

    2.    头发;

    3.    眼睛;

    4.    鸟嘴;

    5.    脖子;

    6.    头部;

    7.    背景;

    8.    草图.

 

 

图层堆叠顺序

 

步骤4:结合形状

 

使用形状生成器工具

 

结合形状方面,其实有比路径查找器更顺手的工具。叫做形状生成器,可以非常方便的结合、分离形状,而且更直观。


 

选择形状,选形状生成器,拖移到其他部分,便会看到箭头伤的加号,代表相加,若是按alt则相减。


 

 

 

是哟功能形状生成器工具来结合形状

 

步骤5:上色

色彩种类要收敛

 

此次设计的灵感主要来自iOS7的配色,我挑选了一些。颜色不要太花哨,要简约,这样形象看起来才明晰。

 

 

灵感来自iOS7的配色方案

这便是我的配色方案,,这样无需投影便有深度感。窗口>颜色参考,便可随心所欲的开始色彩调节,在颜色参考的色板中,点击右上角的显示选项,淡色/暗色,左面色调75%,右面100%

 

 

完成上色后的结果

 

步骤6:添加细节

 

赋予鸟儿性格

下一步就要添加细节了:比如说眉毛,赋予眼睛深度感的投影,多尝试一下,以求最好的结果。不过细节不要添加过多,以免画蛇添足,增加了视觉的复杂性。此次设计中,我控制了自己的欲望,没有增添过多的细节。让整体风格更贴近扁平化的简约特点。


 

为了让整体更有深度感,打开窗口>外观,鸟的主体形象外轮廓加一层6pt的深红色描边。一些细节处加上投影,如下。

 

 

描边

 

 

投影


 

步骤7:打开模板或自己做一个


 

我是用了Michael Flarup制作的iOS7图标模板,很不错的模板,Vimeo上有模板教程。

用完模板后,确保插画在PS中图层堆叠顺序正确就可以了。

 

 

打开iOS模板,放入自己的作品即可

 

 

PS动作,可以提高你的工作效率

在设计之前读读平台规范,绝对有益无害。

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
有什么智能logo生成器?这几个生成器都不错
怎么用logo图片设计
品牌logo设计生成器有哪些推荐?分享实用设计工具
免费logo设计在线生成器的使用技巧,一分钟就能学会
挑战生每日说 |10个让新媒体人大呼过瘾的工具
有哪些免费logo图片生成器?推荐几个好用的给你
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服