pixso中可借助切片工具将ui设计特定区域精确导出为图片或pdf:一、手动绘制切片;二、图层转切片;三、数值精调位置尺寸;四、参考线辅助定位;五、导出pdf。

如果您在Pixso中已完成UI设计,但需要将特定区域精确提取为独立图片资源供开发使用,则需借助切片工具框选导出范围。以下是实现该目标的多种操作路径:
一、使用顶部工具栏启动切片并手动绘制区域
该方法适用于对任意不规则或非图层对齐区域进行精准控制,通过鼠标拖拽定义矩形切片边界,支持后续数值微调与多倍率导出设置。
1、点击Pixso顶部工具栏中的「切片」图标(或按快捷键S)。
2、在画布上按住鼠标左键拖动,绘制覆盖目标内容的矩形区域。
3、松开鼠标后,该区域自动转为可编辑切片,右侧属性面板显示「导出」设置项。
4、在「导出」区域点击「+」号,添加所需倍率(如@2x、@3x、0.5x等)及格式(PNG、JPEG、SVG)。
5、勾选「修剪透明像素」以去除切片内空白边缘。
6、右键切片区域,选择「导出切片」,或点击右侧面板底部的「导出」按钮执行导出。
二、基于图层或对象自动生成切片
该方法适用于图层结构清晰、需批量处理图标或组件的场景,系统会依据所选图层的实际轮廓自动生成贴合边界的切片,避免手动框选误差。
1、在图层面板中按住Ctrl(Windows)或 Command(Mac)键,多选需导出的图层或对象。
2、右键任意所选图层,在弹出菜单中选择「转换为切片」。
3、切片自动生成并包裹所有选中图层的外接矩形范围,右侧属性面板同步激活导出配置。
4、在「导出」设置中点击「+」号,添加多个导出规格(例如同时添加@2x PNG与@3x PNG)。
5、确认已启用「修剪透明像素」选项。
6、点击右侧面板底部的「导出」按钮,或右键切片选择「导出切片」完成输出。
三、通过数值输入精确设定切片尺寸与位置
该方法适用于需严格匹配标注规范或适配特定设备分辨率的切图任务,支持直接输入X/Y坐标、宽高值,确保切片边界零误差。
1、使用工具栏「切片」工具在画布上单击创建一个初始切片。
2、选中该切片,在右侧属性面板中找到「位置」与「大小」字段。
3、手动输入X、Y坐标值设定切片左上角起点位置。
4、输入W(宽度)与H(高度)数值,精确控制切图范围大小。
5、在「导出」区域点击「+」号,选择预设平台属性(如iOS @2x、Android XXHDPI)或自定义倍率。
6、勾选「背景色」关闭项以确保导出透明背景(如需)。
7、点击「导出」按钮执行导出操作。
四、结合参考线与智能吸附辅助切片定位
该方法适用于需对齐网格、安全边距或与其他元素保持固定间距的切图场景,利用Pixso内置参考线系统提升框选精度。
1、点击顶部菜单「视图」→「显示参考线」,启用参考线显示。
2、拖动标尺生成垂直/水平参考线,或使用「视图」→「新建参考线」输入精确位置值。
3、启用「智能吸附」(默认开启),确保切片边缘在拖动时自动对齐参考线与图层边界。
4、使用「切片」工具拖拽绘制区域,观察边缘是否吸附至目标参考线。
5、调整切片大小后,在右侧导出设置中点击「+」号添加导出规格。
6、启用「修剪透明像素」并取消勾选「背景色」(如适用)。
7、右键切片区域,选择「导出切片」完成导出。
五、使用切片工具导出指定区域PDF文件
该方法适用于交付设计说明、局部交互示意或静态评审材料,可将任意框选区域直接生成PDF格式文档,保留矢量清晰度。
1、点击顶部工具栏「切片」工具(或按快捷键S)。
2、在画布上拖动鼠标框选需导出为PDF的区域。
3、右键该切片区域,在上下文菜单中选择「导出切片」。
4、在弹出的导出窗口中,将格式下拉菜单切换为「PDF」。
5、确认导出路径与文件名,点击「导出」按钮。











