为iPhone App切图的技巧

标签: Design Develop app iOS iPhone | 发表时间:2011-08-17 08:53 | 作者:Kevin armgod
出处:http://kevincao.com

为了支持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,得到一个缩小后的副本。最后再把文件名改回来。工作流程就结束了。

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

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

相关 [iphone app 技巧] 推荐:

为iPhone App切图的技巧

- armgod - Kevin Cao's Blog
为了支持iPhone 4的视网膜屏,我们开发App时要准备两套大小的图片资源. 一般情况下,设计师就只做好高分辨率的Layout,我们在切图的时候多存一个缩小的版本. 切图的工作本来就繁琐,现在居然还增加了一倍工作量,实在难以忍受. 所以今天我们就来探讨一下利用工具提高效率的做法. 说明:有一些图片不能直接缩小,为了追求UI设计像素级精确的美感,设计师应该做好两套Layout.

DBA Notes 也有 iPhone App 了 ?

- Epile - DBA notes
刚才在我的 Google+ 上发布了一条半开玩笑的信息:DBA Notes 也有 iPhone App 了. 其实没那么神奇,借助于这款 iOS App : Bloapp .. 安装完这个 App 之后,到其网站上"创建"你的 App,其实主要是一些视觉风格的定义,用它扫描生成的这个 QR Code :.

iPhone App自动化测试

- BeerBubble - Taobao QA Team
         无线客户端的发展很快,特别针对是android和ios两款无线操作系统的客户端应用,相应的测试工具也应运而生,这里主要给大家介绍一些针对iPhone App的自动化测试工具.          首先,我们把这些测试框架分为三大类:接口测试工具、注入式UI测试工具、录放式UI测试工具.

苹果拷贝被拒的iPhone app

- 小天 - Solidot
Theregister报导,去年英国开发者Greg Hughes向iTunes App Store递交了一个无线同步iPhone和iTunes的应用Wi-Fi Sync,但遭苹果拒绝. 他改为递交到第三方应用商店Cydia(需越狱). 本周一,苹果宣布了iOS 5,其中一项新特性就是无线同步功能. 除了功能相似外,有趣的是两种应用的logo也惊人的吻合.

iphone Web App 导航设计探讨

- Vingel - 互联网的那点事
最近在做iphone端Web App的项目. 由于产品形式新颖,技术环境不成熟,公司给与了较宽松的研发时间. 在一个月的交互设计阶段,每个环节都得到多次讨论推敲,我从中感悟颇多. 导航系统的设计是一个比较典型的点,拿出来与大家分享讨论一下. iphone Native App较常见的导航如下图所示:.

如何用HTML5制作iPhone App

- - HTML5研究小组
所有的object-c的开发者都有一段在iPhone上写程序的痛苦经历. 你曾经想找一两篇iPhone开发的初级教程,但是它的C语言太难学了. 我不想说一些让你放弃的消极的话:你可以放弃它,这意味着这些时间你可以做些别的. 你可以作一个nativeapp 和别的app 一样,并且,很大程度上,它看起来就是一个完美的仿冒的应用程序.

同学录iPhone App开发心得

- - 陈轶的盛夏厅
想起了似乎是一个月的事情了,但实际上是上周的事情. 周一中午,我突然发神经,决定给高中同学们开发一款同学录一样的App. 我需要一个App来证明自己的能力. 我自己也的确需要这么一个东西,我把初中同学的同学录拍成照片放在相册里,高中同学的同学录则放在GoogldDocs. 还有一个原因,我一直希望做一个有人真的会用的App出来,而这次,用户就是现成的,意味着从测试版开始就是有用户的;我甚至可以向他们咨询真正想要什么.