Question

UI设计中的切图是怎么切

Answer 1

UI切图一般都会用到专门的软件，比如我们用的摹客，Sketch、Adobe XD、PS的设计稿都支持，设计师只需在设计稿上进行切图标记，然后用摹客的插件上传到平台，就可以自由下载和使用切图了。以PS的插件为例：
1.安装摹客的PS插件，安装好之后在PS的「窗口>扩展功能」找到摹客插件，选择并打开：
2.标记切图：在完成的设计稿上，选中需要切图的图层或编组，点击「标记切图」。当图层或编组的名称前增加了“-e-”，「标记切图」变为「取消切图标记」，就可以了。
3.标记切图后，点击插件的上传按钮，开发工程师就可以在摹客平台自主下载不同尺寸和平台的切图了。
摹客的这些切图和标注等功能都是免费的，可以使用。

Answer 2

指的是将设计师的设计转化为网页是一种将设计师的“理想”转化为“现实”的工作
将psd进行切片重组 利用div+css js等等前端开发代码来生成网页的一种技术
此为切图，不懂的问下绘学霸的在线老师，学习学习

Answer 3

当界面设计定稿之后，设计师需要对图标进行切片，提供给开发工程师。切图与标注是为了能够满足开发人员对于效果图的高度还原需求，直接影响到工程师对设计效果的还原度，并且也是设计师重要的输出物之一。合适、精准的切图可以最大限度地还原设计图，起到事半功倍的效果。我是用摹客做的切图，可通过插件在Sketch、PS和XD中进行切图并上传至摹客，一键下载全部切图。从Sketch、PS和XD中上传切图。通过插件，可以在Sketch、PS和XD中进行切图，并上传到摹客中。

首先，下载切图前，在右侧属性面板中勾选“启用切图压缩”，可将下载的切图体积瘦身50%以上。

• 在右侧面板中选中切图，中间工作区页面会同步选中右侧的切图。

• 点击“下载当前切图”即可下载选中的切图。

• 还可切换平台（iOS、Android、Web）和选择倍率。

• 在空白处点击，右侧切图面板展示了该页面内所有切图。

• 按Ctrl键进行多选，点击“下载选中切图”，可下载选中切图；

• 点击“下载全部切图”，可下载全部切图。

• 还可切换平台（iOS、Android、Web）和选择倍率。

下载PNG/SVG/WebP/JPG切图

如果你想单独下载PNG、SVG、WebP或JPG格式的切图。选中切图，在右侧属性面板中，勾选其一即可。同时勾选后，会将四种格式的切图都下载下来。可根据需要自由选取格式下载。（注：如果有些小伙伴遇到浏览器不能下载webP格式的问题，可以切换到Chrome再尝试下载）

Answer 4

现在ui设计师都是用软件切图和标注了
以前手动切图和标注太麻烦了
比如我们公司用的蓝湖，ui设计师做好图之后通过蓝湖上面下载的插件上传上去。
软件直接一键标注和切图了。不得不说智能科技化的确省事。

Answer 5

切图是指将设计稿切成便于制作成页面的图片，并完成html+css布局的静态页面，通俗来讲，把一张设计图 利用到切片工具 把自己所需的切成一张张小图，然后用DIV+CSS完成静态页面书写，完成CSS布局。
切图就是将 .psd 设计稿还原成 Web 页面的过程，这个过程包括两部分：
切出素材、编写代码实现
现在切图比较简单，一键基本就能搞定了，可以试试蓝湖。