PxCook怎么设置倍率_切换1x2x3x倍率适配不同屏幕【倍率】
时间:2026-05-03 10:01:17 142浏览 收藏
最近发现不少小伙伴都对文章很感兴趣,所以今天继续给大家介绍文章相关的知识,本文《PxCook怎么设置倍率_切换1x2x3x倍率适配不同屏幕【倍率】》主要内容涉及到等等知识点,希望能帮到你!当然如果阅读本文时存在不同想法,可以在评论中表达,但是请勿使用过激的措辞~
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、鼠标悬停于切图名称上,可快速查看其原始图层尺寸、导出尺寸及缩放比例。
本篇关于《PxCook怎么设置倍率_切换1x2x3x倍率适配不同屏幕【倍率】》的介绍就到此结束啦,但是学无止境,想要了解学习更多关于文章的相关知识,请关注golang学习网公众号!
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
291 收藏
-
343 收藏
-
204 收藏
-
242 收藏
-
131 收藏
-
373 收藏
-
318 收藏
-
274 收藏
-
264 收藏
-
427 收藏
-
177 收藏
-
100 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 485次学习