January 19th, 2008
6:06 pm
Voice
原定标题-《为什么非得要跟用户作为?》
如果做S60手机的主题:
跑那个慢到乌龟都不耐烦的Carbide.ui,SVG tiny有复杂度限制(比如说没有alpha透明),费死了劲做出来的矢量图标又不一定好看,最后还要打包输出。就为了让人做一套然后所有的分辨率都受益吗? 对用户来说,我只有一台S60手机,我就想简单换换主题就行了,费这一大圈劲实在太累。所以S60 theme也一直没有什么真正的佳作。
PNG不就是挺好?
Leopard的cover flow模式下,可以看到平滑的大小缩放 ,不用矢量也挺好的嘛(毕竟不是要放到无限大)。
问题的本质在于,虽然矢量图形可以做到和位图一样精彩,但是如我所说费死了劲 ;毕竟PS做张PNG效率还是很高的,而做一张矢量图标则对制作者提出更高的要求。
所以我觉得iPhone就不错,替换图片多简单的事情啊。
PS里面Save as选BMP应该选32位的 -_-b
并且16位,24位都不可以
还是iphone方便啊。nokia搞这么多年自己把自己搞得太复杂了。
准备两样东西
1) Carbide.ui S60 Theme Edition 3.1 for Symbian OS
Nokia的主题制作工具
-java写的软件, 巨慢无比, 界面也很复杂, 不友好软件一个
2)Adobe Illustrator CS / CS2 /CS3
步骤:
安装Carbide.ui S60 Theme Edition 3.1 for Symbian OS
Windows - Preference - Carbide.ui - External Tools
External Editors - Vector Editor
写上你的Adobe Illustrator的完整路径,类似于
C:\Program files\Adobe\Adobe Illustrator CS2\Support Files\Contents\Windows\Illustrator.exe保存设置
选中Resources面板里面的Icons -> Applications Icons
找一个顺眼或者不顺眼的,双击之
会转到Adobe Illustrator的界面,你可以新开一个.ai文件编辑好之后,粘帖到由Carbide.ui S60 Theme Edition打开的svg文件里面去。
Save as
得到一个SVGT1.1的文件。 编译成mif加入到你的程序里面。
常见问题:
1. 如果直接由AI粘贴到Carbide.ui S60 Theme Edition中,常常会把矢量图转换成位图
2. 如果直接新建svg文件,常常搞不定背景透明(Transparent)的问题
本站另外一篇svg的文章
August 15th, 2006
6:04 pm
Design
以往我们在给手机做图形的时候,往往要被屏幕大小所困扰,有时候不得不点像素或者抠像素,Nokia的Scalable UI就是想把设计师们从困扰里面解救出来,在我以前写的一篇blog 《Mobile Game UI design system》中,也曾经设想过SDK可以做到很强大以减轻开发压力。
S60第三版是革命性的,抛弃了向下兼容(cool and pain),也带来了对2维矢量图的支持(也就是说不光是在图标上你可以使用矢量图,在程序里面比如说Flash lite或者小游戏什么的你也可以使用SVGTiny)。
传统的icon制法也仍然有效,比如说用一个黑白的2bit的bmp来做mask以实现透明(Transparent),但是这种mask只能导致边缘的残破(如果你点像素的话,应该还okay,但是不同的分辨率和屏幕大小呢? 也还是有尴尬的问题)。
S60支持的SVG是SVG Tiny,非压缩(Copression: No(ASCII text or Binary)), 24bits/pixel Color depth, 对文件大小也有一定的要求(10k以下,根据具体条件还有7k以下或者4k以下)。所以坦白地说,作为设计师,你的压力并未减小(尝试用最朴素的填色方法,更简洁的曲线,更少的效果)。因为曲线和控制点影响到文件大小,进而影响到运行起来需要的资源,所以你现在只能说是解放了脑子,但是双手还没有彻底解放:)
(我之前写过用C4D、PS来模拟N70这种风格的图标,现在看来,只要你熟悉矢量绘图软件,那么直接上SVG当然最好!)
至于生成SVG Tiny,你可以用AI CS,也可以用Free hand,在官方文档里面有一份简单的列表可以参考。同时S60开发SDK里面也有一个SVG到SVGT的转换程序。
一些链接:
1) S60 Platform: Scalable UI Example v2.0
2) Introduction To The S60 Scalable UI v1.4
3) S60 Platform: Vector Graphics Optimization
4) http://www.svg.org/story/2005/11/2/22356/0817