如何使我的矢量徽标在网络上看起来超级清晰？

我与Illustrator做了很多工作，但是我从未对我的作品在我们网站上的外观感到超级满意。我尝试了各种技术-从Illustrator中保存，然后在Photoshop中打开并保存-但我仍然缺少一些东西。

埃德 徽标仅以AI的形式提供。无论是从Illustrator中保存Web和设备，还是将矢量带入Photoshop，我都会得到相同的模糊结果。我倾向于在Illustrator中缩放到所需的大小，然后保存为Web（inc类型已优化-徽标中有文本）。

对矢量图形进行栅格化时，如果线条落入像素边界，则线条会显得清晰。这可以通过光栅化器（四舍五入）来完成，但是我知道大多数矢量图形程序都不支持。解决这一问题的一种策略是使用一个网格，该网格的单元格跨度为像素的整数（一个单元格为1x1或2x2或3x3，...像素）。

对于图标，16x16网格是一个好的开始，因为它允许从同一矢量图形生成16x16、32x32、48x84等清晰的图标。

对于徽标，在徽标的最小表示中具有1个单元格= 1像素的像素网格是一个好的开始。

这是解释此技术的教程：Inkscape中的矢量灯泡图标

您可以做很多事情。

1. 使用无损压缩的图像格式，例如PNG
2. 确保向量路径尽可能与像素网格对齐
3. 增强图像和背景之间的对比度（通过颜色，通过亮度或同时通过两者）
4. 在图像编辑软件中应用锐化滤镜
5. 结合使用以下效果：较暗的边框+较亮的辉光（在浅色背景上）或较暗的边框+较暗的辉光（在较暗的背景上），如下所示：

6. 另一种技术是将矢量徽标的大小调整为200％，将其与背景合并，将其展平为位图，然后再将位图的大小重新调整为100％。有时会有所作为。

作为一个网络图形软件，我强烈推荐Adobe Fireworks，因为除其他原因外，它更适合像素完美的设计。

您没有提供有关您的流程的太多信息，也没有提到，但是我想我会把这个选项丢给您。如果您经常在Illustrator中进行设计并且正在寻找一种显示图形的方法，则可以在Illustrator中完成另一种方法，称为SVG。

SVG随网站背景而变得越来越频繁，并且具有重新调整大小而不会造成损失的功能，我已经看到更多将其与图标一起使用。我提供了一些资源，您可以在这里阅读有关使用SVG的信息：

• 使用SVG获得灵活，可扩展和有趣的背景，第一部分
• 如何将可缩放的矢量图形添加到您的网页
• 使用SVG

您可以在Illustrator中调整矢量文件的大小。将其另存为PDF，并具有以下预设：压缩-彩色位图图像-双三次降采样至：您想要的任何大小-压缩：'JPEG'-图像质量：'最大'。保存它，并将PDF文件放在Photoshop中的大小为300 PPI的文件中（例如125 x 125像素）。另存为PNG。您可以将其放置在站点中。非常尖锐。