pxcook切图尺寸不匹配需检查设备类型与设计稿分辨率设置:photoshop/sketch中依画板宽度选ios/android,按1x/2x/3x物理像素密度设分辨率;局部图层组可用@bounds/#控制裁切;协作端可切换倍率预览验证。

如果您在使用PxCook进行切图标注时,发现导出的图片尺寸与目标设备不匹配,则可能是设计稿分辨率与倍率设置未正确对应。以下是设置1x、2x、3x倍率以适配不同屏幕的具体操作方法:
一、在Photoshop中设置设备类型与设计稿分辨率
该设置决定PxCook插件如何按基准缩放生成各倍率切图,实际输出尺寸由标记图层原始像素值结合所选分辨率共同计算得出。
1、确保已安装PxCook 3.9.x及以上版本,并重启Photoshop使插件生效。
2、通过菜单栏进入 窗口 > 扩展功能 > PxCook-切图,打开右侧切图面板。
3、在切图面板顶部找到“设备类型”和“设计稿分辨率”下拉选项。
4、根据当前PSD画板的实际宽度选择设备类型:若画板宽为375px,选iOS;若为360px或720px,选Android。
5、依据设计稿所处的基准倍率选择分辨率:若画板是按1倍物理像素绘制(如375×667),则选1x;若按2倍绘制(如750×1334),则选2x;若按3倍绘制(如1125×2001),则选3x。
二、在Sketch中配置Flavor导出面板的倍率参数
Sketch通过Flavor插件将画板与切图同步至PxCook,其倍率逻辑与Photoshop一致,仅界面位置不同。
1、安装PxCook 3.9.4及以上版本后,重启Sketch确保插件加载。
2、在Sketch右侧面板中找到并点击Flavor插件图标。
3、点击第一个导出工具按钮,弹出导出设置面板。
4、在面板中确认设备类型与当前画板所属平台一致(iOS/Android/Web)。
5、在设计稿分辨率选项中,选择与画板原始像素密度对应的值:例如750px宽画板对应iOS 2x,1125px宽画板对应iOS 3x。
6、完成设置后点击导出,PxCook将自动按1x、2x、3x三档生成对应尺寸切图。
三、通过图层组内@bounds或#图层控制局部倍率输出
当某组图标需单独指定输出尺寸而非跟随全局倍率时,可通过图层命名与结构实现精准控制。
1、选中需独立设定倍率的图层,右键选择编组(Group)。
2、在组内新建一个形状图层,使用矩形工具绘制所需切图范围区域。
3、将该形状图层重命名为@bounds或#(二者等效)。
4、确保该图层位于组内最顶层或最底层,且未被隐藏或锁定。
5、返回PxCook切图面板,对该图层组点击标记为切图,插件将严格按@bounds图层边界裁切,并依全局分辨率设置生成多倍率文件。
四、在PxCook协作项目中查看与切换倍率显示
PxCook Web端或桌面端支持在开发模式下实时切换倍率视图,便于验证标注与切图是否符合预期。
1、将画板成功导入PxCook协作项目后,进入对应画板页面。
2、点击右上角开发模式按钮,切换至开发者视角。
3、在右侧边栏切图列表中,每张切图名称后均标注有1x / 2x / 3x标识。
4、点击任意切图条目,右侧预览区将显示该倍率下的实际尺寸与像素值。
5、鼠标悬停于切图名称上,可快速查看其原始图层尺寸、导出尺寸及缩放比例。











