图标（icon）设计的方法有哪些？

UI设计中图标设计的方法有哪些?~

一、轮廓清晰带有渐变的图标渐变色也是这两年最热的趋势，它同样出现在图标设计当中。相对微妙的渐变在图标设计当中，增加了视觉的维度和层次，这使得图标拥有了更加立体化的细节，这种设计使得图标本身的高级感更加明显，也恰如其分地增加了整个设计的信息量和丰富度。
二、色彩明快视觉有趣的图标
并非所有的图标都必须是单色的，但是太多的色彩挤在一个小图标上的时候，会让整个设计显得混乱不堪。通过非常有限的几种色彩来设计图标，就能够让图标显得足够有趣了，同时，如果这几种色彩也足够明快，互相补充，就更吸引用户了。这一趋势在2018年也显得非常突出。
三、形同APP ICON的图标
类似APP ICON一样的图标一直都存在，但是没有像今年这么流行过。使用圆角边框外轮廓，带有彩色背景，中间是几何特征明显的图形和元素，但是并非用作APP的入口，而是运用在网页、APP内等其他的地方。它的流行可能是因为这种样式可以暗示用户，图标背后功能的价值。
四、笔触粗重线条统一的图标
这种[粗线条]的单色图标在今年尤其受追捧，线条清晰统一，笔触粗壮，比起常规的线性图标更加厚重，而且拥有一种莫名的萌感。虽然同样只是单色的设计，但是几何感更强，视觉重量更明显，让用户的双眼无法错过。
五、仍然扁平但更加多变的图标
扁平化设计仍然没有过时，始终还在流行。扁平化的图标在视觉上相对而言更加简约，可以被设计地更加多变，也可以同各种不同的设计风格兼容，和不同的元素搭配起来使用，因此也同样收到设计师和用户的青睐。
六、表情符号化的图标
表情符号，Emoji几乎已经成为一种独立的语言，而图标设计也同样受到了表情符号的影响，各种可供识别的视觉元素，尤其是各种角色头像，都被制作成为图标，在不同的场合使用。表情符号化的图标还有哪些更有趣的用法，还有待探究。
七、永远经典的线性图标
线性图标几乎可以用在任何场合，APP，网页，海报，说它们是不老的经典一点都不为过。线性图标有着良好的可塑性，无论是大是小都可以清晰地传达信息，表明概念。在2018年，线性图标依然是主流，依然是需求大户，相关的素材也一直都稳定地产出着。
八、结构简单含义明确的图标
对于简约设计的追求，一直贯穿着整个2018年。这一点也同样体现在图标设计上，更加图形化，更加简约的形体，但是保持清晰感知度的图标设计在今年大量的涌现。就像上面的这组图标，美食的轮廓通过简单的形体来塑造，细节则使用相同的小圆点和线条来补充，非常巧妙。

设定目标 弄清楚icon的属性，是产品icon还是功能icon，如果是产品icon，便需要弄清楚是哪个平台，ios还是安卓，再去阅读官方出的开发者文档，根据标准去设计你的icon。
是阅读性的还是提示性的，不同属性的icon在视觉上都会有不一样的设计。以推特为例：
这里的icon既有识别的作用，又是功能按钮，这样就必须考虑它的几种状态（当前、按下、激活）。
这里的icon只是辅助阅读的作用，所以它从颜色、形态上会比文字轻。
icon是用来代替“某”些文字的
为什么要代替文字呢？因为有些文字变成图形后方便识别，甚至可以形成图腾，扫一眼就知道这个icon是什么意思了，但并非所有文字都需要用icon去代替，例如：
人类最原始的造字方法就是象形文字，随着文字的发展，象形文字的局限性越发增长，因为有些抽象的事物是用图形代替不了的，需要通过绘画不断解释它，才能达到意会。随之，中国以象形文字为基础，经过数千年，演变成了汉子，汉子的造字方法有会意、指事、形声、转注、假借。会意，通过组合多种象形来说明其意思，例如上面是小，下面是大，组合起来就是三角形，便是“尖”；指事，在象形的基础上添加指事符号，例如（上、下、刃）；形声，通过在一个母体上标声，例如（胫、径、颈、经、陉），就是从母体声符“巠”上来进行标声。转注，两字同一部首、二字声音相近、可以互相解释，如“考”“老”同属“老”部而又可以互训（“考，老也。”“老，考也。”）；假借，依照它的声音“假借”一个“同音字”来寄托这个“词”的意义，例如：“长”是长发，借为长久之长。图形界面就如象形文字一样，它会非常出效果，但也会有一些局限性。（图标简史详情可阅读（UI简史二 《图形时代》|UI|教程|邵飞Design - 原创文章 - 站酷 (ZCOOL）
弄清楚icon存在的意义，不同类型icon应该如何应用，不盲目追求视觉上的刺激感而忽略了icon的本质。
素材分享—设计尺寸
你需要主流平台（ios和Android）的图标尺寸，有商城，桌面，设置等不同尺寸，均可在最新版的sketch预设模板中找到。
素材分享—图形识别
给大家几组知名品牌的VI设计手册，其中包括logo定义，视觉设计定义，希望你能从这些资源中汲取图形设计的创作思路。

直接用这个在线的图片生成ico工具吧，方便快捷，常用的图片格式比如jpg/png/webp/bmp等等都可以直接生成ico图标，还可以在线裁剪缩放，选取你需要的尺寸等等，而且清晰度挺高的。在线ICO图标制作生成,图片转换ICO图标Pro版

图片转换ICO图标Pro版步骤：

一、点击或者拖拽到上传框中，即可上传你要转换的图片，直接将新图片拖入上传框即可更换图片。目前已知支持jpg、png等多种常见的图片格式，如果上传图片并转换ico图标成功，则代表支持该格式。
二、此时预览框中会出现刚刚上传的图片，可以任意缩放拖拽裁剪框，选择你想要截取并转换ico图标的区域。在拖拽缩放裁剪框的过程中，左上方会有ico图标效果的实时预览。
三、选择需要生成的ico图标的尺寸，主要提供宽高为16、32、48、64、128、256、512的尺寸以供选择。通常的ico图标基本都是32、64或者128像素的。
四、选择转换生成的ico图标的文件格式，默认的格式是.ico，并且有.jpg和.png格式可以选择。需要注意的是，ico图标一般都是背景镂空透明的图形，只有.ico和.png格式支持透明背景的图片。而.jpg格式的图片本身是不支持的。

IconWorkshop是一款专业的图标制作软件，通过IconWorkshop可以为创建Windows图标,制作Mac图标以及Unix等操作系统创建图标。为Vista/7系统创建256x256的Windows图标，为OSX Lion 系统创建1024x1024的Macintosh图标。以及为Unix/Linux系统制作PNG图标。icon设计工具

IconWorkshop更新日志：

1、新的用户界面 - 易用性保持不变，适用于Visual Studio 2012以及Windows 8系统。

2、导出的图像格式 - 支持批量的Mac图标为512×512和1024×1024的图像。

3、插画插件兼容CS6 - 兼容最新版本的Illustrator CS6 32位和64位。

4、PS插件兼容CS6 - 兼容最新版本的Photoshop CS6 32位和64位。

5、各种改进和bug修复

IconWorkshop专业版的优势： 

为Windows/MacOS/UNIX系统创建图标

新一代的图标采用了可变透明度（Alpha通道），Alpha通道能够使得制作出来的图标拥有光滑的边缘以及平滑的阴影。IconWorkshop完全支持Alpha通道，仅需几步操作即可创建有Alpha通道的PNG图像，包括利用现有的Windows和Mac图标创建PNG图标。

支持各种图形格式导入自动生成图标

Axialis IconWorkshop拥有功能强大的编辑器，同时也支持从现有图像来创建图标，且更为简单。您可以导入各种格式图片，自动生成图标。如PSD，PNG，BMP，JPEG，GIF，JPEG2000 ...

更有将包含多个图像格式的文件通过简单一步操作创建成为图标的独特功能！一切步骤都会自动完成：保留Alpha通道，调色板计算为256色格式，甚至有透明度的16色格式。

对Visual Studio强力支持工作更高效

允许用户在IconWorkshop中很容易地编辑包含在解决方案中的图标。只需在Visual Studio的资源编辑器中打开图标，启动相关的插件命令，该图标将自动在IconWorkshop中打开，可在需要时对其进行编辑。当图标在IconWorkshop中被保存后，VS IDE将自动刷新该图标文件。icon工具

图标设计是UI设计中非常重要的环节，因为除了文字和图片的排版之外，在扁平时代能够传递给用户情绪和设计感的通道就是页面中的各种图形与图标。全文16,834字，阅读时长约35分钟。图标是UI设计中除了文字之外最不可或缺的视觉元素，在设计中看似只占一个很小的区域，但是它却是考验设计师基本功的重要标准，了解图标相关的概念，以及正确绘制的方法，是入门 UI设计的必备条件。本文尽量将图标进行系统一些的介绍说明，当然仅一篇文章是不可能面面俱到包含所有知识点。内容比较基础，主要以 设计概念 和 设计思路 为主，对图标相关的内容进行组织梳理和分类，便于小伙伴们建立图标的概念体系。过程中也有针对几种典型的图标结构进行实操代练，想要把图标设计的更好，这就需要我们在平时勤加练习外，还要进行深度的思考，希望我的这篇梳理可以给大家带来帮助。1.1 图标的定义图标，也称为icon或Picoto，是计算机世界对现实世界的隐喻和概括，代表软件产品中的功能及操作。它的本质是一种符号，它采用对这个世界的隐喻，来指代功能，含义，用途等。图标做为国际通用性语言，生活中随处可见，例如商场导视中收银台图标、出口图标、卫生间图标等，日常手机里使用的那些App图标，如微信、电话、短信等。的确，图标的形式有很多种，它可以应用在很多场景中，并且表现方式非常丰富，有线的、有面的、还有拟物的等。 如果粗浅划分的话，UI设计中常见的图标大致分为2大类，第一类我们称之为「标志性图标」，比如手机中应用启动图标；第二类我们称之为「功能性图标」，这类图标经常出现于 App 或网站中，用于功能性指示引导或操作。1.2 图标的重要性对于UI设计而言，图标可以说是整个产品的点睛之笔，它甚至可以直接影响着一款产品的形象和气质。在不少 UI 界面中，图标几乎是这个页面的核心支撑体，它直接影响着产品的视觉体验和产品调性。它有以下几点好处： 全球通用：Windows,iOS, etc., 中文版和英文版甚至各种语言版本，在不打开菜单之前，基本上都长一样；节约空间：如果在一个图标能够表述清楚含义的时候，比如用一个叉就可以不用写「关闭」；快速定位：图标可以用它独特的形状或者颜色让人快速定位到一个功能；上下文的定位：比如小飞机的图标单独放出来不确定是什么，但是在和收件箱在一起它就可以认为是发件箱了。1.3 发展历程如你所知，图标、标识都不是界面设计师所创造的概念，它的存在可以追溯到人类文明诞生之初，在漫长的历史长河当中，早期用来传达信息的图标演变为系统的文字，而在地图、图书、壁画和建筑等各种各样的地方，还存在着用来代表和传达特定概念的图标和标识。 随着技术的发展，计算机诞生了，而显示器的出现，也为图形化界面的诞生，铺平了道路。20世纪70年代，施乐在位于帕罗奥托的研究所当中，诞生了最早的拥有图形化界面的电脑，著名的「 Xerox Alto」。这款昂贵的概念机最终并没有走进大众的视野，但是它的后续机型施乐之星在1981年问世，并且成为了计算机史上的重要里程碑，而Xerox Alto 对于乔布斯和比尔盖茨的启发，更是引发了计算机历史上最著名的一场战争：苹果VS微软，Windows 对抗 Macintosh。当然这都是后话。 来自苹果的Macintosh系统在图形化界面发展史上是无法绕过的里程碑。1991年，苹果借由Macintosh，首次发布了彩色的图标设计。图标所能容纳的信息量比起上一个黑白界面的时代更大，全新的样式使得它在信息传达的功能性上有了明显的提升。从iMac到iPhone引领的拟物图标更是开启了一个绚丽的图标设计时代。拟物时代盛行也带来了一些麻烦——拟物图标的质感、光影会分散用户的注意力，形成「视觉噪声」。于是UI设计师开始探索更新的表现形式来设计界面中的图标。如微软引领的Metro风格图标设计和Google引领的长投影风格的图标设计，但由于它们的表现形式太过于抽象，缺乏情感的传递，并没有获得用户的青睐。 在此之后，越来越多的图标开始借由灵活而强大的数字技术而诞生，并且基于不同的需求而演化出不同的分支和风格。许多操作系统和工具开始预制一些成体系的图标，诞生基于种种需求，越来越多的自制的、重设计的图标，逐步进入了我们的视野。图标类型很多，我们可以用不同的方式来划分它们。

---

龙潭区18642207524： 如何绘制icon小图标 - ？
宾莺先辰： 1、创建新文档 在photoshop里创建一个14px X 14px大小且背景透明的新文档. 2、绘制外轮廓 使用铅笔工具,在铅笔面板里选择1px粗细的笔刷,选择深灰色颜色,然后开始绘制页面icon图标的外轮廓.绘制直线,首先在开始位置点击鼠标左...

龙潭区18642207524： icon的设计基本原则有哪些 - ？
宾莺先辰： 设定目标 弄清楚icon的属性,是产品icon还是功能icon,如果是产品icon,便需要弄清楚是哪个平台,ios还是安卓,再去阅读官方出的开发者文档,根据标准去设计你的icon. 是阅读性的还是提示性的,不同属性的icon在视觉上都会有不一样的...

龙潭区18642207524： 游戏ICON怎么制作 - ？
宾莺先辰： 1. 手绘电脑,上色,加个边框.或者2. 直接用绘图板手绘.手绘的教程网上查下手绘教程就有,地址不好贴,贴了发不出.大神手绘视频看了除了惊叹和高手提高用以外新手多看没用.关键其实还是自己的美术修养,能画图的一切都好说,不能画图的照着步骤做出来还是难看.

龙潭区18642207524： 怎么自己改icon图标 - ？
宾莺先辰： 1. 需要修改注册表.2. 更改网络工作组图标 3. 4. 在 HKEY_LOCAL_MACHINE\Software\Microsoft\Windows\CurrentVersion\explorer\Shell Icons下5. 在右边的窗口中新建字符串值＂2＂,并设其值为新图标的路径. 更改WEB文件夹图标HKEY_...

龙潭区18642207524： 如何使网页前面的图标显示成自己的ICON(c#)？
宾莺先辰： 1、第一步,准备一个图标制作软件.首先您必须了解所谓的图标(Icon)是一种特殊的图形文件格式,它是以.ico 作为扩展名.普通的图像设计软件无法使用这种格式,所以您需要到下载一个ico图标工具,本站常用软件既有,推荐强大的...

龙潭区18642207524： ios开发 怎么设置icon图标 - ？
宾莺先辰： 方法/步骤 在Photoshop新建一个文件,大小为1024*1024像素的.设计图标,图标内容就需要自己设计啦,这里就填充一个背景颜色再加上PS自带的形状和文字.生成App需要的图标.“存储为web所用格式”.png后缀的图片.得出App Icon....

龙潭区18642207524： 如何制作描边风格的图标 - ？
宾莺先辰： 今天为大家介绍一篇关于ICON图标的制作教程.这方面的PS教程不是很多,其实非常简单,这篇教程的重点在于为图标添加一层豹纹的效果和如何处理毛边缘的技巧.下面我们开始学习吧. 最终效果用铅笔工具画一个文件夹的轮廓.用钢笔描边.调整后得到如下两图.

龙潭区18642207524： 怎样个性化设计电脑的＂主题＂以及图标? - ？
宾莺先辰： 1.设计自己的个性主题 首先你下载一个自己喜欢的主题包,exe文件类型的就直接安装,然后在桌面上右击--属性--主题,就会看见你自己安装上去的那个主题!如果不想用别人事先做好的主题包,那么就自己动手做一个咯! A.把主题文件夹直...

龙潭区18642207524： 怎样制作图标? - ？
宾莺先辰： IconWorkshop是一款功能强大的图片制作和编辑工具.IconWorkshop 6.53 单文件绿色版由软件便利店基于官方原版制作,集成莫妮卡的简体中文语言文件,集成注册码,删除图标库和其他插件.已修改主程序禁...

龙潭区18642207524： 如果想设计一个一个图标,要用什么方式制作??(logo?word?PPT??) - ？
宾莺先辰： 一般用coreldraw或者Illustrator,做出来的图是矢量图,类似于CAD那种图,可以无限放大而看着不模糊.如果用PS 做完的像素图,放到那种室外广告或更大的时候时,会模糊.