关于WB主题的细节处理

日期:2008 年 12 月 4 日理论 & 教程
图片载入中...下午和群里的朋友谈到关于GUIC08上一些设计师的主题作品。我觉得不少作品从设计(效果图)上说是出色的,但是实现成主题之后因为这个那个的原因效果大打折扣,所以这边简单聊聊我眼里从一张效果图到可用的主题间我们需要关注的细节。个人觉得若干个主题如果在这几个方面有提高了不但能和效果图更接近,而且质量也能再上一个台阶。


  1. 字体
    从目前来看主题上无法实现字体颜色的渐变处理等,所以我们做的其实只是改善现有的字体太过平淡问题。

    以SkyUI在本届GUIC大赛上的Metal Stone主题为例,个人认为主题的设计还是不错的,但是从任务按钮这边来看还是感觉不够协调,纯白色默认Tahoma字体,也没有任何效果,所以和整个主题的厚重风格很不相符,如果能用上一个特别点的字体(即使不算WB主题自带的内嵌字体功能,系统默认字体也带给了我们很多选择余地,要阴柔的有Trebuchet MS,要坚实的有Franklin Gothic等等),再配合上颜色阴影等应该会效果好不少,关于WB中的高级字体效果,可以查看我之前的文章——SkinStudio字体效果小教程



  2. 半透明边框
    其实从很早的时候WindowBlinds就开始支持半透明的边框。半透明的意义不是去模仿Vista,而在于有了alpha通道,我们就可以直接在主题的边框上加上阴影并且保证圆角的光滑。

    先说阴影,Windows主题之所以难做就是因为我们要考虑到各种系统中出现的状况,比如窗口的边框,你说边框颜色深了吧,在淡色背景下就显得突兀了,你说颜色淡了吧那遇上深色的桌面背景就会发觉边框很虚。再以Metal Stone为例,这个主题没有用上半透明的边框,也就没有窗口阴影,但是作者在效果图里比较讨巧,直接使用了深色的背景,和主题边框看上去还比较融合,效果不错,但是当主题真的加载之后就会发觉效果没有那么理想。如果这里能恰到好处地加上阴影的话不但能突出层次,而且也能更好地表现出整个主题的厚重感来。

    再说窗口边框的圆角,不知道大家怎么看,反正我在用惯了圆滑圆角的主题后一见到不透明边框的圆角就会联想到XP的默认主题,除非主题本来的设计就是用方角。

    关于如果实现WindowBlinds半透明边框可以看这里:WindowBlinds主题边框制作小教程




  3. 保证预览图图和主题实际效果尽量一致
    对于我自己来说做主题的过程就是一个妥协的过程,有很多地方无法实现设计出来的效果,而在如果设计稿和最终效果差别较大的时候,妥协得是不是高明就是决定主题好坏的一个重要因素了。我所做的主题发布时的预览图全部都是PS出来而不是直接截屏,但是PS的素材都基本上是根据实际主题截出来的,这样可以保证用户把主题下载回去之后看到的东西和预览图不会有很多意想不到的差别而产生不快。

    昨天看到了Sky UI上传了一套新主题: Skyui Offical Theme,一看就知道这是直接把设计稿给传了上去,切不说主题质量如何,当用户真的把东西下载回来装上一看完全不是这个样子的时候会作何感想?所以我提倡预览图里可以有花头,需要有亮点,但是不要有虚假的成分。哪怕效果做不出来也宁愿把预览图修改成最终的样子,让用户感觉更真实一点而不至于最后落差太大。



  4. 其他新特性
    很多朋友都抱怨过Stardock的软件难用,但是平心而论,开发了这么多年的WindowBlinds花了Stardock很多心血,完全自主开发的GUI渲染引擎也让他们不断地能推出新的特效和功能,这里就列举一些:
    • 几乎所有控件的鼠标悬浮状态都支持动画,也就是从默认主题过度到悬浮状态。这部份的制作可以参考我之前写的关于动画开始按钮的教程——WindowBlinds主题动画开始按钮制作教程
    • 很多控件包括单选、多选、普通按钮、窗口最小化/最大化/关闭按钮等都支持外发光,也就是在底图的基础上还能设置一张大小尺寸不限的Mask用来模拟外发光效果,而由这个效果衍生出来我们也可以实现突出开始菜单的开始按钮
    • 关机/注销对话框虽然修改程度有限但是可以加入一个背景把桌面背景盖住,而载入皮肤时的loading画面也可以用上动画
    • 新出现的6.2/6.3版本已经能比较好的支持“层”的概念,简单来说可以帮助我们在一个拉伸的背景上叠加一层平铺的纹理,这个功能有助于更好地实现复杂的主题设计



还有很多就不一一列举了,但是对于有志于做WindowBlinds主题的设计师来说我的建议还是先通过修改一套WB自带的主题,比如Diamond,这里的修改可以是把这个主题做成自己设计的样式,从头到尾替换一下,目的不是做成品,而是摸透主题的所有组成部分和支持的功能、特效。


博文评论
微博 知乎 Twitter Dribbble Behance Instagram LinkedIn Unsplash