从交互设计到硬件创业 Interaction Design & Hardware Startup
December 23rd, 2010

鲸男 iPhone App 制做简易指北 – 4, 只有图标的 app 也是 app

项目组里有图像设计背景的人,做事的思路通常不是从概念和系统入手,而是先做一个视觉系统比如一堆有得没得的图标,这次也是一样,,,

目前的手持 iOS 设备有三种不同的分辨率,iPhone 4 的 960 x 640 px,iPhone 的 480 x 320 px 和 iPad 的 1024 x 768 px。相应的它们需要3种对应不同分辨率的程序图标,再加上每个图标还要备一个供设置页面使用的小号图标,那就是要6种。如下图:

GaoAllSize

借助自动化的小工具,这些尺寸不一的图标可以在两个步骤内完成,首先用 Illustrator,Photoshop 之类做一个 114 x 114 px 的图标,导出为 PNG 格式。如下图:

gao114

接着下载一个叫 IconUtility 的批量生成软件,把准备好的 PNG 格式图标拖入软件窗口自动生成6种规格的图标。

IconUtility

接着找到我们上次新建好的 app 文件夹,我的是 Gao002,依次进入 /bin/data/ 找到里面叫 Icon.png 的图标文件并删除,在上一步生成好的图标里找到满足分辨率需求的哪一个,比如我未来会把这个 app 安装到 iPhone 4 中,所以分辨率为 114 x 114 px 的 Icon@2x.png 是最佳选择,把它复制到 /bin/data/ 文件夹并改名为 Icon.png,图标自定义就完工了。同理,里面哪个 Default.png 的开机图片也可以替换。

path

再回到 Xcode 里运行程序,哇!图标变了!

gao002Icon

但程序里面依然是只有灰色背景,好吧,下次再说,今天就这样了,再见!

——————-

参考网站:
1, iOS app icon sizes
2, Designing for iPhone 4’s Retina Display
3, IconUtility – iPhone/iPad用のアイコンイメージ作成アプリケーション
4, iOS icon template for Illustrator CS5
5, iOS Icons Made in Pure CSS

——————-

by Whale | Posted in iPhone, openFrameworks | No Comments » |

0 Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment














Powered by Wordpress using the theme bbv1