Ps导出二倍图模糊？DPI设置正确吗

Question

在使用Photoshop导出二倍图（@2x）时，常出现图像模糊的问题，即使DPI设置为72或正确匹配屏幕显示。核心原因往往并非DPI错误，而是画布尺寸与输出尺寸不匹配。DPI对屏幕显示无直接影响，移动端和网页只认像素尺寸。若设计稿未按实际物理像素绘制（如本该375×667px却用187.5×333.5px），导出后放大即模糊。正确做法是：以100%视图比例设计，确保图像分辨率为72PPI，导出时使用“导出为”或“导出资产”功能，明确输出2x倍像素尺寸，并检查缩放比例是否为200%。避免依赖DPI控制清晰度，应以像素维度为准。

Answer 1

Photoshop导出@2x二倍图模糊问题的深度解析与系统化解决方案

一、现象描述：为何@2x导出图像模糊？

在移动端和响应式网页设计中，设计师常需为高分辨率设备（如Retina屏）导出@2x资源。然而，即使将DPI设置为72，导出后的图像仍可能出现模糊现象。这种模糊并非由打印分辨率引起，而是源于像素层面的设计与输出错配。

• 用户误以为DPI影响屏幕清晰度
• 画布尺寸仅为物理像素的一半（如187.5×333.5px用于375×667px设备）
• 导出时未正确缩放至200%
• 使用“另存为”而非“导出为”功能导致压缩或尺寸错误
• 图层本身位于非整数坐标，引发亚像素渲染模糊

二、核心原理剖析：DPI与PPI的本质区别

属性	DPI（Dots Per Inch）	PPI（Pixels Per Inch）
定义	打印时每英寸墨点数	屏幕上每英寸像素数
应用场景	印刷品输出	数字显示设备
对Web/移动端影响	无直接影响	决定视觉密度
典型值	300 DPI（印刷）	72~400 PPI（屏幕）
Photoshop中的作用	仅用于打印尺寸计算	不直接控制显示质量

三、技术路径分析：从设计到导出的关键节点

1. 新建文档时选择目标设备的物理像素尺寸（如iPhone 13为390×844px）
2. 设置分辨率72 PPI——仅为惯例，不影响输出清晰度
3. 关闭“缩放比例以适合屏幕”选项，确保视图为100%
4. 所有图层对齐像素网格，避免亚像素偏移
5. 使用矢量形状或智能对象保留可伸缩性
6. 导出阶段启用“导出为”（Export As）或“导出资产”（Generate > Assets）
7. 指定缩放比例为200%，生成@2x版本
8. 命名规则遵循[e-mail]标准
9. 验证输出文件尺寸是否为原始设计尺寸的两倍
10. 在真实设备或模拟器中预览渲染效果

四、常见误区与反模式案例

// 错误做法示例：
- 设计稿尺寸：187.5 × 333.5 px （仅为375×667的一半）
- 导出时手动放大至200% → 导致插值模糊
- 依赖DPI=144来“提升”清晰度 → 屏幕忽略该参数

// 正确做法逻辑链：
if (targetDevicePixelRatio === 2) {
  designCanvasSize = physicalScreenSize * 2;
  exportScale = 100%; // 因已按实际像素设计
} else {
  designCanvasSize = physicalScreenSize;
  exportScale = 200%;
}

五、流程图：@2x图像导出决策树

graph TD A[开始设计] --> B{目标设备是否为Retina/高PPI?} B -- 是 --> C[创建画布为物理像素尺寸
e.g. 375×667px] B -- 否 --> D[创建常规尺寸画布
e.g. 375×667px @1x] C --> E[设计元素严格对齐像素网格] D --> E E --> F{导出方式} F --> G["导出为..." 或 "导出资产"] G --> H[设置缩放比例: 200% for @2x] H --> I[检查输出尺寸是否匹配预期] I --> J[在设备上验证清晰度]