A. 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
Sketch：https://www.mockplus.cn/download/idoc-sketch
adobe XD：https://www.mockplus.cn/download/idoc-xd
B. 前端切图之png8和png24的区别
png8：
每一张“png8”图像，都最多只能展示256种颜色，所以“png8”格式更适合那些颜色比较单一的图像，例如纯色、logo、图标等；因为颜色数量少，所以图片的体积也会更小；
png24：
每一张“png24”图像，可展示的颜色就远远多于“png8”了，最多可展示的颜色数量多大1600万；所以“png24”所展示的图片颜色会更丰富，图片的清晰度也会更好，图片质量更高，当然图片的大小也会相应增加，所以“png24”的图片比较适合像摄影作品之类颜色比较丰富的图片；
C. Photoshop中的哪些知识点是用来前端切图的
1).基本信息：
以图层为主要的编辑对象，通过不同层细节的编辑，使整体效果更为绚丽或多变。
以工具为主要的编辑手段，通过多个工具的结合，满足大部分编辑要求。
通过滤镜的组合，呈现很多不错的效果，达到平民人士也能参与互联网炒作的大军中不能自拨，在当下PS已经由有一个名词转为一个动词了。
对前端来说切图时注意：优化切图流程，提升切图效率，增加岗位竞争优势
具体经验分享：修改PS的快捷键，使其符合前端操作的习惯，侧面提升工作效率。从而扩展，可以修改其它软件的快捷键，整体提升工作效率，增加就业资本或信心。
图片格式那些事儿
一般新手不太注意页面的性能问题，而性能容易出现在图片上面，如何在一个大页面中处理好图片是一个前端必备的技能之一。
一般应用比较多的格式有：gif,png-8,png-24,jpg。而新手经常混淆png-8,png-24的区别。
按我经验4k以下gif,png-8差别不大，4k-100k: png-8,gif占优势，大于100k果断是jpg。
png-8不支持alpha透明，在IE6下需要一个JS或透明滤镜来处理。
图片格式与设计那点事儿
Web性能优化：图片优化
2). 提高切图效率思路之扩展：
从客观上来讲，提高效率的基础在于丰富的实战经验或长年的填坑经历，本质上软件的操作差别不是特别大。一个五年经验或一年经验的开发人员，使用同样的工具，主要差别还是一个熟练度。这里只分享我个人积累的一些经验：
在上一点提到的修改快捷键，分享一下我修改的几个快捷键（修改这个快捷键，有个缺点，换台电脑可能就不能使用，除非能够熟悉的记得两套快捷键，即修改过的，或原始的）：
新建图层: F1
使用频率比较强，所以放在一个容易的地方。
新建文件：F2
仅次于新建文件，也是使用使用频率比较高的一个键。由于切图是会从原始图层上多次的分离图层，所以这个快捷捷由原来的按两键，变为一键。并且有效的分离左右手操作的特点，尽量让使用频率高的键从左侧起步。以下的几个快捷键，都是按照这个思路来进行优化或设置的。
按屏幕大小：F3
按画布大小：F4
这两个键操作思路主要借鉴于CorelDraw，CorelDraw是一款优秀的平面广告设计软件，多用于名片，包装设计。这是由加拿大Corel产品，他们公司另外一个比较着名的绘画类软件是Painter。
存储为web格式：F5
由原来的5键优化为一键，还有一个流程是通过Ctrl+Shift+S来存储图片，很明显这个流程步骤过于繁多，很浪费时间。有兴趣的可以做一个对比。
裁剪命令：F6
由原来的3键优化为一键，另外一个是裁剪工具(C)，裁剪工具对整个画面的破坏力比较大，且不易控制，尤其在PS的版本升级中对这个工具进行了优化。而这个命令相对更为轻量或方便。
F7,F8,F9保持不变
转换为RGB模式：ctrl+=
因为Gif是索引模式，颜色信息较少，如果要进行编辑，首先得转换成RGB模式。
从图层建立组：ctrl+,
由于刚入行的设计师没有经验，一个设计稿是没有分图层组。其实合理的图层组可以有效的引导前端，所以这个快捷键主要是解决这个问题。
自由变换：F10
变换内容
前端主要还是对现有的PSD文件进行编辑，所以这两个键是可以单独拿出来的。
变换选区：F11
变换边框
画笔：F12
因为前端不像设计师，对PSD只是一个切割，而设计师注重于创造的过程。所以对画笔工具的依赖不是很大，由原来的F5移动到F12。
复制图层 Ctrl+ / 原有位置在菜单栏：图层->复制图层
这个快捷键，可以快速的把原始PSD中的一个或多个图层复制到一个新文件当中。
演示：
3). 切图的几个办法：
切片(k):
优点：能够一次切除多个图片。
缺点：需要后退一步，降低效率，容易产生多余无用图片
选区(先用选区工具来画一个范围，然后裁剪):
优点：区域精确目标单一
缺点：需要后退一步，容易误操作
拷贝(Ctrl+C):
优点：拷贝单层的内容到新文件，能够快速的切除图片。
缺点：不容易找到相应的图层。
合并拷贝(Ctrl+Shift+C):
优点：拷贝所有可见层的内容到新文件，能够快速的切除图片。
缺点：不容易找到相应的图层。
D. 前端如何切图（超详细，超小白）
身为一名前端开发者，$\color{red}{ 切图 } $虽然可以被UI或者蓝湖等工具解决，但是这也是属于前端er的必修课。因此，我也是把切图分享作为我第一篇博客的分享内容。
下面是直接操作的步骤，如何打开psd图等操作应该也不用我废话了。
1.第一步就是找到你需要的图或者icon的图层，并选中它（如果有叠加需要多选就按住ctrl进行多选）。
2.选择上方工具栏，选择 图层—>复制图层，
然后会弹出一个编辑框，重点：文档一定要选择 新建 ,名称可以填写自己需要的，然后点击确定，就会有新的图了。
3.因为画片大小可能不太符合自己的预期，可以选择上方工具栏 图像—>裁切，会自动切成合适的大小。
4.到这一步基本上就已经成功了，最后就是保存了。依然是上方工具栏，左上角，文件--->导出--->存储为web所用格式--->选择四联--->选择PNG-24格式（根据自己需要，我一般使用这个），最后点击 存储 就可以了。
E. 为什么切出来的图制作到网页上会比PS上的图看起来小前端/设计请进！！
楼主你好，由于你的图片是点阵图图像，进行缩放修改肯定是会造成像素被压缩和部分丢失的，还会造成原来图像的像素 长宽比被破坏，这是会使图像失真的，解决办法就是重新排列图片的像素，修改像素长宽比例：执行图像-图像大小命令来设置，一定要把重定图像像素勾选上，接下来就裁切掉图像不需要的部分，用这种方法来保存每个图像点上的像素，还有一种办法就是把图片在PS里转换成智能对象再来进行缩放操作，谢谢采纳
F. 微信前端h5商城UI设计规范标注与切图是具体规范是什么，我切的二倍图，前端说我的图大了字体也不对，求解
前端的问题，你给前端图片的外部容器的宽以百分比的形式存在就行了。
G. 前端必备的切图知识
本文以Adobe Photoshop CC 2018 (32 Bit)版本为例介绍，不同版本可能有细微差异。
由于ps默认的是以厘米为单位，因此需要修改为我们前端所用的以像素为单位：
编辑-->首选项-->单位与标尺-->按下图修改即可：
由于ps默认未启用标尺及智能参考线等，因此需要自行开启：
如果左侧工具栏未开启显示，则也可在此设置让其显示；另外需要提的是，信息面板需要一些额外的设置：
信息面板选项设置
以上设置完后，建议保存工作区以保存之前预设的一些设置。
保存工作区方法： 窗口-->工作区-->新建工作区
这里就不解释了，直接上图：
选择移动工具 ---> 勾选自动选择及选择图层选项（不是组） --->选择预切图的位置（选择后会自动跳至相应图层）--->右键相应的图层--->选择转换为智能对象--->启用选框工具框选相应区域--->复制--->新建文件--->粘贴--->选择图像菜单--->选择裁切--->选中基于透明像素--->确定即可；
此方法比较适合不规则的图像，比如logo等；
拉好参考线后，选择切片工具--->点击 基于参考线的切片
--->文件--->导出--->存储为web所用格式--->选择png24--->存储--->选中所有用户切片；
由于有很多条参考线存在时会相互干扰，我们可以将原有图片裁剪成几个独立的部分，然后再使用参考线切图法即可。
文件--->导出（Photoshop低级版本此处是脚本而不是导出）--->将图层导出到文件--->设置文件类型（PNG24，勾选透明区域、交错及裁切图层）
完成后，ps脚本会自动运行。可能耗时比较长。
该方法需要事先设置两个地方：
a、编辑-->首选项-->增效工具-->启用生成器
b、文件-->生成-->图像资源
上述两个设置完成后，启用移动工具，选择需要的切图，在其图层上加后缀名，则在原始psd文件目录下的xxxxxx-assets文件夹中会自动生成相应格式的图片（甚至svg）。
当然我们还可以在后缀名添加数字来表示图片的质量。比如logo.jpg8（表示80%的质量），logo.png24，logo.png8等。当然如果不加数字的话则默认取最大值；
不仅如此，我们还可以设置生成后的大小倍数 比如命名 300% logo @2x.png 则表示会在原有基础上放大三倍大小导出。这一点对视网膜屏很有用。
H. PS-前端切图教程（切jpg图和切png图）
转发自： PS-前端切图教程（切jpg图和切png图） - xing.org1^ - 博客园 (cnblogs.com)
———————-------------------------------------------------------------------- PS切图步骤说明 ————————————————————————————————
一共分两大项：切jpg图、切png图。
我用的是PS CC 版本，教程中用到的除了界面和摆放位置不一样外，其他应该和低版本的都一样了。
一、 切JPG图
1．打开ps导入图片的步骤是铁定的了
2．选择左边工具栏里的“切片工具”
事先自己没用过或上一次ps工具使用时没有使用过“切片工具”的，打开ps工具栏里默认是“裁剪工具”的图标
你可以鼠标左键点住“裁剪工具”不松手，他会在右边展开（我这是工具栏在ps界面左侧的情况下）这一组的所有工具，在里边选择“切片工具”即可
我图中之所以框选了两个工具，是因为后期还要用到“切片选择工具”，这里先认识一下他的位置在哪。
3．用“切片工具”切出想要的范围，框选范围就像平时用qq的截图工具一样。
如下，我需要这个小图标，我就框选了他。
框选中：
框选后：
如果你框选好了松开了鼠标，他还是这种黄色的边线，你把“切片工具”移到附近，他还能调整框的大小范围。
但是如果你框选了好几个了，想改前边已经框选好的：
像如上这样，要知道，ps切片工具最近一个选区的切片是用黄色框包裹的，其他前边切得都是蓝色边线，这时候你再用“切片工具”去调整蓝色边线的选区是动不了的。
这就要用上“切片选择工具”了
4．“切片选择工具”调整范围：
切片选择工具就在“切片工具”的下边，寻找方法见上解。点击选择要调整的切片蓝线，待其变成黄色后，调整范围。
切片选择工具只能选择并调节范围，不能切片。
5．切好后保存
保存方法：文件——存储为web所用格式【快捷键ctrl+shift+alt+s】
在弹出的【存储为web所用格式】对话框中，下拉选择框选择JPEG格式
按需求更改质量（低、中、高、非常高、最佳。这五个模式）
点击存储后弹出【将优化结果存储为】的对话框
选择存放位置、设置文件信息——
一般存储时，ps会自动建立一个images文件夹，你要找到刚才自己设定的位置中，找images文件夹，在她里边才有你刚才切好的图。
命名文件名
“格式“——仅限图像
在“切片”那里，可以选择是存储全部切片还是只存储选中的切片，
一般默认就存储全部切片就好了，有时候只需要一小块切片时，可以选择存储选中的切片，他会只保存一张你当前切得图，这样省的自己去一大堆切片中捡出来自己要用的了。
二、 切PNG图
切透明图的核心理念是，你要把不需要的背景图给隐藏掉，只让需要的留下来，底部背景变成像马赛克那样的样式。
1．打开ps拖进来你要切的psd或者tif文件，
一定得是带图层的。
2．先选择移动工具
3．并在顶部选项栏里勾选自动选择，
4．下拉框里选择图层
若没有选项栏或者图层栏的：
在菜单栏点击窗口——选项。打了对勾后就能调出工具对应的选项面板了。
5．然后用“移动工具”点击你不需要的背景图，ps会自动选中该背景所在的图层，
6．你在图层面板中，把对应这层的左边小眼睛关掉就好了，让背景图先隐藏起来。
有时候设计会有好几层，他为了光效或者其他效果做了好几层不同透明度的背景叠加在你要切的东西后边，
你就用移动工具（快捷键v【英文输入法下按v就可以锁定移动工具】）点击它然后关掉它，有几层就多做几步，直到你不需要的背景全部隐藏掉。
但是良心的设计一般会把背景都放到一个图层中，你找到一层背景，所有的都和他在一个组里边，你把组的小眼睛关掉即可
7．然后切片工具切出你要的那个图标
8．保存：文件-存储为web所用格式(ctrl+shift+alt+s)
9．选择png-8/png-24格式，看你对图标的要求了
PNG8”是指8位索引色位图，“PNG24”是24位索引色位图；
png8：
每一张“png8”图像，都最多只能展示256种颜色，所以“png8”格式更适合那些颜色比较单一的图像，
例如纯色、logo、图标等；因为颜色数量少，所以图片的体积也会更小；
png24：
每一张“png24”图像，可展示的颜色就远远多于“png8”了，最多可展示的颜色数量多大1600万；
所以“png24”所展示的图片颜色会更丰富，图片的清晰度也会更好，图片质量更高，当然图片的大小也会相应增加，
所以“png24”的图片比较适合像摄影作品之类颜色比较丰富的图片；
这是二者的区别，根据自己的需求选择吧。
10．然后就是一定要勾选透明度，其他默认设置就好。
Png-8的透明度位置
Png-24的透明度位置
11．”保存全部切片“或者“保存选中切片”
这里还要说明一个问题，有时候一个页面中，我用切片工具选出好几张png图标准备切，然后保存的时候也选择png格式都没问题，
但是到了选择保存位置这个对话框里，选择的是“保存所有切片“，
最后保存出来的图片，只有最后切得那张或者说切片工具选中的那张是png的，其他就都存成jpg格式了，背景是白色底
！！所以切png的图，还是建议，一张一张“保存选中切片”比较好。
或者你的图标与白色底差别大的话，你也可以不计较，让他保存成jpg后再去ps中魔棒抠图也好，不过这样比较麻烦不是。
有的说，背景图和图标每分图层咋办？那咋办？找设计吧。要不你自己选取工具扣吧，扣好了另存为png也是一种办法
三、 其他技巧 ：
1．Ctrl+ +号放大图片，
2．ctrl-缩小
3．按住空格，鼠标图标变成抓手工具，移动页面
四、重磅彩蛋！！！还有一个吊炸天的方法——针对单一小icon切成png的
“移动工具”点击图标，选中图标所在的图层；
右击该图层，选择“转换为智能对象”；（ps这时候没反应，不要大惊小怪，是你看不到而已）
接着再次在这个图层上，右击——“编辑内容”
对话框点击确定
ps就自动生成一个新的文件，只有那个icon，而且是透明的哦！
很神奇有么有！
很省力有么有！
1秒搞定有没有！
以下是图解：
这是点击一个小图标
选中图标后的图层面板
右键点击该图层选择“转换为智能对象”
没转换前的图层样式：
转换后的图层样式：
所以别说“我转换了ps没反应”这样的话了，是有的，你不仔细看看不到
接着再右击——“编辑内容”
点击“确定”
看，他就新建了一个“形状8”的页面，放的是我的png的小图标，
最后你保存为png也好，“存储为web所有格式”也好，自由发挥吧。
这个方法可能只能保存一个图标，
有的人说我好几个图：例如文字+图片都有咋弄？
那就切图呗！
那还要纠结的话那就合并图层吧！
I. 请问网页前端切图的时候需要将一些字体大小特别大或特别小的文字 以png的形式切给前端人员吗
提供你的字体和字号 以及相关的尺寸 剩下的交给前端人员，
J. 移动网页一般效果的尺寸是多大，前端切图应该怎么切
图片不算很大！可以用百分百控制图片的宽度！切记高度要一致。