我们只做互联网+的高阶培训 拥有好作品才会拥有好工作 咨询热线:13810428182
中文 | English

线性图标设计分享

承辉学院2016-09-30

    对于UI设计师学习是十分重要的,学习中不断改进自己的设计方法方能设计出更为满意的作品,今天我们分享的是一个国外的设计师设计线性图标的相关知识,如果你对UI设计有兴趣,如果你是一个爱学习的设计师,不妨空出一些时间来看看。


   学到了什么

   我从18个月前开始学习icons设计,在此我不会用设计规范和相关规章制度来烦你,我想跟大家分享一下,自己在设计之路上的一些zhongyao的经验和小心得。


   早期的阶段

   当我初学线性icon的时候,我会看其他设计师们的作品,比如justas galaburda,mattyow,rocky roark,Adam whitcroft and ryanputnam等等。他们的作品相当之不可思议。

   我为一家热水器公司工作,担任他们的图形/插画设计/还有一些其他的设计工作。我也会设计一些取消宣传册,派发送给有潜在需求的顾客。工作过程中,我想到了一个展示重要信息的想法,就是画icons,以下的’eblb icons’,这是我第一次尝试画线性icon。

1.png


   领悟与实现

   我开始意识到一些东西,就像其他设计师们认识到的,简约而不简单。我意识到,哪些精致而繁多的细节,让线稿显得复杂。虽然图标已经打印好了。但我仍然认为有改动空间,应该多样,但却有一致性。


   简约而不简单

   我的第二份工作服务于roy&co,我被要求创造独特性且风格大胆的icons。我开始考虑尝试之前的一些想法,即“简约而不简单,去繁就简,就是进步”。以下是当时的设计作品(6像素妙边作品)。


2.png3.png

   这些描线图表是好看与好玩的结合体,而且制作和应用的过程中也同样有趣。它们有统一的风格,我相信这是一种少见且稀有的风格,即一线到底。其中的一些事情我会在接下来的一些项目中反复提起。


   音乐类图标

   我被要求为uk票务公司设计一些图标,它们会用在一个尚未运用的网站当中,最初说只做8个,但谁知道,后面的事情开始变的不可控,为做完了全套的用户图标。

   无论如何,这是一个很辣手的事情,这些图标会同时用于大型平台和小型平台上。它们要求这些图标简洁,清爽,富有现代感,且能够在大小平台上都很抢眼。我开始尝试做一个简单的测试。。。30像素测试套装。。


   30像素测试

   这个测试很简单,就是将让图标置于一个30px*30px的框子里。我发现这是一个有效的方法来,能够确保他们在小平台上得展示。我为不同工作区设置了图标,比如戏剧节,票务,其他区等等。他们的图标都被放在一个30px*30px的盒子里。这对我帮助很大,有些图标能够过关,有些则不幸,这个小技巧很多设计师或许已经知道了。


4.png5.png


   探索品牌图标

   品牌图标实际上是一种对自身品牌的诠释,图标的创造要比品牌为主题。为被公司要求设计边界为4x的品牌图标。这个图标主要将被用于网络媒体上和促销材料中。为开始为这些东西开始费脑子。

   在此我讲自己在公司的所学所得全部用于这个图标的设计工作。到目前为止:化繁为简,保持一致性,坚持一种或者两种描边权重,创造简介,清爽,具有现代感的图标。这是我的计划,我的行动,我的想法。


   为打破自己而喝彩

   我决定了,为要设计些看起来不是那么有冲击力,且有细节较多,但又看起来不是那么过分霸道和复杂的东西。它们需要能让人立刻识别公司身份,同时不觉得这些图标似乎硬生生的在戳你脸。最后,为决定打破我的规则。。。我要加入更多的细节。。。经过深思考虑之后,如下结果:

6.png7.png


   要牢记的一件事

   栅格化是不好的,当把一个图标导入photoshop的时候,请确保你从ai中导出一个svg或至少确保它是一个在potoshop中的一个矢量,将其变为智能对象,这将有助于保持在线的图标看起来质量好又清新。


   到目前为止我学到的

   在过去的18个月里,我学到了很多关于图标设计的东西。我学会了保持图标的干净和清晰,并且不要有多余的思考。我学会了顺其自然,看看它的效果,努力工作。。。

8.png

   这里没有太多所谓的规则,适合你的就是好的,保持学习,最重要的是提高你的作为平面设计或插画家的技能。


   简约图标大合集

   今年3月(2015)我决定创建一个小图标合计,这些小而简单的图标很容易理解,并且显得很友好。

9.png10.png

   看了这么多,对于线性图标的设计相信也有所了解了,好的设计师都是需要不断的学习不断的改进的,希望不管你是否是设计师还是想成为设计师,都别忘记自我学习。

承辉教务01
承辉教务02