图标设计需要熟练使用软件，涉猎各种矢量特征，遮罩，构造立体几何。因此，学生将需要使用不同的软件工具和技能。今天的翻译都是超实用的技能干货。图形创建与图形样式我认为正确区分矢量路径创建和图形样式很重要，因为它们是使用两种截然不同的设计软件-Photoshop和Illustrator完成的。Photoshop的渲染质量和遮罩功能几乎超越所有设计软件，而Illustrator包含丰富的矢量功能。在我的肖像画之旅中，Illustrator一直是矢量路径之王。值得庆幸的是，Photoshop和Illustrator之间的转换非常无缝。通常我的工作流程是这样的：我在Photoshop中制作简单的图形，但如果涉及到一整套图标或任何复杂的图形，我会先在Illustrator中创建它们，然后再转到Photoshop进行样式设计。简而言之，Illustrator用于创建图形，Photoshop用于样式设置和输出。规范如果您可以控制图标大小，图标样式和线条粗细应该有助于规范，因为许多图标必须有一条中心线。也就是说，如果图标的宽度为偶数，则中心线的宽度不能为奇数。同样，如果图标的宽度是奇数，则线宽不可能是偶数。当您使用偶数线宽时，图标大小应为：even(width)xeven(height)。当线宽为奇数时，图标尺寸应为：奇数（宽度）x奇数（高度）。尽量不要混合奇数和偶数尺寸（除非你疯了不混合，然后还要确保为不同的轴使用不同的厚度）。不要用高分辨率掩盖问题——使用1pt（或1dp）的线来表示奇数宽度的图标在Retina配置上可能看起来不错，但在1×和3×尺寸下肯定会发现让你头疼的问题。其实只要把所有的点想象成图标的基本网格，避免过小的偏移定位，一切都没有那么复杂。确保所有图标设计都应以1×开头。OSX应用程序图标使用简单的网格系统来促进应用程序图标的绘制。OSX的应用程序图标尺寸翻倍，因此我可以通过16x16像素图标大致定义1024x1024图标的定位，这使得工作流程更加容易。对于那些极小的版本，无需过多调整细节。但是，Apple的图标不太适合网格系统。出于某种原因，它们相差了几个像素——Safari图标的直径为898像素，而不是896像素，完全适合1/16网格。综上所述，我定义的图标大小与Safari、iTunes等Apple图标并不完全相同，只是1024像素中相差2像素，遵循网格对我来说更重要。好奇苹果为什么选择这个尺寸。iOS应用程序图标iOS应用程序图标在大小上不如OSX图标那么匹配，工作流程也稍微复杂一些。下面列出的是目前所有iOS图标的尺寸。29×2940×4058×5876×7680×8087×87120×120152×152180×1801024×1024(AppStore)目前共有10种尺寸。但是，如果你只需要制作1x的网格尺寸，那么只关注5个主要尺寸。29(1×),58(2×),87(3×)40(1×),80(2×),120(3×)60(1×),120(2×),180(3×)76(1×),152(2×),228(3×)1024×1024(appstore)4个基本尺寸加上1024×1024像素的appstore尺寸，工作量线性减半。另一个好消息是，如果有一天Apple发布3x尺寸的iPad，那么你基本上已经完成了适合该尺寸的图标。一开始，抵制高分辨率尺寸的诱惑并专注于1x尺寸是一种事半功倍的好方法，这可以节省我们的时间并导致更高效和可维护的设计。当时机成熟时，开始制作2×、3×或4×版本还为时不晚。尤其要谨慎使用“智能对象”，注意它们可能有特殊的大小调整。#p#从Illustrator入手Illustrator不仅可以让你在设计1x网格大小的图标时清楚地看到所有矢量节点，而且还有无数其他软件无法实现的独特功能。我对这些功能中的许多功能都看不够，这就是为什么我选择Illustrator作为我的图标工作流程的第一步。Snaptogridsetting我不喜欢Illustrator的snaptopixel设置，但是勾选“View→SnaptoGrid”后的效果还是很理想的，记得关闭snapnewobjectstopixels。可以在“新建文档”或“变换”面板中找到将新对象与像素对齐。如果需要进行非常精细的像素调整，可以使用“移动”面板（对象→变换→移动，或直接按Enter）。自定义工具面板最近，我重新编辑了我的工具面板，删除了一些不常用的工具并显示隐藏的工具。Pathfinder如果您想添加、减去或排除形状（通常称为布尔运算或构造实体几何），Illustrator中的Pathfinder可以说是所有矢量编辑软件中最有用的功能。在Pathfinder中，我也喜欢拆分功能-它将重叠的形状拆分为单独的形状，以便可以轻松删除不需要的部分。ShapeBuilderShapeBuilder功能比Pathfinder更新，使用起来更快。如果您有几个相互重叠的单独形状，请选择形状生成器，拖动鼠标以组合形状，并在拖动时按住选项以减去形状。M选择形状生成器。#p#实时圆角IllustratorCC2014新增了实时圆角功能，像小手柄一样出现在各个角落。拖动小手柄以控制圆角的角度。此功能不仅适用于矩形，它适用于所有形状。实时拐角圆角化使绘制原本难以或耗时的图形成为可能。Illustrator的这一功能与许多其他可爱的功能一样，有助于设计师的工作。如果要精确定义角度，可以在控制面板中输入拐角直径值。DistortIllustrator的Distort和其他包络变形工具可以用来弯曲和扭曲各种形状，使图形更有趣。对于路径的轮廓，我一般是先把笔画转成路径，然后进入Photoshop设置样式。有些软件也有这个功能，但不多。对我来说，这个功能是矢量编辑软件必备的。描边变量在Illustrator中，我们可以调整描边各部分的宽度。选择宽度工具（shift-W），双击要编辑的节点，会出现输入数据的控制面板，可以精确控制宽度。本工具可以准确绘制出其他工具无法绘制的图形。虚线Illustrator中的虚线有两种模式-角对齐和规则间隔。将角与虚线对齐总是看起来更舒服，但是大多数设计软件不包括此选项。虚线可以转化为路径，放入Photoshop中进行后续编辑。#p#SingleTransformation在Illustrator中，同时调整多个对象的大小、旋转角度、位移是相当容易的，它还可以对每个单独的对象以一个单元为单位进行上述各种调整。这个小功能可以为我们节省很多时间和精力。套索的选择当侯爵夫人不足以进行复杂的选择时，套索工具可以。套索工具可以与以下键结合使用：（添加选择）、（减去选择）。图形样式为了提高工作效率，我在Illustrator中设置了一些图形样式。如果您的图标包含许多具有相同图形样式的元素，这肯定会为您节省很多时间。像素预览老实说，Illustrator的像素预览很糟糕，示例图像显示了它的糟糕程度-零星像素，没有渐变抖动等。这使得像素预览无法令人信服。Illustrator的像素预览并没有真正打扰我，因为我最终将在Photoshop中设计样式，但无论如何让我们了解这个功能。图中可以看到Illustrator和Photoshop的像素预览对比，差异还是比较明显的。分散的像素非常危险。iOS和OSX界面图片的规格必须是数据的精确倍数，所以图片中多一个散乱的像素点就会出现问题。Photoshop样式一旦图标的路径建立起来，我就将它们作为形状涂层粘贴到Photoshop中。如果有多条路径，可以在Illustrator中一起选择复制，粘贴到Photoshop后仍然有单独的图层。只需选择一条路径并同时按下J键即可将其移动到新图层中。输出我不推荐通过Illustrator导出位图。我也不会将iOS图标保存为PDF。我使用Photoshop切片来输出PNG或其他位图格式。这种做法有很多好处，比如：你可以选择一个图层加载10秒，或者一整套图标加载100秒；保持风格的完整性；易于编辑。（原作者另外写了一个应用程序设计过程，里面包含了更多关于切片工具的细节，如果童鞋们有兴趣，我可以稍后编译。）如果输出是SVG格式，我一般会结合使用Photoshop的生成器和Illustrator。
