Pixso如何使用切片工具_框选导出区域指定切图范围大小【切片】

冬墨酱_8248

冬墨酱_8248

2026-05-14

306人浏览

原创

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

pixso如何使用切片工具_框选导出区域指定切图范围大小【切片】

如果您在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坐标值设定切片左上角起点位置。

科学计算器在线使用工具代码
科学计算器在线使用工具代码

html5 css3制作在线科学计算器ui布局,3D计算器面板,加减乘除数字计算器工具特效。

下载

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、确认导出路径与文件名,点击「导出」按钮。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

pixso

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
go语言 数组和切片
go语言 数组和切片

本专题整合了go语言数组和切片的区别与含义,阅读专题下面的文章了解更多详细内容。

2025.09.03

1712

14

Linux 新手先学哪些命令
Linux 新手先学哪些命令

Linux新手命令专题汇集终端基础、文件目录操作、文本查看、软件安装和权限管理等入门文章,帮助按实际任务练习常用命令并建立命令行操作习惯。

2026.10.15

0

20

MySQL 忘记密码怎么办
MySQL 忘记密码怎么办

MySQL忘记密码专题汇集不同版本与系统下的root密码重置方法,覆盖MySQL 5.7、8.0、Mac、Linux及本地集成环境,并提示恢复权限与重新登录的检查步骤。

2026.10.15

0

18

Vue.js 中 ref 和 reactive 的区别
Vue.js 中 ref 和 reactive 的区别

Vue.js中ref和reactive的区别专题汇集两种响应式API的定义、访问方式、对象解构、侦听与性能取舍等文章,帮助结合实际状态类型选择合适写法。

2026.10.15

0

20

VS Code 怎么配置开发环境
VS Code 怎么配置开发环境

VS Code开发环境专题汇集编辑器安装、语言扩展、编译器、解释器、终端和调试配置文章,覆盖Java、Python、C++和PHP等常见语言的入门设置。

2026.10.15

0

18

C++ 开发环境怎么搭建
C++ 开发环境怎么搭建

C++开发环境专题汇集Windows、Linux下的编译器与IDE安装配置教程,涵盖GCC、Clang、Visual Studio、CLion和VS Code,以及编译运行首个程序的步骤。

2026.10.15

0

19

Python 虚拟环境是什么
Python 虚拟环境是什么

Python虚拟环境专题介绍项目依赖隔离的作用,汇集venv与uv创建、激活、退出及解释器切换的相关文章,并覆盖Windows、Linux和VS Code中的常见配置问题。

2026.10.15

0

15

Python 怎么安装并配置环境变量
Python 怎么安装并配置环境变量

Python安装与环境变量配置专题汇集Windows、macOS和Linux的安装步骤、PATH设置、pip配置及常见报错排查文章,帮助完成解释器安装并验证命令行可以正常运行。

2026.10.15

0

15

PHP 连接 MySQL 失败怎么办
PHP 连接 MySQL 失败怎么办

PHP连接MySQL失败专题汇集PDO与MySQLi扩展配置、账号权限、主机端口、套接字和认证方式等排查文章,覆盖连接报错、密码变更与容器环境配置,帮助按错误提示定位原因并修复。

2026.10.15

0

18

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
JDK 27官方文档
JDK 27官方文档

共0课时 | 0人学习

LLVM入门手册
LLVM入门手册

共0课时 | 0人学习

Buffalo框架快速入门指南
Buffalo框架快速入门指南

共0课时 | 0人学习