目前很多手机app设计师都在使用Cutterman工具进行切图，因为这个软件是国内的软件，切图也必将方便。也提供了3个平台的切图方式。最新的切图插件如下图：
IOS: 如果你是为Iphone设计界面，请使用ios标签，它能够为你生成符合ios系统的单/双倍图
Android: 如果你是为Android设计界面，请使用Android标签，它能够生成符合Android系统的各种DPI分辨率图片
PC: 如果你是做web端的设计，请使用PC标签，它可以支持输出png/jpg/gif等各种格式和质量大小的图片
选择完平台后，会进入到主界面，如果需要切换平台，可以点击界面左上角的箭头按钮，切换目标平台。
我们先来回顾一下切图知识点重点提示：
1）、所有切图必须为偶数。不管是ios的切图 还是android 的切图。
2）、可平铺部件切图时可如下图：
带圆角按钮切图时可如下图
并在效果图中标出具体大小和尺寸。
3）、ios切图需要切出2套，一套是@2x png和一套@3x的png、png格式为24位的png。
APP界面具体的切图细分：引导页、启动页、APP图标、需要作为整块的元素都是要切除@2x和@3×2套的切图素材。
如果需要平铺的元素：如背景、线条、按钮、渐变等等 都是切.9.png
点九图是适合ios和android 2大系统的。
现在精准化的元素切图是保证还原高品质app界面设计的保证。切图的技巧决定移动app界面设计美观度。当然还有标注。
4）、所有表单元素务必切两种状态：比如按钮的正常状态和按下状态
checkbox的选中状态和未选中状态等等。如下图的图标切图状态示例图：
25学堂的关于Cutterman切图的干货教程有：
今天25学堂只是跟大家讲解cutterman ps插件安装完成之后，如何来使用cutterman工具进行切图。3步轻松搞定Cutterman切图。算是一个比较简单的Cutterman切图教程。
Cutterman切图简单步骤：
第一种情况：导出一个图层的切图素材。
1. 选中一个你需要输出的图层。
2. 点击“保存路径”按钮，设置你想导出到本地的某个文件夹。
3. 点击“导出选中图层”按钮。
注意 !一个图层组对Cutterman而言，仍然表示一个图层，会将组里头的所有内容合并作为一个图层输出。
第二种情况：导出多个图层切图素材：
1. 选中多个图层
2. 点击“保存路径”按钮，设置你想导出到本地的某个文件夹
3. 点击“导出选中图层”按钮
注意 !选中多个图层进行导出，默认会逐一输出每个选中的图层，如果希望将选中的多个图层合并导出，请在界面又上角的设置项里头进行设置。
第三种情况：固定切图尺寸来切图素材
1. 在固定尺寸的位置填入你希望输出的宽和高，注意必须要比icon的尺寸要大。
2. 点击导出选中图层按钮。
注意 !设置固定尺寸后，icon会默认居中显示。如果设置的尺寸比icon尺寸小，会出现icon被裁剪的现象
以上就是使用Cutterman切图的三种情况一一跟大家讲解啦。这回是不是很容易上手来进行Cutterman切图啦。如果你还不是明白，可以加我们25学堂的微信或QQ群。主动问群里的app设计大牛们。
本文标题：
本文地址：/appdesign/9476.html
除非注明，本站文章均为原创或编译，转载请注明出处和原文链接，转载同时请务必保留原网站网址。
移动APP设计入门课程
为你推荐的相关文章
Copyright@
All Rights Reserved ICP备案号：桂ICP备号-2本站声明所有资源均是网上搜集或网友上传提供，如有侵犯您的版权，请及时联系我们（），我们将尽快处理。火车在她背后擦身而过，情况十分惊险。
派出所进行调查取证，依法对谢某某予以拘留。
声明：本文由入驻搜狐公众平台的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
　　相对于程序来说，切图门槛很低，只要有一些ps基础，摸索个五分钟基本也就了解各大概。
　　但是就跟其他的所有技能一样，切图也是有很多技巧性和经验在里面的，这些东西可以让你的切图工作更有效率，更有目的性。
　　话说，你真的用对了吗？
　　本文希望把我做切图的心得整理归纳一下，希望对各位前端，程序员，设计师有所帮助。
　　说明：
　　笔者用photoshop cs5做示例，不同版本功能会有稍许差异。
　　第一部分：一些快捷键
　　相对于设计和绘画，切图用到的ps并不多，以下我总结一些在切图中比较常用的快捷键，这些快捷键能答复的提高你的工作效率，并且看起来很酷。
　　自由的控制视图系列
　　自由的浏览图片：按住空格后，鼠标拖动
　　自由的缩放图片：按住alt+滚轮
　　切换到实际像素（100%）：Ctrl + 1
　　工作区类型切换：Tab
　　控制内容系列
　　通过画面上点选一个图层：Alt + 鼠标右键
　　在画面上拖动一个图层：V 切换到移动模式 鼠标拖动
　　复制拖动一个图层：移动模式下 Alt+拖动
　　删除一个图层：选中要删除的图层 按下 Delete
　　合并多个图层：选中要合并的图层 按下 Ctrl+E
　　选区内填充颜色：Alt+Delete (前景色) Ctrl+Delete(背景色)
　　缩放当前选择图层：Ctrl+T(自由变换模式)
　　实用工具系列
　　画一个选区：点击M进入选区模式 ， 鼠标拖画
　　放弃选区：Ctrl+D
　　吸管工具：点击I进入吸管模式，点选画面颜色
　　文字工具：点击T进入文字模式，点选画面的文字或者创建新文本
　　切片工具：点击C进入切片模式（旧版本会有不同）
　　第二部分：一些实用技巧注意PS所处的状态
　　photoshop开启一个文件，软件本身就处于不同的状态之中，总结下来有这样几种
　　工具状态 ― 代表当前是出于移动模式，选区模式，切片模式或者是吸管模式等等，工具状态代表你当前对文档操作的类型。
　　有一些特殊的状态下，要求你必须做出选择，这时候状态的切换会暂停。比如，文字输入模式和自由缩放模式下，你必须先对当前所做修改做出确认，才可以进行下面的操作。这种情况的特点是状态栏会出现如下选择，如需快速放弃修改可点击ESC
　　图层状态 ― 代表你当前操作的对象，有一些对象只接受特殊类型的操作。
　　比如一些填充和绘制的功能无法在文字图层进行，图层组不能进行操作。总之，你在进行涂层修改操作的时候，一定要注意当前操作的对象，否则容易造成误操作和操作不能
　　色彩索引模式 ― 这是一个常见错误，通过导出web格式图片出来的png会自动换成索引模式，如果要继续修改需要把索引模式转成RGB模式
　　操作图层
　　如果不是设计者自己来切图，那么切图者需要从图层里来体会设计者的意图。如何分组，层次间的关系都体会了设计者对页面结构个人的理解。所以对一个设计稿来说，第一步是粗看图层，理解设计意图，其次是根据自己的理解对图层进行新的操作和转换。以下是关于图层操作的一些经验：
　　关闭图层可见性 C关闭图层可见性非常常用，因为有些页面元素是交织在一起的，你通常需要关闭其中某项先切一部分，再切一部分
　　合并图层 ― 设计师载入第三方的元素这类的作法，会让页面某些小部件的图层结构异常复杂，这时候将整个组合并Ctrl+E 不失为一个好办法
　　合并图层的时候需要注意的是图层效果会跟随合并，这一方面会带来不好修改的问题，所以合并完了通常Ctrl+Alt+Z还原,另一方面在某些时候还是很有用的，但个图层的效果跟空图层合并也会起到图层栅格化的效果（文字图层也可以跟空图层合并）。
　　复制图层 ― 有些时候一些sprite效果可以直接通过复制图层在原稿上列出来，再通过切片工具出图
　　图层盖章 ― 在一些图层特别复杂的页面，有时需要用到图层盖章工具，选中最顶层的图层，点击Ctrl+Alt+Shift+E 可以把以下的所有图层盖到一个新的图层上。这个操作的好处是可以在不影响图层本身的情况下，合并图层。
　　生成图片
　　1)图片格式 ― 图片格式的原则简单来说是架构复杂，色彩众多的图片jpg优先，色彩简单，需求透明的png优先。png24在IE6下不兼容。
　　2)切片工具 ― 切片工具是ps为切图提供的强大的批量的工具，所以一定要尽可能的使用它。使用切片之前先采用上述的方法对图层进行处理，然后按需划取需要的切片区域，使用切片工具的时候有如下几个小技巧：
　　切片选项 ― 划取完分区以后，要对切片进行一些设定是很重要的，切片工具下Alt+点击切片，会弹出如下窗口
　　首先，可以检查切片的尺寸和位置，尤其是尺寸，比如你要切的按钮定宽高，这里的检查和设置就至关重要。其次，在这里直接命名，可以省去出图以后重命名的时间。
　　切片储存 ― 切片在储存的时候，可以点选每个切片对其设定不同的图片格式，保存的时候可以选择保存选择的切片而不是全部。
　　3)全新图片 ― 很多时候，切片难以直接使用，图片需要进行二次处理。这时候我认为有以下几点需要注意：
　　千万不要对jpg进行二次处理：jpg就算质量100%也是有损格式，二次处理的jpg会有肉眼可见的质量损失，所以要采用png的各种作为中转。
　　注意图片尺寸：有些版本的ps在拖拽进文档的时候会默认尺寸适应，这会导致图片尺寸在你不知情的情况下发生改变。解决的办法可以是优先创建尺寸正确的图片，或者以源文档图层的形式拖拽进新文档。
　　缩放 ： 任何格式的图片缩放都会产生质量损失，尽可能采用矢量图缩放，或者在源文件的路径里缩放再拖拽。
　　4)新图片处理 ― 新图片的处理有以下几个常用的技巧：
　　图像裁切和显示全部 ： 图片小于画布或者图片大于画布的情况下使用裁切和显示全部命令，可以保证图片的精确性。命令位于 图像(I) -& 裁切/显示全部
　　活动选区，复制，粘贴 ：这三个命令配合使用可以实现很多转换。比如一个渐变按钮的缩短扩大。
　　本来是想写一个切图的十分钟入门教程，发现写着写着有点跑题，越来越细致。本文是我自己切图的心得，而切图技巧也因人而异，也需要各位自己去发现总结自己的技巧。另外一方面，我想切图的重点也许并不在其本身，而在切图者知道要怎么切，熟悉web页面构建的原理，同时根据自己的需要切出不同的效果。
欢迎举报抄袭、转载、暴力色情及含有欺诈和虚假信息的不良文章。
请先登录再操作
请先登录再操作
微信扫一扫分享至朋友圈
搜狐公众平台官方账号
生活时尚&搭配博主 /生活时尚自媒体 /时尚类书籍作者
搜狐网教育频道官方账号
全球最大华文占星网站-专业研究星座命理及测算服务机构
提供最新的山东事业单位招聘考试信息，包括招聘简章、职位表下...
主演：黄晓明/陈乔恩/乔任梁/谢君豪/吕佳容/戚迹
主演：陈晓/陈妍希/张馨予/杨明娜/毛晓彤/孙耀琦
主演：陈键锋/李依晓/张迪/郑亦桐/张明明/何彦霓
主演：尚格?云顿/乔?弗拉尼甘/Bianca Bree
主演：艾斯?库珀/ 查宁?塔图姆/ 乔纳?希尔
baby14岁写真曝光
李冰冰向成龙撒娇争宠
李湘遭闺蜜曝光旧爱
美女模特教老板走秀
曝搬砖男神奇葩择偶观
柳岩被迫成赚钱工具
大屁小P虐心恋
匆匆那年大结局
乔杉遭粉丝骚扰
男闺蜜的尴尬初夜
客服热线：86-10-
客服邮箱：切图教程，切图小经验
来源：站酷
作者：卡米Q
本教程完！
【原创教程 投稿邮箱：】
==================== 学习提示 ====================
打开ps，跟着教程做一遍，做完的图要到这里交作业：
教程有看不懂的地方，可以到论坛发帖提问：
加官方微信，随时随地，想学就能学！
官方微信：ps_bbs，或扫右侧二维码！
关注我们微博：(粉丝33万)
想学更多的同学，可以订阅我们邮件，每天都有新教程发给你：
最后希望大家
旧一篇： 新一篇：
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
免责声明：除本站原创外，本站文章均收集整理自网络，其版权归该教程原作者或原出处所有！本站转载文章均保留了原出处及作者，如出现资料错误或侵权，请联系修正或删除：前端切图你真的会了吗？ - 简书
前端切图你真的会了吗？
前端07班 王
O(∩_∩)O~
Paste_Image.png
大家晚上好！今天晚上由于公司没有加班,所以我能在十一点之前写我的博客了，呵呵，在这里我要谢谢我们公司的老板因为考虑到我在学前端开发课程，就破天荒的提前让我早早地下班了......
呵呵，简单的开了一个玩笑，希望小伙伴们在学习前端开发的时候不要太压抑了，能够每天保持一颗好心情，平常心。OK，下面开始正题咯！
今天我要写的博客名字是“前端切图你真的会了吗？”我觉得这个问题虽然有些小儿科，但是也是每个学习前端开发人员必备小技能之一哦，所以，咱尽然选择了学习前端开发课程，切不可掉以轻心，切不可天天都想着学习一些高大上的东西，要不然，到头来吃亏的是自己哦，我觉得不管做什么事情都要从一点一滴开始，积少成多......
就目前前端开发切图使用最多的工具之一就是Adobe公司的photoshop，因此，我们就要了解它，甚至懂它！
Photoshop cc2015版本.png
Photoshop 是视觉设计师最强有力的武器之一，其实 Photoshop 也为前端开发同学带来很多惊喜。特别是从 Photoshop CC 版本开始，它变得越来越有趣。
自动切图（含WebP、SVG格式）：前端开发人员经常需要将很多图层切出成独立的图片。有了自动切图功能，无需花更多时间来切图了。只需在图层名后添加相应格式后缀（如.png)，即可自动输出所需格式的图片。请保持菜单“编辑-&首选项-&增效工具”中的“生成器”为启用状态；依次点击菜单“文件-&生成-&图像资源”，确认该菜单项已被勾选；
Photoshop CC自动切图与前端CSS代码
Photoshop CC自动切图与前端CSS代码
试着修改某个图层命名(如 iTunes.png)，然后检查当前 psd 文件所在目录下的“文件名-assets” 的目录，打开此目录，发现 iTunes.png 已经躺在里面了。
Photoshop CC自动切图与前端CSS代码
常用技巧：@2x Retina 图片的输出，在图层前添加 200% 即可，如 200% logo@2x.开启 WebP、SVG 格式的自动输出： 新建 generator.json 文件，内容如下：{ "generator-assets": { "svg-enabled": true, "webp-enabled": true }}将此配置文件拷贝至： Windows: (Win+R后输入 %USERPROFILE% )目录下，如 C:\Users\xxx Mac OS: $HOME 如“Macintosh HD&Users&xxx” 目录下 WebP 输出暂只支持 Mac OS。
复制 CSSPhotoshop CC 终于推出了“复制CSS” 功能。它能让开发人员快速获取形状的 CSS 代码。其实不少设计师也很想学习 CSS，有了这个功能，可以让这些爱学习的设计师熟悉 CSS 代码与图形的对应关系；
Photoshop CC自动切图与前端CSS代码,PS教程,思缘教程网
右击图层面板上的图层，选择“复制 CSS”，或点击菜单“图层-&复制 CSS”；多个图层的批量获取，请选择多个图层，执行 Ctrl+G，将所选图层转为图层组。然后在该组上右击，选择“复制 CSS”，即可批量获取 CSS 代码。智能对象暂不支持“复制 CSS”功能，您可以栅格化该图层再来使用。当前的版本的此功能，包含了很多冗余信息和不太友好的写法，可能不是大家真正需要的。于是 ISUX 前端团队改进了这个功能，您可以下载“”来增强 Photoshop CC 自带的“复制 CSS”功能，提升 CSS 代码的真正采用率；目前的优化有：
自动识别 CSS Sprite 图片，获取 background-position 信息；
自动识别是否图标；
优化 CSS3 渐变、文字、边框、阴影等 CSS 代码；
优化 RGB 颜色值成 十六进制颜色；
去除冗余 CSS 属性，如 position, z-index, left, top 等。您也可以反馈更好的建议，让这个功能真正为大家所用。
图层管理前端开发同学接手的 psd 文档，往往有大量图层，我们需要对其进行整理。例如删除空白、锁定、文本等图层。我们还可以通过图层类型、名称、效果、属性等条件进行快速定位图层。
Photoshop CC自动切图与前端CSS代码
Photoshop CC自动切图与前端CSS代码
Photoshop CC自动切图与前端CSS代码
Photoshop CC自动切图与前端CSS代码
使用此功能可以很方便定位到当前选定图层，非常适合含有大量图层的 psd 文档。另外隔离图层也是个很不错的功能。开启隔离图层功能之后，我们可以通过移动选择工具，点选画布上的内容，找出我们需要的图层将其整理成一个独立的 psd 文件。
WebP 插件WebP 是 Google 为减少数据量、加速网络传输的目的而开发的图片格式。特别适合移动端图片的传输。大大节省带宽，目前只有 Google Chrome 浏览器对其原生支持。Photoshop CC 的 Mac OS 版自带输出 WebP 功能。Windows 下您可以下载此插件来输出 WebP 格式。安装后，可以在 Photoshop 菜单“文件-&另存为” 对话框中选择“WebP格式图片”。
WebP for Photoshop v0.5b5, 16 December 2013 |
动作条件Photoshop CC 新增了动作条件，可以根据不同条件执行命令或其他动作。
Photoshop CC自动切图与前端CSS代码
智能参考线/使用图层颜色这两个功能并不是 Photoshop CC 的新功能。为什么要在这里说呢，因为它能辅助我们一秒居中对齐、一秒贴边，这个非常实用。另外也建议设计师使用图层颜色来标出改动位置，这样前端开发同学便能快速定位图层。
Photoshop CC自动切图与前端CSS代码
Photoshop CC自动切图与前端CSS代码
OK，今天学习前端开发切图就点到为止了哦，希望小伙伴们多多指教，谢谢......
注：因为时间关系，故以上图片素材均从网上复制过来，如有侵犯版权请联系我，谢谢合作。
填写您的个人简介可以帮助其他人更好的了解您。}