标签归档:Safari

分享一下我做iPhone图标设计时使用的辅助工具

分享一下我做iPhone图标设计时使用的辅助工具 Icon Previewer

因为图片在iPhone/iPad的显示效果与PC机相比经常会有一些差异(颜色、大小),所以图标设计完后习惯上我都会放到真机上看看效果,再对比一下做做修改。刚开始的时候每次修改图标都要build一次项目,然后是一次又一次的漫长等待。。。于是便诞生了这个在iPhone上快速预览图标的东西。

介绍一下Icon Previewer的结构:

iconpv
-Icon.png
-Icon@2x.png
-main-bg@2x.png
-index.html

下载地址在这里这里

预览

 

使用时请自行替换icon.png和icon@2x.png成你的项目图标,默认Size与iPhone App的图标一直,分别是57×57和114×114
然后在iPhone上打开index.html,怎么打开?up到自己的服务器或者自己架一个,然后在safari输入你的server地址…

Safari默认的上下两根导航条很影响预览的效果,如果你不想看见他们的话(譬如我…)需要点一下下边的收藏按钮,选择添加至主屏幕

然后iPhone上就会多了个名为Icon PV的图标,点击打开它后就是这个样子

Safari的两根menu栏就不见啦,点一下右上角绿色的preview按钮就可以看到最终效果了

界面上My App的位置就是你刚才替换掉的Icon@2x.png,每次修改好图标后点击上边的Refresh按钮就可以预览新图标了。

PS:预览的是Retina的效果,iPhone4以下的版本还没测试,有bug或效果不佳的话请反馈给我
PS2:我想做成online版的previewer,这样使用时就省去了架服务器的麻烦,不过后台的东西我不太熟悉,如果有PHPer觉得这工具有用并且有兴趣开发online版的话请联系我 ceilwoo#gmail.com

 

Icon Previewer provide an easy way to preview icons on the iPhone,it’s base on HTML & CSS.
Download Demo
How to use:
1. upload the folder to your server
2. replace the Icon.png and Icon@2x.png as your project icon.
3. open icon previewer like http://xxxx/iconpv in the mobile safari.
4. tap the fav button and save to home screen.
5. tap the webapp “Icon PV” on the iPhone to preview your icon.

I want to develop an online version, then ppl can drag their icons to “Icon PV” and preview on the iphone/ipad at once, but im not good at the backend language, if u are a PHPer, and interest on “Icon PV” online version, contact me plz [ceilwoo#gmail.com], im eager for ur help T-T.

windows下启用safari的debug mode

由于windows的Safari可以模拟成 mobile safari,而且有强大的debug模式(还是觉得没firebug好用=v=),实在是居家旅行、调试iPhone(iPad) web app的首选。
但是最近升级到5.01的时候发现熟悉的develop菜单居然不见了….
详情不大清楚,表面现象就是apple把那可爱的菜单给隐藏了,所幸还可以通过修改plist的方法把它弄出来。
方法如下:
windows: 到 C:Program FilesSafariSafari.resources 目录,在 Defaults.plist 文件上加上

<key>IncludeDebugMenu</key>
<true/>

重启safari后就可以看见传说中可爱的develop菜单了
mac的话就是 %APPDATA%Apple ComputerSafariPreferences.plist