ico图标制作工具,在线生成ico图

　　

　　朋友们好~今天给大家推荐一篇干货文章。作者是来自旧金山的插画师和图标设计师邦妮凯特沃尔夫。在这篇文章中，她为我们梳理了如何快速构建图标以及一些非常实用的设计技巧。相信会对你有帮助~ 　　

　　

　　 　　

　　

　　教你玩转图标icon 　　

　　

　　大小：1.80GB 　　

　　

　　条文：百度网盘 　　

　　

　　收购方式：请查看文章底部 　　

　　

　　写在前面 　　

　　

　　虽然图标很小，但它是设计系统和产品体验的关键部分。不仅可以帮助我们快速导航，而且不受地域语言限制，体积也很小。此外，它是一个设计系统的基本组成部分，对营销和宣传非常有帮助，也是插图的基本组成部分。看似简单，其实很有挑战性。 　　

　　

　　 　　

　　

　　无论你是设计系统专家、插画师还是产品设计师，本指南都可以帮助你学习如何绘制图标，使其与你的品牌保持一致，并将其应用到你的设计系统中。让我们从基础开始。 　　

　　

　　图标大小.的基本元素 　　

　　

　　一致性是设计标志的关键。当我们绘图时，一定要确保所有的图标都相同大小。还需要知道如何构建网格(例如8px或10px)。所有的图标尺寸都应该以此为基础来设计。例如，如果我们有一个基于8px的网格，那么我们的图标大小应该是16px、24px或32px等。 　　

　　

　　通常我们只需要选择一个常用的尺寸来绘制，然后让开发人员根据倍数来调整可能需要的尺寸，这样我们就不用一遍又一遍的绘制不同尺寸的同一个图标了。 　　

　　

　　但是当我们的图标涉及到一些复杂的细节时，还是需要按照大小分别绘制。比如我们的产品图标可能是24px，但是营销图标是80px，两者的使用会有很大的不同，所以对于那些大一点的尺寸我们需要补充一些细节。 　　

　　

　　在2 x 24像素、40 x 40像素、80 x 80像素下存储图标 　　

　　

　　 　　

　　

　　因为一般我喜欢从最大的尺寸开始，然后依次绘制小一点的。删除和简化细节比添加要容易得多，所以也能最大程度地保持图标的原始状态。 　　

　　

　　颜色 　　

　　

　　如果是产品图标，那么最好只用一种颜色，黑色。否则，您的组件可能会变得过于复杂，无法与其他设计人员协作。对于营销图标，出于品牌推广的目的，你可能想用两种颜色，但个人认为图标最好是单一颜色。任何有三种或三种以上颜色的东西都是插图，不是图标。 　　

　　

　　 　　

　　

　　左侧：插图中：透视图标右侧：平面图标 　　

　　

　　栅格 　　

　　

　　基于像素划分的像素网格是最基本的网格系统。在绘制图标时，我们总是希望将对象与每个像素对齐，尤其是直线。因为像素对齐不仅能更好的渲染，还能让图标更干净舒适。 　　

　　

　　下图显示了Figma中像素对齐和未对齐图标之间的差异： 　　

　　

　　 　　

　　

　　左：像素对齐右：像素未对齐 　　

　　

　　我喜欢在绘制图标之前设置网格。这是我在菲格马的场景。 　　

　　

　　 　　

　　

　　像素完成了，下一步是视觉网格。视觉网格可以帮助我们找到图标的中心在哪里，人眼可以感知到多大。圆形和弯曲的物体看起来会比正方形小。所以我们在绘制图标的时候要设置一个固定大小的容器，这样导出的时候都是一样的大小。添加内边距可以让图标在视觉上看起来更加平衡，需要重新调整以避免未来的发展。 　　

　　

　　当建立我的视觉网格时，如果我的喜欢边缘处设置和图标描边粗细相等的内边距。是1px描边，内边距可能会再次加倍。在下面的示例中，您可以看到不同的形状如何影响内边距。 　　

　　

　　 　　

　　

　　视觉上，图标的主要部分应该垂直和水平居中。 　　

ian.lamuhao.com/pic/img.php?k=ico图标制作工具,在线生成ico图8.jpg">

　　

如果你在设计中使用像素栅格，并且很好的利用视觉栅格，那么就已经领先于别人了。

　　

描边和填充

　　

还记得我说过一致性是关键吗?我再说一遍。没有什么比看到一个填充图标和一个线性图标放在一起更让我抓狂的了。确保你的图标风格一致是非常非常重要的。比如你想用填充图标来表示选中状态，那么请一定要确保你的其他图标风格一致，只有少量的变体存在。

　　

通常，填充图标具有更高的可识别性，而描边图标更方便添加细节。并且在选择你哪种风格更合适的时候，也别忘了考虑品牌定位和风格。

　　

如果你要绘制描边图标，那么需要保证所有的笔画都是相同的粗细，并且笔画之间的间距不要比笔画本身更细。

　　 　　

当我们绘制描边图标的填充版本时，首先需要考虑如何简化线条。理想情况下，填充图标类似于阴影，而不是直接翻转颜色。绘制填充图标的描边版本，需要确定好线条的粗细，以及在保证清晰度的情况下可以添加多少细节。

　　 　　

我不建议使用小于10px的描边图标(假设是1px-2px的笔划粗细)，它们很难辨认细节。

　　

风格选择图标往往也是一个品牌的视觉呈现。所以在开始这项工作前，我们需要了解自己品牌的核心价值以及它们的视觉风格。这里可以用一些形容词总结：坚硬/柔软、随意/正式、奢侈/经济、具象/抽象。或者也可以参考一些插图风格。

　　

即使是那些最简单的图标(比如表示关闭的X，菜单≡，向下的∨等等)，也要求你了解图标系统的基本原理。所以我建议你从比较复杂的图标开始。当你熟悉和掌握一些规则后，就能更轻松的绘制这些简单图标了。

　　 　　

5种风格的5个产品图标――注意这些细微的差异是如何让每一组看起来一致和完整的。

　　

绘制图标几何形状

　　

除非我绘制的是一个非常抽象的图标风格，否则我喜欢从基本形状开始绘制。矩形、正方形和圆形都能让我们绘制出完美图标。

　　 　　

在绘制几何图形时，如果需要绘制复杂的多边形，可以从正方形或矩形开始，也可以使用钢笔工具逐点绘制。不过这时最好能有一个清晰明了的网格，以方便我们看到这些点的走向。

　　

当需要绘制有角度的几何图形时，我不建议你只是简单使用矩形并旋转它。而是根据像素栅格来逐点绘制。

　　 　　

抽象形状

　　

在Figma中绘制抽象形状是很容易的。你可以使用传统的逐点绘制曲线的方法，也可以使用智能节点弯曲工具。我喜欢把所有的点画成直线，然后用弯曲工具把节点变为顺畅的曲线。这个工具能帮助我们绘制自然而平衡的形状。并且当我们移动节点时，Figma中的曲线和圆角还会自动调整。

　　 　　

角 /连接

　　

角的绘制方式有几种：斜接(方形)、斜角、和圆角。我强烈建议你只使用一种方式处理图标。

　　

圆角半径

　　

当我们为正方形或矩形绘制圆角时，需要确保所有圆角半径相同。并且同心形状还需要重新调整圆角半径，让内部形状的圆角半径略小于外部形状的圆角半径。

　　 　　

以上公文包图标使用了不同的圆角半径

　　

端点

　　

端点可以是圆形或方形的，但无论是哪种，都请坚持一个选择。

　　

内部物体

　　

当我们需要在描边图标主元素内部填充另一个元素时（比如在房子里添加一个窗户），如果没有足够的空间容纳描边形状，那么最好使用与描边成比例的填充形状，并且一定不要太大。否则你将看到一个2px描边的图形中放置了一个大于4X4pt的填充形状的奇怪场景。

　　

隐喻

　　

隐喻在图标中很重要，比如房子意味着主页，X意味着错误。因此当我缩小图标时，喜欢保留这些隐喻元素，以更好的表达含义。

　　 　　

缩小图标意味着保留隐喻元素，而不是简单地直接按比例缩小

　　 　　

如果所有内容都不适合，请确定最重要的细节，然后删除多余的部分。

　　 　　

如果空间受到限制，你可以简化关键细节，而不是删除它们。

　　

透视

　　

给图标添加透视效果是一件棘手的事情，因为它会让本来就少的空间更加拥挤。所以如果你确实想要使用透视效果，要么就把所有元素看为一个整体添加，要么就只在它有助于提高可读性和清晰度时适当地使用。

　　 　　

文字

　　

如果可能的话，尽量避免在图标中使用文字。因为图标应该是全球性的。如果你确实需要文字(例如货币符号等等)，那么请你自己绘制，而不是直接使用字体。

　　

如何在设计系统中使用图标如何让你的图标在设计系统中可以更好的协作，主要有三点：图标的命名组织、资源管理和交付。

　　

组织

　　

让我们从文件命名开始。图标的命名应该基于它们所显示的内容，而不是它们所代表的内容。例如，一个秒表图标应该被命名为秒表，而不是速度。灯泡应该叫灯泡，而不是idea。你应该让大家立即明白这个图标是什么，而不是它在概念层面上传达什么。并且名字越短越好。当你需要多个单词时，用破折号把它们分开。

　　 　　

像这样的图标可能需要多个单词―例如，chef-hat。

　　

以此同时，为了与开发人员更好的对接，我们还需要同时借助框架和页面来组织图标的分类，页面表示最外层的分组(我喜欢按大小排序)。然后框架帮助我们缩小内容范围，如下面的示例所示。这个图标的命名系统为：大小>类>文件名。

　　 　　

当你有不同版本的图标时，这是我喜欢的处理方式：

　　

大小不同:使用不同的页面，因为你很少会直接切换不同尺寸的组件。

　　

填充和描边:当你同时使用了两种风格，可以在图标名称后面用斜线来表示填充或描边的图标。

　　 　　

左：coffee/stroked 右：coffee/filled

　　

调整图像:当你有一个多个版本(例如多个货币变体)的图标时，你依然可以使用命名来帮助区分，使用的方法与上面一致。

　　 　　

shield、shield/dollar、shield/euro、shield/pound、shield/yen、shield/plus

　　

资源管理

　　

完成图标操作后，你一定希望它们尽可能整洁，以便实现最佳的导出效果。使用布尔运算可以简化我们的设计，避免任何多余的线条或形状。检查所有线条是否都在框架内，让其他人帮忙来检查你的图标是否整洁是非常有必要的。

　　

有了图标，你可能很想让你所有的设计师都有编辑权限，这样他们就可以添加新的图标。但我建议单独收集图标，对它们进行审计，合格后再加入资源库，这样避免多人同时修改而造成混乱。

　　

文件格式是导出图标的关键。不同的人需要的文件格式也不同，如果你为外部合伙人提供图标，那么可能会提供1x、2x和3x.的png文件，以适应多种设备。而对于开发和其他设计人员，则通常需要导出.svg文件，这些文件可以在设计程序中编辑，并且可以通过代码在应用程序或浏览器中绘制。当导出SVG时，代码应该尽可能简洁。选择Figma的另一个重要原因是它有超小的SVG导出，并且还能自动优化。

　　

交付

　　

或许你能做出完美无瑕的图标，但如果不能让它们产品中有所作为的话，那将毫无意义。所以在你开始设计之前，可以和开发人员谈谈，他们能告诉你图标交付的要求，这将驱动你的一些选择，比如图标的粗细或大小。问问其他设计师过去做过什么，以确保你们没有重复工作。你还可以和市场运营人员聊一下，看看他们在日常物料中缺少什么。总之，多向别人寻求反馈、建议和帮助。他们会激励你发现更好的想法，并让你了解自己应该做什么。

　　

转自：设计达人（ID:shejidaren888）
原文地址：designsystems.com/iconography-guide

　　

教你玩转图标icon

　　

　　 　　

是不是很棒的资源，快来学习吧！

　　

限时免费获取方式

　　

关注头条号，评论本文，然后私信小编：就可以免费获取啦

　　

整理：千锋UI设计