Illustrator导出的图总发虚、边缘还带白缝？分辨率和抗锯齿这样设

设计搬砖人

画完一张图，导出 PNG 发出去，自己放大一看：斜线边缘一格一格的锯齿，色块交界处还冒出一条细细的白缝，看着像图没画好。其实画的时候没问题，问题多半出在导出那一步。Illustrator 里导出有三条路，分辨率和抗锯齿两个开关没设对，导出来的图就容易发虚。


先说三条导出路，适用场合不一样：

第一条，文件 > 导出 > 导出为屏幕（快捷键 Alt+Ctrl+E）。这是现在最常用的：可以一次导出多个画板，每个画板还能同时出 1x、2x、3x 三种尺寸，格式能选 PNG、JPG、SVG、PDF。做一套图标、要给开发多倍图的时候用它最顺手。点右上角的齿轮还能进格式设置，改抗锯齿。

第二条，文件 > 导出 > 导出为。一次只导当前画板（或选中的内容），选 PNG 会弹出一个 PNG 选项对话框，能选分辨率、抗锯齿、背景透明还是白色。只出一张图、想精细控制的时候用它。

第三条，文件 > 导出 > 存储为 Web 所用格式（旧版）。这是老办法，固定按 72 ppi 出图，适合快速压一张小图发网上。现在一般用前两条就能覆盖，不用特意记它。

不管走哪条路，先存好 .ai 原文件再导出。导出的 PNG、JPG 是位图，放大就糊、改不回矢量，改图还得回原文件重新导一遍。

分辨率：看用途选，别只图省事

PNG 选项里的分辨率一般是三档：屏幕（72 ppi）、中（150 ppi）、高（300 ppi）。印出来的东西用 300 ppi；只在屏幕上看的，用画板实际像素尺寸出就行，72 ppi 就够。关键是：导出尺寸要一次给够。画板是 500×500 像素，导出时选 1x 就是 500×500；想在高清屏上也清楚，直接在导出为屏幕里加一份 2x 或 3x，比导出小图再用别的软件放大要清楚得多。反过来，图已经导出成 72 ppi 的小图，再放大只会更糊，补不回来。

抗锯齿：图稿优化和文字优化别用反

位图是由一个个像素拼出来的，斜线和曲线边缘本来就会有一格一格的台阶，抗锯齿就是把边缘像素和背景混一下，让台阶看起来不那么明显。PNG 选项里一般有三档：无、图稿优化（超采样）、文字优化（提示）。

图多、形状多、颜色块多的时候选“图稿优化（超采样）”：它先在高分辨率下把整张图渲染一遍，再缩小到你要的尺寸，边缘最平滑。还有一个附带好处：两个色块紧贴着的时候，用文字优化容易在交界处留出一条细白缝，换成图稿优化多半就没了。

以文字为主的图选“文字优化（提示）”：它专门照顾文字边缘，小字看起来更清楚。

“无”是不做平滑，边缘会很生硬，一般只在刻意要硬边缘的像素风格图上用。

画板没对齐像素，边缘也会虚

还有一个容易忽略的点：图和画板的位置如果落在半个像素上，导出时边缘就会被切掉半个像素，看着发虚。导出前可以这样检查：先把视图切换到像素预览（视图 > 像素预览），放大看看边缘是不是干净；再用对象 > 画板 > 适合画板边界，让画板正好贴合画面内容，多余的空白也不进导出图。

格式顺带提一句：要透明背景、线条图、LOGO 这类颜色不多的图，用 PNG；照片类、颜色过渡多的图用 JPG 更省体积，但 JPG 是有损压缩、也不支持透明背景；网页图标想怎么放大都不糊，用 SVG，它是矢量格式。

平时导出图，你是习惯用导出为屏幕批量出，还是导出为一张一张精细调？