为iPhone App切图的技巧

http://kevincao.com/2011/08/prepare-png-for-iphone-app/

为了支持iPhone 4的视网膜屏，我们开发App时要准备两套大小的图片资源。一般情况下，设计师就只做好高分辨率的Layout，我们在切图的时候多存一个缩小的版本。切图的工作本来就繁琐，现在居然还增加了一倍工作量，实在难以忍受。所以今天我们就来探讨一下利用工具提高效率的做法。

说明：有一些图片不能直接缩小，为了追求UI设计像素级精确的美感，设计师应该做好两套Layout。

我们从设计师处拿到的PSD文件通常是这样的：

首先要做些必要的处理，该删除的删除，合并的合并。然后给每个将要导出的图层取好名字。整理完成后的PSD如下：

一层一层裁切导出太麻烦，自动化才是王道。接下来我们执行Files>Scripts>Export Layers to Files...命令，打开如下窗口：

由上至下分别设定几处设置：选择输出的目标文件夹。文件名前缀留空。只输出可见的图层。输出为PNG24格式。最重要的是保持透明区域和裁切图层选项。

注意：经测试，在图层群组内的图层不能正确裁切到图层的实际大小。所以在准备输出之前，要把图层从群组中移出，或者干脆删除群组。

点击Run按钮后我们就得到裁切好的PNG图片。

接下来我们要把图片名字前面的前缀处理掉。这里我用的是Mac上强大的改名工具A Better Finder Rename。设置如下：删除前6个字符。

 

现在我们得到的图片都是2倍版本，后面将把它缩小一半。在此我们要对每张图片检查一遍，确保裁切出来的尺寸是偶数。这一步我没有找到智能化的处理办法。还是要麻烦PS，手工改canvas大小。

最后一步，选中所有图片文件，执行iOS PNG服务。

缩小一倍，加@2x命名，一次搞定。

等等……为什么我的服务菜单下没有iOS PNG呢？呃，当然没有，因为这个服务你得自己创建。接下来我们有请Mac下自带的Automator工具登场。

选择创建一个服务（我选择服务是因为可以直接在菜单下运行，其他也可以的）：

Automator很强大，也很简单。左边是系统提供的一些操作，我们把这些操作一个个安排到右边的工作区，就能创建我们想要的工作流程。Automator的操作是线性的，上一步操作执行后的结果输入到下一步。

iOS PNG的工作流程设计如下：

首先选择服务的输入源为图像文件。然后执行一个改名操作，把@2x添加到文件名后面。接下来执行复制命令，我们将会得到一个filename@2x副本.png文件。

从左边的照片分类下找到缩放图像的操作拖过来，设置按百分比缩放的参数为50，得到一个缩小后的副本。最后再把文件名改回来。工作流程就结束了。

最后保存这个服务，今后在任何地方选中图像文件，就能使用，是不是很方便呢。大家还可以发挥想象力，看看如何改进更适合自己的工作方式。

如果你在切图上也有什么妙招，欢迎留言探讨。

Update：

适用于Lion的服务文件下载，解压后放到/Users/[Your name]/Library/Services就可以了。