为iphone app切图和重命名

设计师同事用的windows系统,给我推荐了一个文章

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

为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就可以了。


This entry was posted in Design, Develop and tagged app, iOS, iPhone on 2011/08/17.


你可能感兴趣的:(切图)