UI设计中的切图是怎么切图「零基础学UI须看」
切图是设计师交付给开发的产物之一，设计稿完成后，设计师需要将其切成便于制作成页面的图片。设计师切图时就需要用到切图工具，比如摹客，可以自动切图（支持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
PxCook，目前我还没用上Mac，所以也不知道传说中的Sketch到底多神奇。PxCook在Windows上标注还比较顺手，虽然它还附带切图功能，但是比较鸡肋，不推荐用它切图。
切图工具：
Cutterman 一款PS的插件，切图非常方便，但不支持绿色免安装版本PS，而且对PS版本要求比较高，针对CS 6的已经不维护更新了。推荐安装官方完整版PS cc，然后自行破解。官网上有安装使用教程，自己研究下吧，因为我也是最近才开始接触这款插件。
Part 2 Photoshop
现在常用的几种设计尺寸
1. 640*960 4时代的尺寸，刚接触APP设计用的是这个尺寸，拟物盛行的时代(现在用这个尺寸设计的应该比较少了吧)；
2. 640*1136 5/5S/5C，IPhone更新，咱们设计也得跟着与时俱进(应该还有人用这个设计尺寸)，进入扁平的时代了；
3. 750*1334 6 目前我做设计稿的设计尺寸，IPhone6的尺寸，向下可以适配4，5，向上可以适配6 plus；我记得IP6推出后，我问总监应该用什么尺寸设计，他说用IP6的吧，好适配，切出来就是@2x了，改一改上下都能照顾到。
如何切图？其实很简单：（以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
Sketch：https://www.mockplus.cn/download/idoc-sketch
adobe XD：https://www.mockplus.cn/download/idoc-xd
ui设计切图首先找一个合适的工具，比如Photoshop，Adobe Illustrator。都是UI设计切图过程中必不可少的好工具。
切图标注
如今，设计切图插件能够将设计稿里所选中的图层、图层组按不同开发规范宽度、倍数，进行合并裁剪切片。与传统切图方法「调整图像尺寸 – 选中切图图层/图层组 – 调整画布尺寸 – 导出web所用格式」相比，这一系列动作被进行了一键化处理，只需要在插件中选择好开发语言，保持文件夹位置便可一键标记或导出，极大地缩减了繁琐的操作流程。
蓝湖插件
蓝湖插件在设计稿做切片标记，上传至平台的画板便带有切图下载。
Cutterman插件
3种开发语言(iOS，Android，Web)：根据不同的项目选择不同的开发语言，下方小箭头可进行素材输出「倍数」选择。
倍数：插件在导出选中图层时以「@2x」和「XHDPI」为标准对设计稿进行等比放大缩小。如 750px 宽度的设计稿导出「@3x」和「@1x」时，导出的切图会分别放大 1.5 倍和缩小至 0.5 倍，然后进行图层导出。
导出选中图层：插件根据已选语言、倍数，对已选中的所有图层、图层组进行合并裁剪然后导出。裁剪大小为所有图层合并后总宽度高度。
固定尺寸：插件在导出选中图层时对已选中的所有图层、图层组进行合并后，再调画布或者图像至固定尺寸大小，然后进行图层导出。已选图层大小大于固定尺寸设定，则被调整图像，素材被压缩。已选图层大小小于固定尺寸设定，则被调整画布，图层素材大小不变，素材尺寸变为固定尺寸大小。
设计稿尺寸与切图倍数
UI 设计师需要在正确的设计稿尺寸下进行切图，切图素材才能正常供给开发人员使用。否则产品开发落地后会出现图标变形，像素低等情况。
手机端常用的设计尺寸与它们对应的切图倍数
iOS：采用 750×1334 来设计，@2x 切图直接适配 750×1334 分辨率的机型，并向上向下适配主流分辨率(@2x/@3x)。
设计稿750x1334px——切图倍数iOS@2x，iOS@3x
Android：采用 720×1280 来设计，XHDPI 切图直接适配 720×1280 分辨率的机型，并向上向下适配主流分辨率(XHDPI/XXHDPI)
设计稿720x1280px——切图倍数XHDPI，XXHDPI
微信小程序(它的单位都是以i6的750px为划分点)
设计稿750x1334px——切图倍数png24
手机端网页、公众号链接等(与微信小程序统一使用i6，方便做单位转化)
设计稿750x1334px——切图倍数
现在都有软件能够帮你完成自动标注和一键切图，比如蓝湖
有软件能帮你完成了你自己还切那干啥哈哈哈
APP设计稿是750*1334的的界面,输出切图@1x,2x,3x的是什么尺寸
所有的页面标注总结起来就是:标文字,标图片,标间距,标区域; (上述图标出现了45px的单数,因为软件自动吸附上去了显示了图标本身的尺寸,切图的时候记得输出个偶数尺寸的切片) Part 4 切片资源的输出 切之前务必要和你的工程师搭档沟通一下,该如何去切才能配合他的开发。 全局性的切图常见问题 ① 你的所有设计...
JavaScript 怎么切图
你这个需要给每张图片定义一个编号，点击剪头切换图片后，获取切换后图片的编号，用这个编号去刷新左边缩略图的排序 比如：当前显示的大图片的编号是：20，那么，左边缩略图显示的图片就应该是：20+（-2），20+（-1），20+0，20+1，20+2；结果就是显示编号为：18,19,20,21,22 这几张图片；之...
美图秀秀九宫格切图怎么下载
1.打开图片，点击更多功能按钮。2.选择九格切图。3.进入九格切图的界面。4.选一种喜欢的一种个性形状样式。5.再选一种美化效果。6.制作好之后，点击保存。7.勾选保存9张切图，点击确定。8.最终保存下来是9张切割好的图片，
ps切图问题:切完之后的图片和原图的宽度是一样的值,为什么保存下来之后...
呵呵 这是显示的问题。你裁切对的，宽的值与原图相同。只不过原图的高有2218像素，裁切之后的高为728像素，所以同一电脑上显示原图是2218像素高的相应宽，显示切后图是728像素高的相应宽。
UI设计需要掌握哪些知识?
（3）透视原理，有良好的透视把控对于整个UI设计中的观察力可以得到进一步的提升。（4）设计规范，这块讲的就是UI设计中的一些手机和平板的规范，比如苹果手机的各种尺寸等。都是UI设计中需要掌握的。（5） 手绘技法，手绘这块对于UI设计中的整个工作会有非常好的辅导作用。（6）切图适配，主要是用来...
高手请进!在VB.net2005 中如何切图?高分悬赏!
如果是剪下图片中的一块的话：'假设有张800x600的图，下面是剪图数据 'X0:200,Y0:200,X1:550,Y1:450 dim c as new bitmap(x1-x0,y1-y0)dim b as new bitmap("")'原图片，""里面填图片路径 for i as integer=x0 to x1 for j as integer=y0 to y1 '切下i,j的像素 dim nc ...
怎么用美图秀秀把一张图图做成九宫格的样子啊?
，选择美图秀秀官网进入。2、接下来进入到美图秀秀页面后，选择红色箭头所指处的“美化图片”。3、接下来选择红色箭头所指处的“打开一张图片”，打开自己需要处理的图片。4、接下来选择好图片之后，在上方工具栏中选择红色箭头所指处的“九宫切图”。5、接下来就可以将图片做成九宫格的样子了。
强烈推荐给大家的八种PPT图片墙制作实例教程
⑧ 切图法 ① 直接拼合 第一种方法是,直接对导入到PPT中的图片进行处理,不做太精确的处理,只是简单地调整图片的尺寸与位置,可以做成简单的拼图。 当然,想要更美观的拼图,也可以进行适当的处理。 首先,统一图片的尺寸,这里要用到iSlide的「裁剪图片」工具。 具体操作是,插入所有图片,选择所有插入的图片,打开「裁...
谱聚类算法总结
L=D-W,D为度矩阵，是一个对角矩阵。W为邻接矩阵。 其性质如下：对于无向图G的切图，我们的目标是将图G(V,E)切成相互没有连接的k个子图，每个子图点的集合为：A 1 ,A 2 ,..A k ，它们满足A i ∩A j =∅,且A 1 ∪A 2 ∪...∪A k =V 对于任意两个子图点的集合A,...
怎么优化geoserver切图时间
SuperMapiServer配置开启REST地图服务使用缓存。地图瓦片的生成可以idesktop中对地图切缓存，将瓦片copy到服务端发布服务或者iserver上对已发布好的地图服务切缓存。SuperMapiServer配置开启REST地图服务使用缓存，同样参数的地图请求，可直接访问服务端已生成的缓存，减少服务端查询切图的时间。
答诗诺里： 制作网页,很多的时候,首先要用图片处理软件制作出网页的效果图.效果图做好是一幅完整的图片,不可能把这一整张的图片都用在网页里.把效果图中有用的部分剪切下来作为网页制作时的素材,这个过程就是切图.(当然是用剪切、选择工具也可以,但是用切片工具处理更精确.) 切图的目的就是更加精确的进行网页布局.photoshop、fireworks等软件都带有切片工具.
于洪区18992166323： 你好,今天我去面试ui设计工作,那个人问我:你回答一下什么是切图?我说:切图??不就是拿刀切吗?我 - ？
答诗诺里： 切图就是网页页面设计.建议你找一家小些的起步的公司,好好巩固知识,同时加强实践,为公司创造价值.
于洪区18992166323： UI 中网页设计切图怎么切 - ？
答诗诺里： PxCook,目前我还没用上Mac,所以也不知道传说中的Sketch到底多神奇.PxCook在Windows上标注还比较顺手,虽然它还附带切图功能,但是比较鸡肋,不推荐用它切图.切图工具:Cutterman 一款PS的插件,切图非常方便,但不支持绿色...
于洪区18992166323： ui设计稿是iphone的如何切iphone6plus的图 - ？
答诗诺里： 尽量以后出图用矢量的来做控件!具体可以参考《潮流UI设计必修课》里的切图规范~ 第一步,视觉设计阶段,设计师按宽度750px(iPhone 6)做设计稿,除图片外所有设计元素用矢量路径来做.设计定稿后在750px的设计稿上做标注,输出标注...
于洪区18992166323： 用Sketch如何做切图? - ？
答诗诺里： 1、实现选中想要的Group切图保留透明部分. 2、点击:+加号. 3、点击:刀的图标 . 4、勾选 Export Group Contents Only 的操作. 5、实现的切图效果如下. 6、实现Export如图. 注意事项: 矢量绘图也是进行网页,图标以及界面设计的最好方式.但除了矢量编辑的功能之外,Sketch同样添加了一些基本的位图工具,比如模糊和色彩校正.
于洪区18992166323： 微信小程序ui要怎么切图给程序 - ？
答诗诺里： 1. 和做网站是一样的方式.2. 按照尺寸设计好切图就可以了.
于洪区18992166323： PS切图怎么切,是先把背景切一次输出,然后再切图片再输出吗? - ？
答诗诺里： 我用的摹客的PS插件,很快就能完成UI标注和切图,大概步骤如下:1.安装摹客的PS插件,安装好之后在PS的「窗口>扩展功能」找到摹客插件,选择并打开:2.标记切图:在完成的设计稿上,选中需要切图的图层或编组,点击「标记切图」.当图层或编组的名称前增加了“-e-”,「标记切图」变为「取消切图标记」,就可以了.3.标记切图后,点击插件的上传按钮,开发工程师就可以在摹客平台自主下载不同尺寸和平台的切图了.用摹客完成Photoshop切图,还支持:1. 切图压缩:在右侧面板中选中切图2. 切换平台和选择倍率:iOS、Android、Web3. 自定义切图尺寸
于洪区18992166323： ui给的设计图是2000px宽度的我该怎么切图写静态页面 - ？
答诗诺里： 想要把整个图切下来,然后当背景什么的用吗?如果有的是拿来当背景颜色的,如果是纯色的,就直接取出颜色,使用颜色就行了.如果是在纵向渐变的图,高度全取,宽度取1px的就行,css设置水平重复. 横向渐变的,就高度取1px.那如果是展示信息的图片的
于洪区18992166323： 网页设计好后的切图是什么意思呢 - ？
答诗诺里： 网页设计好后的切图是将设计稿切成便于制作成页面的图片,并完成html+css布局的静态页面,有利于交互,形成良好的视觉感.通俗来讲,把一张设计图利用到切片工具,把自己所需的切成一张张小图,然后用DIV+CSS完成静态页面书写,...
于洪区18992166323： UI设计的相关问题 - ？
答诗诺里： 学平面的UI入门相对比较简单,主要了解一下软件界面及网页的一般构成元素及结构,然后练习一下图标的设计.想要入门,可以去站酷等网站上找一些图来临摩.之后学一下怎么样切图,即把图片分成若干小图供程序使用.如果依然觉得入不了门,可以找一个培训班系统地学习一下.学费不要太贵,时间不需要很长,一般一两个月就行,但一定要找一个从事过UI设计工作的老师,不能随便找一个小培训班.
