Illustrator是矢量软件,但导出PNG会栅格化。如果图形没有对齐像素网格,或者导出时发生了非整数倍缩放,边缘就容易出现“半个像素”的模糊。
在“画板工具”里检查画板宽高是否为整数像素(例如 1024 x 1024)。如果你用的是毫米/厘米单位,建议临时切到像素单位,避免出现 1023.8 这类小数。
常用做法:
1)选中图形,打开“变换”面板,确保 X/Y/W/H 不出现过多小数。
2)对需要锐利边缘的矩形/线条,尽量让位置和尺寸为整数。
3)如果你在做图标,线条描边建议用整数像素,并注意对齐方式(居中/内侧/外侧)。
文件 > 导出 > 导出为(PNG):
1)分辨率选择“屏幕(72ppi)”通常最稳;如果要更大尺寸,尽量用 2x/3x 这种整数倍。
2)抗锯齿:做UI图标/界面元素时可优先选“艺术优化(超采样)”或根据效果切换;如果追求极硬边缘,可对比“文字优化(提示)”。
常见坑是:画板是 1000px,但你导出到 900px 或 1100px。建议把画板直接做成目标尺寸,再导出 1x/2x/3x,避免在导出阶段缩放。
1)画板设为目标尺寸(整数像素)。
2)关键形状位置/尺寸改为整数像素,必要时微调到像素网格上。
3)导出PNG时选择 1x 或 2x/3x,避免自定义到非整数比例。
4)导出后用系统自带预览或浏览器以 100% 查看,不要用图片查看器的“适应窗口”判断清晰度。
1px线条如果落在半像素位置,就会变成两边各0.5px的灰边。把线条位置调到整数像素、或把描边改为对齐内侧/外侧,通常能明显改善。