设计中的像素指南

完美的像素图标和排版脱颖而出在人群中。显然，我们都想为这种精致的作品而奋斗，但有时即使经过努力，我们仍然会得到一些……需要弥补的东西。像素提示是完美需要改进的技巧。尽管超高分辨率显示器，像苹果的视网膜显示器还需要“假”的光滑曲线，免得我们忽略了一个像素化的困境。

 

什么是矢量图？

矢量图基本上是呈现形状放大而不失真。当你在屏幕上看到任何东西时，这是因为您的计算机渲染了这些对象并将它们绑定到了显示器上的像素。在这样做的时候，你的计算机也决定了应该和不应该将整个像素显示出来。例如，大写字母“S”既有完美的直线，又有曲线。

正如你所看到的，没有抗锯齿，“S”上的曲线非常像素化。因此，为了补偿，渲染矢量图形时，通常会使用消除锯齿的方式来提供更稳固的外观。不仅显示在向量轮廓内的像素，还逐渐将像素渐变出来。这会诱使你的大脑在弯曲的形状上看到更平滑的线条，而不会完美地捕捉到像素网格。

你可以看到渲染的“S”是如何呈现半像素化，以消除锯齿像素化。然而，同样的功能也带来了一个问题:计算机在弄清楚什么是视觉上吸引人的方面很low。所以，在添加半像素时，圆角看起来很棒，同时也使顶部/底部内线看起来模糊不清。渲染矢量形状时发生的自动抗锯齿最终会使形状和版式的大部分看起来效果很棒，但会使其他部分的质量比原来更差。

 

像素提示

现在已经了解了矢量形状的简短背景以及它如何运用，让我们进入实际的操作。像素提示以更美观的方式将矢量的锚点移动到像素边界上。使这些直线更加完美，同时仍然将半像素留给曲线。最常见的是，像素提示用于排版和形状的光栅图像（标志，图标，品牌等）。现在，最重要的是，为了适当调整你的矢量，它必须是你想要的大小和形状。在我们开始之前，请确保以下设置被调整（我将使用Photoshop来执行此任务）：

·         打开你的像素网格（“查看”>“显示”>“网格”，并确保“显示”菜单上方选中“

·         确保网隔每10个像素有一个网格线，并有10个细分。或者类似，以便每个像素之间有一条线。

像素排版

形状与排版的过程略有不同，所以将演示两个案例。理想的印刷术，你想在你的提示过程之前或期间确定你的类型。无论如何，像素应该是你做的最后一件事。

首先，选择您想要的像素提示的排版并制作该图层的副本，然后将该图层转换为形状。

可以看到文字在水平和垂直轴上均偏离网格。为了解决这个问题，我们将轻轻地推动每个字母的锚点，直到它与布置的像素网格更紧密地对齐。目标是让形状线尽可能靠近网格线。放大以更精确地推动锚点。在此过程中，经常缩小以确保您的调整看起来不错。

你不想符合精确到电网，为夺摆在首位抗锯齿的优势。相反，尽量保持一致 - 只允许每个轴一侧的半像素。例如，我总是允许半个像素位于字母的右侧和顶部，同时强制左侧和底部边缘与网格齐平。

正如你所看到的，“进入”已经大致调整，而“触摸”保持原样。就像字距一样，像素提示更像是一门技术而不是科学。调整后，需要敏锐的眼光来看待和辨别作品是好看还是差劲。不要灰心，如果你发现印刷像素暗示粗糙，迭代和继续使用它。如果您的结果仍然看起来不合格，您可以随时删除该图层并再次从原始图像中复制新图像。需要一段时间才能让印刷术看起来很棒，只要继续努力，迟早你的辛苦工作就会获得回报。

像素矢量形状

通常，像素提示形状是为图标保留的。你要确保你的形状在开始之前达到你想要的大小和旋转角度，以后再进行调整可能会丢掉你所有的努力工作。调整形状要容易得多，而且对内在细节的要求也较低。这就是说，更复杂的形状需要更长的时间，而且很难调整，所以最好从简单的开始。

总结

看起来更清晰和更专业的图像。虽然电脑完成的自动抗锯齿看起来可以接受，但它可能会更好。因此，当涉及到栅格形式的重要图标/排版时，像素提示不仅仅是一种小众技能; 直到我们全部使用高像素密度显示器的那一天，这是至关重要的。