UI设计师在完成界面设计后，切图都改切哪些？ UI设计师如何进行切图
设计好的网页都需要切图，主流的是dreamweaver、photoshop软件，还有sketch、firework等，低端QQ切图，网页切图等。切图为后端编程者带来方便，提高效率，让网页稿有了交互性，实现平时看到的各种各样的功能，画面浏览速度快，有利于优化。
扩展资料：
一般我们从设计师那得到的都是psd文件，里面有几十或者上百个图层，一般会根据内容分好文件夹，有文字有图片，有的只在特殊情况下显示的，这时候就需要根据自己的需要导出不同的图。
切图的时候也会有许多考虑，比如把哪些内容压缩成一张图片，什么时候用透明背景PNG，什么时候用CSS Sprite（把琐碎的小图比如按钮、logo复制到一张透明背景的图上然后保存为一张图，再用background position去提取。）文字是切成图片，还是复制到HTML里。
一般情况下都不会把文字切成图，除非用到比较特殊的字体或者变形等等，然后即使是photoshop保存为web格式导出的图，有时候尺寸也是很大的，特别是PNG，这时要使用一些专业压缩工具进行二次压缩。
当然有些有前端经验的设计师会把切好的图片发给你，这样就可以直接开始写HTML和CSS了，但是建议还是尽量自己切，掌握熟练的切图技巧也是一个前端应该有的技能。
参考资料来源：搜狗百科-切图
搜狗百科-静态页切图
UI（用户界面）是广义概念，包含软硬件设计，囊括了GUI 、UE以及ID(交互设计)。
GUI（用户图形界面）就是界面美工也叫视觉设计师，只管软件视觉界面，比UI窄。目前国内大部分的UI设计师其实做的是GUI。大多出自美术院校。
为UI设计师就是指交互设计师，是研究用户行为和操作逻辑的人。交互设计师的工作内容就是设计软件的操作流程、结构、操作规范（spec）、用户信息回馈等等。一个应用在写代码之前需要作的就是交互设计，并且确立交互模型，交互规范，手势动作等等，这就是前端设计。
那么GUI设计师很多人称之为美工，但实际上不是单纯意义上的美术工作人员，而是软件产品的产品外形设计师。GUI设计师要从UI设计师那里提取设计细节，然后把这些细节通过视觉效果最后传达给用户，同时GUI设计师在设计过程中也会对UI设计师的方案起到一个检查和反馈作用，把一些视觉上的弊端反馈给UI设计师，同时要指导工程师进行应用布局。而不是画个icon或者提供资源图而已。换言之就是GUI设计师是枢纽，是连接UI和工程师的重要枢纽
ui切图哪些是要切的~
移动UI设计切图是UI设计师最重要的设计输出物，切图资源输出是否规范直接影响到工程师对设计效果的还原度。设计师的切图输出物是是体现一个设计师专业水准的重要标准，同时也是设计师表达自己对设计态度的最有力的语言。合适、精准的切图可以最大限度的还原设计图，起到事半功倍的效果。如何输出具有全局把控和细节专注的高段位切图，应该是所有设计师一直需要追求的能力。
设计切图的原则
设计切图输出的目的是跟下游的工程师团队协同工作，那么在团队协作过程中首先应该保证切图输出能够满足工程师设计效果图的高保真还原的需求。其次切图输出应该尽可能的降低工程师的开发工作量，避免因切图输出而导致的不必要的工作量。最后输出的切图应当尽可能的压缩大小，以降低APP的总大小，提升用户使用时的加载速度。所以切图输出应当做到切图精准、便与协同和压缩大小。
1.切图资源尺寸必须为双数
众所周知智能手机的屏幕大小都是双数值，比如iphone 7的屏幕分辨率是750*1334px。切图资源尺寸必须为双数是为了保证切图资源在工程师开发时是高清显示。因为1px是智能手机能够识别的最小单位，换句话说就是1像素不能在智能手机被分为两份。所以如果是单数切图的话手机系统就会自动拉伸切图从而导致切图元素边缘模糊，进而造成开发出来的APP界面效果与原设计效果差距甚远。
2.图标切图输出应根据标准尺寸输出并且考虑到手机适配（主要是iPhone 6plus的适配）
在切图资源输出中图标切图输出是至关重要的部分。因为在开发中由于各机型的屏幕分辨率不同，需要针对一些大屏机型进行适配。为了适配大分辨率手机（例如iphone 7plus）图标在切图的时候需要输出@2x和@3x的切图，其中@2x的切图可以满足双平台大部分机型的适配要求，@3x是用来适配iphone手机的各种plus版本的手机（后边会有文章专门讲解关于适配的问题）。@3x是@2x尺寸的1.5倍，例如一个图标切图@2x尺寸是44px，那么@3x尺寸是66px。
3.为了提升APP使用速度，尽量降低图片文件大小
在切图资源输出中图标切图输出是很重要的部分，比如新手引导页、启动页面、默认图、广告图等。图片切图一般情况下文件大小都是相对较大，不利于用户在使用app过程中加载页面。因此图片切图要尽量压缩图片文件的大小（文加压缩的方法在文章后面有详细讲解）。
4.可点击部件应当注意其点击区域不小于88px
44px的点击区域数值是在iphone 3 （320×480px）普通显示屏下制定出来的，在手机分辨率大幅提升的现在，这个数据自然要与时俱进。在iphone7 （750*1334px）的Retina 显示屏下44px点击区域就变为了88px。但无论是320*480px尺寸下的44px还是在750*1334px尺寸下的88px，换算成物理尺寸后大致是在7mm-9mm之间。早在人机工程学的研究中曾得出结论，认为人类舒适的触击范围需在7-9mm的大小。所以在ios官方的空间尺寸也经常出现88px的数值，比如菜单栏的高度便是88px。
5.可点击部件要把相关状态都切图输出，比如正常状态、点击状态。
在切图过程中不仅要输出正常状态的切图，更要注意不要遗漏其他状态的切图。这个也是设计师经常会出现的失误，比如在按钮切图的过程中可能会忽略点击切图的状态。所以设计师在做设计图是最好尽量把页面中会出现的各种状态展示出来，避免后期切图的时候遗漏状态。
切图输出类型
1.桌面图标切图输出
app的桌面图标会被运用在很多不同的地方展示，比如手机桌面、APP store、手机的设置列表，所以app桌面图标需要很多个不同尺寸的切图输出。两个平台对相应桌面图标设计输出尺寸也不尽相同，在输出的时候要把双平台的这些尺寸全部输出切图。桌面图标切图只需要提供直角的图标切图即可，手机系统会自动生成圆角效果。
2.系统图标切图输出
一套图适配双平台：
ios平台（iphone 6plus版本除外）和安卓平台公用44*44px切图素材，即可实现一套切图适配两个平台的开发。
适配大屏幕：
为了适配iphone 6plus、iphone 7plus单独切一套比原有44*44px切图大1.5倍的切图，即66*66px大小的切图。(UI设计的适配问题会在后边单独的文章中详细讲解）
3.图片类切图输出
图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。同一类型的图片切图一般要保持同样的大小尺寸以便于工程师开发使用。另外一般这些切图的文件较大在切图过程中需要控制切图文件的大小。（后边文章会详细讲解如何压缩切图大小的方法）
全屏切图类
局部切图类
空白页提示案例图
4.动效元素切图输出
动效元素切图一般是指在app中加载动效所需要的切图元素，比如qq的下拉加载动效就是由若干张切图连续播放形成的动画效果。这些图片按照序号排序播放我们页把他们叫做序列切图。序列切图是在做UI设计的过程中必然会遇到的问题，这种切图要求要保证动效播放时的流畅自然，是需要设计师仔细斟酌的。
序列图切图
序列图实现效果
5.可拉伸元素切图输出
可拉伸元素一般是指按钮、输入框等切图过程中可以对切图进行瘦身压缩的元素。这些元素通过瘦身压缩可以极大地见效图片的大小提升用户在使用app中的加载速度。在ios中这种切图方式叫做平铺切图，在安卓中这种切图方式叫做点九切图法。
横向拉伸切图
竖向拉伸切图
6.无需切图的部分
再设计切图输出中很多元素是不需要输出的，直接使用系统原生的设计元素修改参数即可。作为设计师需要知道哪些元素是需要切图，哪些元素是使用系统自带的避免不必要的切图。比如文字、卡片背景、线条和一些标准的集合图形是不需要提供切图的。例如搜索框只需要在标注中表明尺寸大小、圆角大小、描边粗细、色值即可，工程师会根据设计效果通过代码实现这种效果。
切图是设计师交付给开发的产物之一，设计稿完成后，设计师需要将其切成便于制作成页面的图片。设计师切图时就需要用到切图工具，比如摹客，可以自动切图（支持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
UI设计师如何进行切图
答：Step 1.安装并打开插件 插件安装好后打开PS，在「窗口>扩展功能」找到摹客 插件，选择并打开。使用摹客平台账号登录。Step 2.标记切图 在完成的设计稿上，选中需要切图的图层或编组，点击「标记切图」。将在名称前增加“-e-”，「标记切图」变为「取消切图标记」，则标记切图完成。Step 3.上传至...
UI设计中的切图是怎么切图「零基础学UI须看」
答：Step 2.标记切图 在完成的设计稿上，选中需要切图的图层或编组，点击「标记切图」。将在名称前增加“-e-”，「标记切图」变为「取消切图标记」，则标记切图完成。Step 3.上传至摹客 标记切图后，一键将设计稿上传至云端项目中，开发工程师就可以自主下载切图，只需在右侧面板中选中切图，点击即...
UI设计中的切图规范是怎么样的?
答：一倍图：在二倍图的基础上压缩成50 iOS启动图：图标按照最大1024x1024来设计，之后按照比例缩小到每个尺寸。提交没有高光和阴影的直角方形图即可。Android切图尺寸规则 切图命名规则 规范的切图命名会让开发更容易找到其所需要的文件，让设计师与开发之间的交付流程更顺畅，可以说，规范的切图命名是一...
UI中的“切图”是什么意思?为什么要切图?
答：切图是设计师交付给开发的产物之一，设计稿完成后，设计师需要将其切成便于制作成页面的图片。切图是指将设计稿切成便于制作成页面的图片，并完成html+css布局的静态页面。通俗来讲，把一张设计图 利用到切片工具 把自己所需的切成一张张小图，然后用DIV+CSS完成静态页面书写，完成CSS布局。切图大家都...
UI日常-切图切图怎么破?
答：4.切图格式·注意保持背景为透明通道 如图，使用sketch的同学记得将图层编组，并勾切图只显示编组内容。·保证图片格式统一、相同模块icon尺寸统一，便于开发使用，另一方面也方便调整及验收。5.了解页面元素在项目进行需求评审的时候，是我们了解产品的好时候。个人认为Ui设计师不仅仅是完成视觉效果，更多的...
网页设计好后的切图是什么意思呢
答：切图就是把用设计软件设置好的图片切成相应的大小，切图后再把图片上传就可以可以加快显示速度，不用等整个图片都下载以后显示。PS切图步骤：1、打开PS，然后点击切片工具。2、点击切片工具后，就可以把图片切成需要的大小。3、切好图片后，点击导出web所用格式。4、进入导出web所用格式页面，按住shift...
UI设计中的切图规范有哪些?
答：1.切图资源尺寸必须为双数 切图资源尺寸必须为双数，这是是为了保证切图资源在工程师开发时是高清显示。因为低质量的切图资源会让切图元素边缘模糊，进而造成开发出来的APP界面效果与原设计效果差距甚远，如果是单数切图的话手机系统就会自动拉伸切图从而导致切图质量太低，因此，切图资源尺寸必须为双数...
UI设计切图工具和标注工具有何作用?UI页面怎么进行标注?
答：2.标注工具：PxCook(PxCook)，是一款切割图标注设计工具软件。从2.0.0版开始，支持文本、颜色、距离自动智能识别等PSD文件。它的优点是把标注、切图两个项目完成后整合在一个软件内完成，支持Windows和Mac双平台。标定功能包括：支持长度、颜色、区域、文字注释；从2.0.0版开始，整体效率有了显著提高...
UI设计软件工具中,AI和PS的区别
答：二、原型图工具 所需工具:Sketch(框架图)、POP(初步原型)、墨刀(高保真原型图和交互) 1、Sketch Sketch是一款强大的界面设计工具,专为UI设计师打造的软件,可让你的界面设计变得更简单,更高效。如果你是一个UX或者UI设计师,那么你一定知道Sketch这个强大的UI界面设计软件。 在Sketch中用户能轻松地设置图层面板,可批...
有个职业叫UI,是什么职业。
答：UI这个职业全称为UI设计师。UI即英文User Interface(用户界面)的简称。泛指用户的操作界面，包含移动APP，网页，智能穿戴设备等。一般从事UI职业的就是UI设计师。UI 用户界面，也称人机界面。是指对软件的人机交互、操作逻辑、界面美观的整体设计。也指用户和某些系统进行交互方法的集合，这些系统不单单指...
