【www.gbppp.com--化妆技巧】
UI设计基础-icon图标设计
我们今天来说一下基于布尔运算下怎么绘画设计一些icon图标，作为新手我们起初不应该起点太高，先不用自己设计图标，我们可以在网上找一下大师设计的图标进行临摹，等我们熟练掌握技巧以后再开始自己设计。
我们用网上的一张icon来做事例:
就拿这张图片中的第一个小图标来演示
首先第一步:分析图标:
如图表示,图标放大后实际上是分为了两层,里边是一层外边一层,里边相对的比较简单,是一个圆环,不过在细节上我们要注意,里边的这个圆环在端口处是圆角,而不是有楞的边,外边的图形相对复杂一些,我们可以看成半圆环与正方形的结合.
这里我们要注意的:在我们设计icon的时候要先确定它的边的像素,如这个临摹图就是4像素的.
下面我们来说一下如何临摹
一,外图绘制
1,确定整体大小
我们可以看得出来,这个icon实际上是一个圆形如图所示
:
我们查看它的信息,可以看到这个圆形的大小是44乘44的像素,这样我们就可以开始自己的临摹了.
2,画外图层
如图我们画一个44*44像素的圆:然后外层图形的宽当初我们看了是4像素,那么我们就可以再做一个小圆,让大圆与小圆之间的宽为4像素.
当会出外图层大致轮廓后,我们知道,最开始外图层是由几个半圆环和矩形组成的,同样是查看半圆信息,其实是直径为22像素的圆,所以我们就可以先画出一个直径为22像素的圆.然后同样的步骤我们再在这个圆形当中做一个小圆,两个圆形的差距为4像素,最终的图形结果如图所示
3,确定位置
我们看临摹的原图,查看信息可以看出,上下两个圆的圆心是在一条直线上的,然后就是打圆环与小圆环之间的距离,他们其实是没有距离的,然后在布尔运算中,我们知道,这两个圆环其实应该是一个图层,下面我们就把这两个圆环的图层合并,得出来的效果图就是这样的.
4,完成图形
这个时候为了保证图形的规范我们要用到辅助线,下面是一个圆形了,我们看原图是有6个圆形的,下面我们可以用这种方法:首先将小圆的圆心移动到大圆圆心处,然后以最新的圆心为远点复制出六个圆,效果图如下.然后把没用的部分切掉,就成了最终的图形了
.
二,内图绘制
绘制步骤跟外图一样,做一个圆环如图所示
:
然后就是缺口处的圆形切口,我们可以先用矩形工具绘制一个三角形,先切除一个有棱角的切口,如图所示:
然后我们画一个4像素的小圆,盖在上面就形成了
好了这个小图标基本也就完成了,从中我们将了一些特殊图形的绘制过程,当然这些过程都是在Photoshop上操作完成的,其中运用了很多布尔运算的原则,做icon图标如果我们是新手就要先从临摹别人的开始,当掌握了熟练的技巧以后再开始自己创造,这样是非常有效率的.
本文档由承辉学院原创
UI界面设计图标创意设计
不管是多么优秀的设计，都要经过不断地修改与改进，才能将最好的信息
展示给用户，我们看到的图标或者不同类型的界面是经过无数次的改变与润色才展现在眼前的。
创意图标的设计有一个很重要的环节就是手绘的设计，对于专业出身的人
来说这没有什么，而如果是半路出家的话就会面临很大的困难，下面简单介绍一下创意图标的设计过程。 标志创意设计的全过程，可以从五个环节含意、图形、文字、形式、色彩出发，疏而不漏、掐骨掐点，使标志设计明朗化、系统化，帮助你成为一个高效出色的设计师。
一、 含义出发
在构思的时候，根据企业的行为特征和核心竞争力，我们需要为企业寻找
一个恰当的视觉图形符号。根据各的历史文化信仰环境，采用象征性、比喻性、故事性，我们能使企业抽象的精神与理念，通过一个视觉载体表现出来。好的标志设计，能承载企业所力图传达的信息，并使抽象的理念精神形象化、具体化、大众化。
二、 象征性
象征就是采用视觉图形符号，唤起人们对于某一抽象意义、观念或情绪的
记忆。象征性标志，是建立在一个民族特定的文化和宗教基础上的、具有相同的生活环境的人，才能正确传达与理解其象征的意义。 象征符号具有约定性。好比做游戏，需要游戏规则。规则相同，才能使象征意义正确地发出和接受，使整个传达过程成立，而规则就是我们不同的历史文化宗教环境。
东方文化和西方文化对于同一图形的象征意义有所不同，不同宗教对于同
一图形的象征意义也有所不同。 在西方世界中，狮子象征权威与力量，狗象征忠诚与勇敢、牛象征勇猛与股市中的“牛市”。在中国仙鹤与松树象征长寿、蝙蝠象征福气、鱼象征富裕有余、牡丹象征荣华富贵。
三、 比喻性
比喻就是采用一个或一组视觉符号，表达相平行的另一层相关含义。比喻
建立在两者之间在性质或关系上的共性。
比喻性标志，借A说B，从侧面讲述问题，需要读者参与联想来完成整个
设计的构思过程。这种图形表达方式，赋有趣味性与深刻性，并留有文化艺术的想象空间，传达效果出奇制胜。
四、 故事性
故事性就是采用故事中的角色或符号，作为标志设计的无素，借用故事的
广泛流传程度，传达企业的理念或行业特征，顺水推舟，顺势而动。基于大众对故事的认知程度，故事性的方法具有很好的传达效果。
五、 图形出发
标志从图形分类出发，可以分为具象标志、象形标志和抽象标志。
六、 具象标志
具象标志在选择题材时，要尽量采用那些人们熟悉的元素，并在此基础上
创造个性成分。熟悉的元素能牵扯动人们视觉神经，引起人们共鸣，产生深刻记忆的基础。
在我们周围有很多是现成标志，把原有的通俗元素引入进来，可以塑商品
的亲切感，增加商品的个性与差异，这里有很多成功的先例。比如，壳牌石油、
苹果电脑、骆驼牌香烟、番茄银行„„这些国际品牌采用了世界上最为通俗的符号，使人们牢记它们的名字。
也许你会想，扇贝和石油有什么关系？苹果和电脑有什么关系？骆驼和香
烟有什么关系？番茄和银行有什么关系？其实你大可一笑了之，最单纯的想法可能是最成功的创意。当时设计师的想法可能是最成功的创意。当时的设计师意图，只不过是寻找一个符号来区分商品。 寻找一个现成的标志，无论设计师或者观看者，都感到亲切又省心。
七、 象形标志
象形标志，在具象标志的基础上开始简化，提炼特征形态符号，来传达企
业的关键信息。
八、 抽象标志
图形的好奇感，在众多标志中脱颖而出的方法，是留下一部分想象空间给
观众，制造标志的好奇感。这究竟是什么？是不是这个或那个意思呢？
在人们无法猜透的时候，标志的形象就悄悄溜进了记忆深处。在几何形的
标志中加入一点点生命的特征，是制造好奇感的有效方法。
九、 文字出发
文字标志是标志设计中分量很重的一部分。字体设计充满了无限的魅力，
而字体标志又将字体设计提高到符号传播学的高度。在艺术与科学的天平中，
文字标志在动态平衡艺术与信息的比重，唯美主义与功能主义较量的承载物。
标志从文字出发，是人们最早选择的一个种标志设计方式。所看到的即是
所读出的，声音与视觉达到一，同时又具有识别性。文字标志，是语音音素和语言的视觉化符号。文字源于图形，但在长期的演变过程中，逐渐倾向于表示
音素的性质，比如英文。但汉字仍然保留有许多图形的特征。文字标志不仅包括中英文，
广义上还包括标点、阿拉伯数字、常用基本符号等书写共通元素。
资料由AAA教育整理
UI界面设计图标创意设计
不管是多么优秀的设计，都要经过不断地修改与改进，才能将最好的信息展示给用户，我们看到的图标或者不同类型的界面是经过无数次的改变与润色才展现在眼前的。
创意图标的设计有一个很重要的环节就是手绘的设计，对于专业出身的人来说这没有什么，而如果是半路出家的话就会面临很大的困难，下面简单介绍一下创意图标的设计过程。
标志创意设计的全过程，可以从五个环节含意、图形、文字、形式、色彩出发，疏而不漏、掐骨掐点，使标志设计明朗化、系统化，帮助你成为一个高效出色的设计师。
一、含义出发
在构思的时候，根据企业的行为特征和核心竞争力，我们需要为企业寻找一个恰当的视觉图形符号。根据各的历史文化信仰环境，采用象征性、比喻性、故事性，我们能使企业抽象的精神与理念，通过一个视觉载体表现出来。好的标志设计，能承载企业所力图传达的信息，并使抽象的理念精神形象化、具体化、大众化。
二、象征性
象征就是采用视觉图形符号，唤起人们对于某一抽象意义、观念或情绪的记忆。象征性标志，是建立在一个民族特定的文化和宗教基础上的、具有相同的生活环境的人，才能正确传达与理解其象征的意义。
象征符号具有约定性。好比做游戏，需要游戏规则。规则相同，才能使象征意义正确地发出和接受，使整个传达过程成立，而规则就是我们不同的历史文化
宗教环境。东方文化和西方文化对于同一图形的象征意义有所不同，不同宗教对于同一图形的象征意义也有所不同。 在西方世界中，狮子象征权威与力量，狗象征忠诚与勇敢、牛象征勇猛与股市中的“牛市”。在中国仙鹤与松树象征长寿、蝙蝠象征福气、鱼象征富裕有余、牡丹象征荣华富贵。
三、比喻性
比喻就是采用一个或一组视觉符号，表达相平行的另一层相关含义。比喻建立在两者之间在性质或关系上的共性。
比喻性标志，借A说B，从侧面讲述问题，需要读者参与联想来完成整个设计的构思过程。这种图形表达方式，赋有趣味性与深刻性，并留有文化艺术的想象空间，传达效果出奇制胜。
四、故事性
故事性就是采用故事中的角色或符号，作为标志设计的无素，借用故事的广泛流传程度，传达企业的理念或行业特征，顺水推舟，顺势而动。基于大众对故事的认知程度，故事性的方法具有很好的传达效果。
五、图形出发
标志从图形分类出发，可以分为具象标志、象形标志和抽象标志。
六、具象标志
具象标志在选择题材时，要尽量采用那些人们熟悉的元素，并在此基础上创造个性成分。熟悉的元素能牵扯动人们视觉神经，引起人们共鸣，产生深刻记忆的基础。在我们周围有很多是现成标志，把原有的通俗元素引入进来，可以塑商品的亲切感，增加商品的个性与差异，这里有很多成功的先例。比如，壳牌石油、苹果电脑、骆驼牌香烟、番茄银行„„这些国际品牌采用了世界上最为通俗的符号，
使人们牢记它们的名字。
也许你会想，扇贝和石油有什么关系？苹果和电脑有什么关系？骆驼和香烟有什么关系？番茄和银行有什么关系？其实你大可一笑了之，最单纯的想法可能是最成功的创意。当时设计师的想法可能是最成功的创意。当时的设计师意图，只不过是寻找一个符号来区分商品。 寻找一个现成的标志，无论设计师或者观看者，都感到亲切又省心。【ui图标设计报价,】
七、象形标志
象形标志，在具象标志的基础上开始简化，提炼特征形态符号，来传达企业的关键信息。
八、抽象标志
图形的好奇感，在众多标志中脱颖而出的方法，是留下一部分想象空间给观众，制造标志的好奇感。这究竟是什么？是不是这个或那个意思呢？在人们无法猜透的时候，标志的形象就悄悄溜进了记忆深处。在几何形的标志中加入一点点生命的特征，是制造好奇感的有效方法。
九、文字出发
文字标志是标志设计中分量很重的一部分。字体设计充满了无限的魅力，而字体标志又将字体设计提高到符号传播学的高度。在艺术与科学的天平中，文字标志在动态平衡艺术与信息的比重，唯美主义与功能主义较量的承载物。
标志从文字出发，是人们最早选择的一个种标志设计方式。所看到的即是所读出的，声音与视觉达到一，同时又具有识别性。文字标志，是语音音素和语言的视觉化符号。文字源于图形，但在长期的演变过程中，逐渐倾向于表示音素的性质，比如英文。但汉字仍然保留有许多图形的特征。文字标志不仅包括中英文，
广义上还包括标点、阿拉伯数字、常用基本符号等书写共通元素。
【UI设计经验】图标设计初阶要先型
UI最重要组建之一就是图标，随着扁平化设计的发展趋势，越来越注重图标的简洁与寓意表达，平面图标已占主导地位。每位设计师所处的阶段所关注的要点是不一样的，我把图标设计分为2个阶段--初阶与高阶，这样分是为了有步骤性的学习和进阶的加强，当然，能人的话一步到位，对于新人来讲会较难，需要实际工作中辅导与自己经验总结。我不会华丽高大尚的语言，但是我可以分享一些实实在在的基础方法，也是这几年来给带的学生反复必讲的入门辅导，有自己成熟方法表达的设计师可忽略这里，这里先说初阶的设计关键要点。
目录:
一. 概念类别
二. 设计技法要点
三. 系列成型图标
-------------------------------------------------------------------------------------------------------------------------------
扁平化图标大部分无非就是剪影表现，而这里为什么重点是讲图标的形状设计，而非色彩，因为一切先有形才考虑下一步。形不好再怎么营造整体风格都白费力，好比建筑造型与装修的关系，而色彩等营造的风格都可另起文章分析 。图标造型表现上无非就是典型的2种：面与线 。运用这两种基础元素去造型也可以进行多种组合不同的表现 。组合造型一般有单体造型、多个元素组合造型，线与面之间的独立与结合的变化。
这类通常是彩色一体表现，造型和组合上较写实，不是纯剪影，是写实过渡来的简化，又接近剪影，扁平简化设计，这里主要是利用面和颜色来进行造型的设计。质感风格上也有6种(已有人分析)，大概是纯平面、折叠、轻质感、折纸风、长投影、微立体。这种相对剪影的好画很多，也更加容易塑造风格，更多是在色彩上有得发挥和考究，用在界面里也是最为突出的。最近还非常流行用色块来进行二维、三维的装饰表达，叫所谓的“低面建模”。
上面提到的元素组合，比如下图这个图标目前是2个元素--信封加信纸，如果还要再加什么功能状态示意，最多在右上角加个很小的消息提醒。因为元素越多越复杂，所表达的含义也就越多，同时也会影响造型的调动。不管多少个元素总有一个最重要的对象，其他为辅助图形，在塑形大小复杂度上有区别。
( 1.1本文半原创图例)
这类通常是单色表现，当然也有综合彩色的。其更加简洁抽象， 言简意赅，高度提炼精华，讲究表象意境，具有理解的门槛。所以这才是最难设计的一关。非常考究设计的理性与感性之间在功能传达上的逻辑思维。也是UI界所谓现代极简主义的代表，注意，没把握好就会变得很“空虚”，把握好了就是时尚的feel啦~
负形图标是以线绘制的图形，高度的轮廓概括，就跟画骨骼一样的要求精准到位，也叫线形图标。负形剪影是所有图标中最讲究也最难表达型的一种风格，如果画不好就很容易俗气和简陋。
正形图标是以面绘制的图形，也有和线综合表现情况，自己根据需要进行创造变化吧。通常与负形图标之间做当前状态的转换，手机tab上最常见，如ios7。
优点：简洁清新优雅;极具现代感(虽然远古时代就有高度概括的符号表达，这里指的范围是互联网上的全新应用);具有UI设计与涵义综合的拓展性;还可以完成一些抽象词汇的图形传达。
(1.2本文原创图例)
图标为上传到云端的之意，这里的主对象是云，所以箭头和云的比例是不同的，上传箭头是辅助图形。了解界定多元素之间的主次关系，就能够把握一个整体的造型走向。典型的基础表现就是上面两种，然后在实际绘制中根据自己的喜好和设计来进行融合，可以得出更加丰富的表现。
1、关键节点绘制法
拟物化设计就是尽可能的绘制繁琐细节，追求丰富和相似度。而剪影图标则是相反，以简练为绘制手段。但是细节就没有吗，不是的，而是更加谨慎认真的注重每一笔，且越来越优雅。这里举例剪影图标绘制方法技巧，3步骤可以搞定，看似又简单又难，简单的是只是绘制参照物轮廓，保留基础识别性，步骤很少;难的是这调整的过程与产品环境的融合性，
ps立体图标，制作一个立体的UI
图标
第一步：新建一个高度为560,宽度为420。填充背景为：#fbf5e7。
第二步：
选择圆角矩形工具，画一个180*180，半径为10的圆角矩形，填充颜色为：#a9d0e1。
第三步：ctrl+t,然后右击旋转，旋转45°，然后右击进行扭曲，按住alt键，选中其中一个点，进行水平移动。
第四步：Ctrl+Alt+↓，重复操作。shift键点选所有轻移出的副本，接着Ctrl+g，这样这些副本就全部放到一个组里。
第五步：点击组
1图层空白部位，打开图层样式，进行颜色叠加，颜色为#63a8c7。【ui图标设计报价,】
第六步：组1图层放到圆角矩形1图层的下面。
第七步：复制圆角矩形
1图层放置组1图层的下面。
第八步：打开图层样式进行颜色叠加，颜色为：#345469,往右下方移动，使阴影露出，不透明度降低至50％。
图标设计基础教程
UI最重要组建之一就是图标，随着扁平化设计的发展趋势，越来越注重图标的简洁与寓意表达，平面图标已占主导地位。` 【一】概念类别【ui图标设计报价,】
扁平化图标大部分无非就是剪影表现，而这里为什么重点是讲图标的形状设计，而非色彩，因为一切先有形才考虑下一步。形不好再怎么营造整体风格都白费力，好比建筑造型与装修的关系，而色彩等营造的风格都可另起文章分析 。图标造型表现上无非就是典型的2种：面与线 。运用这两种基础元素去造型也可以进行多种组合不同的表现 。组合造型一般有单体造型、多个元素组合造型，线与面之间的独立与结合的变化。
l 简化的微写实图标
这类通常是彩色一体表现，造型和组合上较写实，不是纯剪影，是写实过渡来的简化，又接近剪影，扁平简化设计，这里主要是利用面和颜色来进行造型的设计。质感风格上也有6种（已有人分析），大概是纯平面、折叠、轻质感、折纸风、长投影、微立体。这种相对剪影的好画很多，也更加容易塑造风格，更多是在色彩上有得发挥和考究，用在界面里也是最为突出的。最近还非常流行用色块来进行二维、三维的装饰表达，叫所谓的“低面建模”。
上面提到的元素组合，比如下图这个图标目前是2个元素--信封加
信纸，如果还要再加什么功能状态示意，最多在右上角加个很小的
消息提醒。因为元素越多越复杂，所表达的含义也就越多，同时也
会影响造型的调动。不管多少个元素总有一个最重要的对象，其他
为辅助图形，在塑形大小复杂度上有区别。
l 剪影的正负形图标（面、线）
这类通常是单色表现，当然也有综合彩色的。其更加简洁抽象， 言简意赅，高度提炼精华，讲究表象意境，具有理解的门槛。所以这才是最难设计的一关。非常考究设计的理性与感性之间在功能传达上的逻辑思维。也是UI界所谓现代极简主义的代表，注意，没把握好就会变得很“空虚”，把握好了就是时尚的feel啦~
负形图标：以线绘制的图形，高度的轮廓概括，就跟画骨骼一样的要求精准到位，也叫线形图标。负形剪影是所有图标中最讲究也最难表达型的一种风格，如果画不好就很容易俗气和简陋。
正形图标：以面绘制的图形，也有和线综合表现情况，自己根据需要进行创造变化吧。通常与负形图标之间做当前
状态的转换
，手机tab上最常见，如ios7。
优点：简洁清新优雅；极具现代感（虽然远古时代就有高度概括的符号表达，这里指的范围是互联网上的全新应用）；具有设计与涵义综合的拓展性；还可以完成一些抽象词汇的图形传达。
图标为上传到云端的之意，这里的主对象是云，所以箭头和云的比例是不同的，上传箭头是辅助图形。了解界定多元素之间的主次关系，就能够把握一个整体的造型走向。典型的基础表现就是上面两种，然后在实际绘制中根据自己的喜好和设计来进行融合，可以得出更加丰富的表现。
【二】设计技法要点
1、关键节点绘制法
拟物化设计就是尽可能的绘制繁琐细节，追求丰富和相似度。而剪影图标则是相反，以简练为绘制手段。但是细节就没有吗，不是的，而是更加谨慎认真的注重每一笔，且越来越优雅。这里举例剪影图标绘制方法技巧，看似又简单又难，简单的是只是绘制参照物轮廓，保留基础识别性，步骤很少；难的是这调整的过程与产品环境的融合性，易用性，还有你自己的创意想法。说简单点就是去繁择简并经过思考改造过的设计过程。而最基本的最需要犀利眼神抓准的是造型的关键节点，雏形出来后再根据想法调整。
l 提炼精华勾勒轮廓
通常在绘制已有参照物的基础上去设计一个图标，可以根据你喜欢的造型参照物去进行分析，先抓取到参照物的关键节点，几何绘制出来一个相似的基本图形。
l 调整线锋优雅得体
基础雏形出来后就开始加入自己的想法调整线锋，
线条走向
决定造型。这个时候就得要调多几个版本了。设计师的处女座精细和纠结情结就在这里洒汗了，不断调整对比，挑选出一个最优再进行下一步。
l 增特有细节出风格
最后一步的塑形，就是画龙点睛！造型的特点就在这一步去完成。
对于新老设计师来说，这样的方法都是比较可取好用的，交互设计师也可以这样快速入门哦亲！尤其是第一步骤，
能否非常快速的出雏形。下面是其他案例的设计方法欣赏，跟我上面总结的一样道理。
2、精致的基础要素
精致即精细极致
。看似简单的图标其实并不是随便了事，但知道了这些基本要素你就可以完成一个合格的图标了。
好的图标是谨慎认真的注重每一笔
每一像素每一矢量锚点的，尽可能的往精美优雅的方向努力吧骚年~
l 犀利清晰
需要锻炼厉害的眼睛，使出你的火眼金星捕捉每个像素之差，像素满格才能清晰的呈现，细分出来通常会遇到以下3种情况，这也是最影响图标基本质量的问题点。
1) 轮廓发虚
图标一定要用矢量绘制，但是新手很容易犯的第一个错误就是图标模糊的问题，也不清楚为何会这样。其实就是矢量边缘模糊产生的问题，也是个人绘制的不良习惯造成。避免这个问题，必须在100%画布上绘制图形，而且不能直接推动图标放大缩小，即使这样改变大小了也要放大画布调整路径的锚点，反复查看及校正是否对齐1px网格，而不是0.1~0.9px，正是不满1px格才会生产虚线。而圆形的绘制保证十字架4个边缘点对准就可以了。
2) 斜形发虚
斜线也是会有模糊与精致之分的，不仔细对比其实是
比较难看到问题，可能很多人都会碰到图形进行倾斜
效果时是有锯齿的，那就是角度的处理问题了，自己
进行多角度对比下试试，会发现哪一个角度最清晰。
也可以将图层进行双层叠加，会非常犀利哦~
3) 像素不够或多余 看下来都是像素发虚与清晰的原因都是一样的，下面这个例子是箭头在小尺寸情况下可点阵矢量像素绘制，如果是
大尺寸（如上面最大的箭头示例）可以直接钢笔绘制。
总结一下上面的处理方法，坚持最少发虚原则：
l 比例协调
图形内部结构要注意元素构成之间的比例，有黄金比例分割也有感性的平衡方法。严谨的图标比例可参照苹果IOS图标规范案例，打好内部统一结构线进行图形绘制和比例分配。
本文来源：http://www.gbppp.com/sh/467671/
推荐访问:ui图标设计教程 ui设计图标素材