exe图标清晰
After designing hundreds of vector icons that render beautifully at 14 pixels or less, I've learned a few things about designing crisp, readable icons. Here are a few of my secrets.
在设计了数百个以14像素或更小像素精美呈现的矢量图标之后，我学到了一些有关设计清晰易读的图标的知识。 这是我的一些秘密。
向量如何成为像素 (How Vectors Become Pixels)
Before we start, let's chat a bit about how an icon font goes from a vector to individual pixels. Basically, it overlays your vector on top of your pixel grid, then looks at how much of the vector shape lies in each individual pixel. If the pixel has no vector shape overlaid, it renders as 100% of the background color. If it is 100% full, it renders as 100% of the vector shape color. When the pixel is exactly half full (or, ahem, half empty), it would render as 50% transparent. (Real font rendering is a good bit more complex than this, but this model will serve us for now.)
在开始之前，让我们先聊一下图标字体如何从矢量变为单个像素。 基本上，它将矢量叠加在像素网格的顶部，然后查看每个单个像素中有多少矢量形状。 如果像素没有重叠的矢量形状，则将其渲染为背景颜色的100％。 如果100％充满，它将呈现为矢量形状颜色的100％。 当像素恰好是半满(或者，一半是空)时，它将呈现为50％透明。 (真正的字体渲染要比这复杂得多，但是此模型现在可以为我们服务。)
1.渲染清晰的直线 (1. Render Crisp Straight Lines)
This one is the most straightforward. When your lines are straight, you can make sure your icons are perfectly crisp at 14px. If we have lines that are exactly 1 pixel thick, we have a choice for how to render them. Let's look at the first example where we want to create a series of vertical lines that are each 1 pixel wide and 1 pixel apart. If we do it perfectly wrong, we can actually end up with a square with 50% opacity and no indication that we intended to render vertical lines:
这是最简单的。 如果直线是直线，则可以确保图标清晰无瑕(14像素)。 如果我们的线条正好是1像素粗，我们可以选择如何渲染它们。 让我们看一下第一个示例，我们要创建一系列垂直线，每条垂直线的宽度分别为1像素和1像素。 如果我们做的完全错误，实际上我们可以得到一个不透明度为50％的正方形，并且没有任何迹象表明我们打算渲染垂直线：
Half-pixel offset in vector design (left) causes image to render blurred at 50% gray (right).
矢量设计中的半像素偏移(左)使图像在50％灰度下呈现模糊(右)。
However, if we align the edges inside the pixels correctly, we can get perfectly crisp edges:
但是，如果我们在像素内部正确对齐边缘，则可以得到完美的清晰边缘：
No pixel offset in vector design (left) causes image to render crisply (right).
矢量设计中没有像素偏移(左)导致图像清晰呈现(右)。
2.渲染对角线 (2. Render Crisp Diagonals)
Diagonals turn out to be a bit more complex than straight lines. In the good ole days of pixel editing, you could get a crisp diagonal by stair-stepping down an edge. Let's see what happens when we do something similar with our vector shape, creating a triangle with points at pixel corners:
对角线比直线要复杂一些。 在像素编辑的美好时光中，您可以通过逐步下移边缘来获得清晰的对角线。 让我们看看对矢量形状进行类似的操作，创建一个在像素角处有点的三角形时会发生什么：
Vector design splits pixel directly in half (left), causing image pixels to render blurred at 50% gray (right).
矢量设计将像素直接分成两半(左)，使图像像素在50％的灰度下呈现模糊(右)。
This makes sense when we think about it. We've split the line of pixel perfectly in half, so of course it renders blurred at 50% opacity! But if we shift the line any direction a half-pixel, we'll improve the result. We'll get one set of pixels that are 12.5% gray and another set that's 87.5% gray. Visually, that's pretty close to our stair-step, and we can keep our straight line:
当我们考虑时，这是有道理的。 我们已经将像素线完美地切成两半，因此当然它在50％的不透明度下呈现模糊效果！ 但是，如果我们将线向任何方向移动半像素，我们将改善结果。 我们将获得一组12.5％灰度的像素和另一组87.5％灰度的像素。 在视觉上，这非常接近我们的阶梯，我们可以保持直线：
Vector design splits offset by a half-pixel (left), causing image pixels to render crisply at 87.5% and 12.5% gray (right).
矢量设计将偏移分开半个像素(左)，从而使图像像素以87.5％和12.5％的灰度(右)清晰呈现。
3.保持外缘酥脆 (3. Keep Outer Edges Crisp)
If you're choosing the width of a line, use whole pixels when you can to render crisp lines. But if you need a fractional width for a border, make the inner border blurry instead of the outer. This improves the crispness of the icon, as the eye is first drawn to the outer border.
如果选择线条的宽度，则在渲染清晰线条时应使用整个像素。 但是，如果您需要边框的分数宽度，请使内部边框模糊而不是外部边框模糊。 由于首先将眼睛吸引到外部边界，因此可以提高图标的清晰度。
Vector design offset by a half-pixel on the outside (left), causing blurred pixels on the outer border (right).
矢量设计在外侧(左)偏移了半个像素，从而导致外侧边框(右)上的像素模糊。
Vector design offset by a half-pixel on the inside (left), causing blurred pixels on the inner border (right).
矢量设计在内部(左)偏移半个像素，导致内部边框(右)模糊。
4.探路者是你的朋友 (4. Pathfinder is Your Friend)
Often icon shapes quickly become complex and layered, but you'll need to get them down to just a single layer for consumption by your favorite font editor. Illustrator's Pathfinder tool (or the Sketch equivalent) is your friend. It allows you to easily take layers of shapes and do lots of helpful things like combine, find intersection, minus-front, and lots more. Learn it. It's invaluable.
通常，图标形状会Swift变得复杂和分层，但是您需要将它们降低到仅一层，以供您喜欢的字体编辑器使用。 Illustrator的探路者工具(或等效的Sketch )是您的朋友。 它使您可以轻松地制作各种形状的图层，并做很多有用的事情，例如合并，查找相交，负前部等等。 学习吧。 这是无价的。
5.记住视网膜，但要为非视网膜设计 (5. Remember Retina, but Design for Non-Retina)
Retina displays are gorgeous. And icon fonts are a great way to take advantage of them. But when creating icons, I recommend designing for non-Retina displays. If the icons look good on non-Retina, they'll also look great at 4x the resolution. Our examples above would all render perfectly crisp on Retina, but aren't nearly as good as they can be on non-Retina displays.
视网膜显示屏非常漂亮。 图标字体是利用它们的好方法。 但是在创建图标时，我建议为非Retina显示器设计。 如果这些图标在非Retina上看起来不错，它们的分辨率也将提高4倍。 上面的示例将在Retina上完美呈现清晰的图像，但效果不如在非Retina显示器上。
6.实验！ (6. Experiment!)
Most often, your shapes are more complex than straight lines and 45° diagonals. The best way to know how an icon is going to render at 14px is to just give it a shot and iterate, learning along the way. When designing an icon for Font Awesome, it isn't uncommon to go through twenty iterations and spend 8+ hours on a tricky icon. But it's worth it in the end to create crisp, readable icons that render great at small sizes.
通常，您的形状比直线和45°对角线更复杂。 知道图标将如何以14像素渲染的最好方法是给它一个镜头并进行迭代，并一路学习。 当为Font Awesome设计图标时，经历20次迭代并花8个小时以上的时间制作一个棘手的图标并不少见。 但是最终值得创建清晰易读的图标，以小尺寸显示效果很好。
This article builds off the seminal work of GitHub designer Cameron McEfee in his article The Making of Octicons. If you haven't read it, start there.
本文基于GitHub设计师Cameron McEfee在他的文章The Making of Octicons中的开创性工作。 如果您尚未阅读，请从此处开始。
翻译自: https://davidwalsh.name/6-tips-designing-crisp-readable-icons
exe图标清晰