UI设计师如何进行切图

Question

如题所述

Answer 1

切图是设计师交付给开发的产物之一，设计稿完成后，设计师需要将其切成便于制作成页面的图片。设计师切图时就需要用到切图工具，比如摹客，可以自动切图（支持Sketch、Adobe XD、PS的设计稿），设计师只需在设计稿上进行切图标记，上传至摹客即可，无需手动，开发可以自主下载和使用。

如何切图？其实很简单：（以PS切图为例）

Step 1.安装并打开插件
插件安装好后打开PS，在「窗口>扩展功能」找到摹客 插件，选择并打开。使用摹客平台账号登录。
Step 2.标记切图
在完成的设计稿上，选中需要切图的图层或编组，点击「标记切图」。将在名称前增加“-e-”，「标记切图」变为「取消切图标记」，则标记切图完成。
Step 3.上传至摹客
标记切图后，一键将设计稿上传至云端项目中，开发工程师就可以自主下载切图，只需在右侧面板中选中切图，点击即可下载。

除了自动切图，还有更多亮点功能：
1. 切图压缩：在右侧面板中选中切图
2. 切换平台和选择倍率：iOS、Android、Web
3. 下载选中切图，一步到位。

摹客还支持Sketch、Adobe XD的自动切图，下载插件即可：
下载地址：
摹客：https://www.mockplus.cn/download/idoc-ps/?hmsr=baiduzhidao
Sketch：https://www.mockplus.cn/download/idoc-sketch
adobe XD：https://www.mockplus.cn/download/idoc-xd

Answer 2

切图资源尺寸必须为双数

2.图标切图输出应根据标准尺寸输出并且考虑到手机适配（主要是iPhone 6plus的适配）

3.降低图片大小：在切图资源输出中图标切图输出是很重要的部分，比如新手引导页、启动页面、默认图、广告图等。图片切图一般情况下文件大小都是相对较大，不利于用户在使用app过程中加载页面。因此图片切图要尽量压缩图片文件的大小、

4.可点击部件应当注意其点击区域不小于88px

5.可点击部件要把相关状态都切图输出，比如正常状态、点击状态。

以上是部分切图规范

本回答被网友采纳

Answer 3

切图就是把用设计软件设置好的图片切百成相应的大小，切图后再把图片上传就可以可以加快度显示速度，不用等整个图片都下载以后显示。

Answer 4

看你用的是什么工具啦，现在已经不用手动切图了
蓝湖有ps、sketch的自动切图插件，下载一个超方便

Answer 5

现在都是设计师标记好尺寸之后通过插件上传到蓝湖
蓝湖直接帮你完成了切图。
开发只需要去蓝湖看标注信息和下载切图即可
很省事很方便