切切切切个大西瓜

作者：马宝

切图工（切图环节），这个被设计师鄙视又被工程师忽视的底层又底层的可怜小角色。

看似毫无技术含量，纯粹体力活，非常不招人待见；但在整个产品设计流程中又起到至关重要的作用，直接影响视觉还原度。

就好比：一个靠“脸”吃饭的产品，下定决心策划良久，请了最好的美容师设计相貌儿，找了最好的整形医院（最强实力团队支持） 等到 上了台面让主刀医生吭哧吭哧切了一通，嘴巴歪啦，鼻子没了……

不管你是设计师也好，前端工程师也罢，有一天，你不小心沦为切图仔，需要你大刀一挥的时候， 我想你的回答不应该是：“我不会切图或我不屑于切图了吧！？

接下来才是重点，如何不用插件高效优雅的切，（后面讲插件时候会讲到）

首先你要能够辨别一个设计中哪些元素是修饰性元素必须要切的，哪些是内容性元素可切可不切，哪些是表现形式用代码就可以写出来（不扩展了，自己普及基本常识，@小芳老师）？以WEB为例，在不影响WEB 性能的前提下，高效切图的原则是能不切图就不切图！

A. 切片工具

切片盛行的年代，以前我们是这么干的，现在很多专题页/直邮设计中用的还很多，出图生成HTML很快当时会切出多余图片非半透明，质量不高；

在IE6 的年代，那时候 CSS 还不能画圆角不能做动画，以按钮为例子；我们的前端需要很费力的左切一个圆角，右切一个圆角，中间加条过渡平铺起来 切片工具 》导出WEB所用格式

B. 动作批量切图法－我的方法

我通过PSD 切图的方法将重复做工做成的一套快捷动作，

选定元素》隔离（复制到新建psd）》 裁剪（去掉透明像素） 》导出  适用于 css sprite

如果你想导出元素 ，选择或者批量选定 》按一下 动作，程序自动帮你搞定接下来的活儿，简单两步无痛切图

1. 做动作 看GIF q2.gif

2. 用动作，简单步骤下载附件 双击导入 sprite-切图.atn sprite-切图.atn.zip ，选择 要导出的 psd 图层，按快捷键 F11 导出到桌面 sprite.png （导出下一张前记得重命名哦！）

C. 自动生成&抽出－强烈推荐再“优雅不过了”

确保你是 ps CC 14.2 以上版本的用户，

1. 打开 PSD 文件后，选择“文件”>“生成”>“图像资源”。（旁边有的抽出资源… 点一下你会有新发现哦）

2. 将适当的文件格式扩展（.jpg、.png 或 .gif）添加到您要从中生成图像资源的图层或图层组的名称中。例如，将图层组 CTA Button green 重命名为 CTA Button green.jpg 和 CTA Button green.png；PS 会自动生成 PNG 和JPG文件顺便把你文件名按图层 命名好了

1. 高级玩法 构建复杂图层名称；为资源生成命名图层时，您可以使用参数指定多个资源名称。详见 ps 图片生成器

例如：
120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 200% Delicious.gif

Photoshop 从该图层生成以下资源：(加上英文 ","可以批量生成资源)

• Delicious.jpg（缩放 120% 的 8 品质 JPG 图像）
• Delicious.png（缩放 42% 的 24 位 PNG 图像）
• Delicious_2.jpg（100x100 像素绝对大小的 90% 品质 JPG 图像）
• Delicious.gif（缩放 200% 的 GIF 图像 同理可证 @2X 和@3X 的资源图）

D. 半自动切图工具 推荐

http://www.cutandslice.me/

赶快试试吧，

本文来自网易实践者社区，经作者马宝授权发布