UI设计为什么要切图，所谓的切图是用什么工具切？
时间：2024-02-16 02:35:01 | 来源：网站运营
时间：2024-02-16 02:35:01 来源：网站运营
UI设计为什么要切图，所谓的切图是用什么工具切？：切图是指将设计稿切成便于制作网页或 App 的图片，通常是前端工程师还原设计稿必不可少的一步。
简单来讲，前端工程师拿到设计师交付的设计稿，通常是从设计软件中导出整个页面，这样页面中包含的元素就会「黏连」在一起，不方便前端开工程师进行开发。
此时，为了把黏连在同一张图片中的元素分开，就需要用到
切图。
想对设计稿进行切图，皮仔推荐你使用
完全免费的在线切图工具——Pixso。
Pixso，一款基于浏览器的在线设计工具，集合了
原型、UI、交互、切图、标注与
交付功能，支持导入来自 Ps、Figma、Sketch、Xd、Axure 等的设计文件，可实现
用一款软件对多种设计文件进行切图，不需要为不同的设计文件而到处寻找切图工具了。
Pixso：新一代设计协作工具在浏览器打开 Pixso 官网
pixso.cn ，点击右上角的「免费使用」进入
Pixso 工作台，接着点击工作台顶部的「导入文件」，在打开的窗口，可将需要切图的文件上传到 Pixso 中。
将文件导入 Pixso 后，点击顶部工具栏的加号 + ，在展开的面板，选择其中的「
切片」工具，快捷键为 S。
在需要导出切图的元素上方绘制一个切片，如下图的蓝色框框。
用鼠标拖拽移动切片区域四周的控件，可以自由调整切片的大小。
更改切片的大小调整好切片的大小后，在选中切片的情况下，点击导出右侧的加号 + ，配置切图的导出选项，默认导出 PNG 格式的 1 倍图，点击下方的「缩略图」，可以在导出前预览切图的效果。
如果你想同时导出不同分辨率的切图，可以再次点击导出右侧的加号 + ，添加另外一个导出选项，配置相应的分辨率或图片格式。
如果你觉得手动配置切图的导出选项比较麻烦的话，可以点击「导出」选项右上角的设置按钮，在弹出的面板，可以看到 Pixso 提供了 3 种导出预设——iOS 预设、Android 预设和 Web 预设。
至于到底要选哪一种预设，可以根据切图最终使用的场景选择。
选择其中一种预设后，下方会自动添加预设中包含的多种导出配置，如下图右侧的面板，是 Android 预设包含的 5 种导出配置，从 1 倍 ~ 4 倍分辨率不等，不同分辨率的切图对应不同的后缀名，方便前端工程师可以通过文件名称识别不同倍率的切图。
此外，如果担心导出的切图体积太大，可以启用下方的「图片压缩」，从右侧的选项选择一种
压缩强度，即可在导出切图的同时，对图片进行压缩，减少切图占用的空间。
当我们在设计稿多处都添加了切片，并且都配置好导出选项后，我们可以将右侧的面板切换到「标注」选项卡，点击下方的「切图」子选项，再选择「
查看当前页面所有切图」。
此时右侧面板就会列出设计稿包含的所有切图，勾选底部的「复选框」，可以选中所有的切图，再点击右侧的「导出」按钮，就可以将所有的切图
批量导出到本地。
✅ Pixso 个人版完全免费
使用在线设计软件 Pixso 进行切图，既能兼容多种设计文件，更重要的是，Pixso 对
个人用户完全免费，现在前往 Pixso 官网注册账号，可以享受到 Pixso 会员的所有权益：
无限文件数量、无协作者人数限制、无限云存储空间、3000+ 免费设计资源任你用等，满足个人和小型团队在线设计协作需求，免费享受丰富设计资源和高效协作体验！
码字不易，如果对你有帮助的话，请别忘了赏个
【三连】或是
【关注】我哦，关注不迷路！
我是皮仔 @Pixso协同设计，那我们下次再见咯。
在线咨询
