分享一下我做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.

HTML 5 备忘录

由Techking整理的html5 cheatsheet(我翻译成备忘录了),list和介绍了html5中所有的标签、事件、属性以及desktop & mobile浏览器的支持情况,《CSS权威指南》的浓缩版。

顺手纠正一下,Internet上好多介绍HTML5很炫很酷的动画效果的东西,其实那些绝大多数是CSS3和Javascript的事情,顶多就跟<canvas>有点关系,HTML还没发展到干这些事情的程度。

最受益于HTML5的是其实开发人员。相信投奔HTML5行列的人很快就会迷上新增的各种标签 header footer section detail…etc。下边截图是nekoq.com重构后的代码。

在HTML5中div的使用率降低了很多,现在可以用header去表示一个页面或是一个模块的头部,用article表示一篇文章,相比在过去的很长的一段时间里你要重复写着很多<div id=”xxx”>这样的东西,层次稍微复杂点的代码块末尾就有一堆的</div>、</tr>、</table>,多人协作开发时还经常遇上少标签,没对齐各种烦人问题。而多元化的标签能很好的降低这些烦恼,so..不要犹豫啦,赶快加入HTML5行列吧。

另外悲剧的IE直到IE9才开始支持部分新增的标签,要兼容过去的版本可以在header加上HTML5 IE enabling script:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

截屏mark

蟲蟲优惠上线第二天,好不容易才把京东挤了下去,在生活类app里排第五,多谢同学们的支持m(_ _)m

PS一下,去M记、真功夫的时候在蟲蟲优惠里选好优惠券,show给店员看就可以点优惠套餐了,不用到处找优惠券,携带也方便 😀

蟲蟲优惠 for iPhone


( ↑点这里下载,或者在iTunes中搜索“虫虫优惠”,免费的噢 😀 )

收集最新的优惠券,完全无纸化操作

※ 自动更新最新的优惠券
※ 完美的离线功能
※ 个人收藏夹
※ 选好你需要的套餐,向柜台服务员展示即可
※ 支持iPhone4 Retina Display

——————————————-
1.麦当劳
2.肯德基
3.真功夫
4.棒!约翰
5.必胜客
6.汉堡王
7.东方既白
8.冰雪皇后
9.小肥羊
10.豪客来

更多的优惠券资源正更新ing…
——————————————-

节约纸张,从我做起,
低碳生活,蟲蟲帮你!

*仅限中国大陆地区使用有效
*有任何的建议或疑问请联系 hi#nekoq.com (#换成@)

蟲蟲优惠-预览-01
蟲蟲优惠-预览-02
蟲蟲优惠-预览-03
蟲蟲优惠-预览-03
蟲蟲优惠-预览-04