WindowBlinds Skin 制作初探

鼯鼠

WindowBlinds Skin 制作初探

JJ.Ying (重护航舰)

yingjunjiu@yahoo.com.cn

Welcome to JJ.Ying's Home

　

　

以下图解中所使用的主题为我自己刚做的EulB和Michael Brandt的M16 Dark,特此感谢。

这篇文章是照着badnao的一篇关于vs制作的文章的思路写下来的。以下是原文的url：

http://badnao.wp-host.de/index.php?showtopic=21

　

SkinStudio（一下简称ss）里，每个主题最基本的组成部分包括窗口、控制元件和任务栏（包括开始菜单）

窗口

控制元件

任务栏

鼯鼠

现在分成四个部分介绍

一、explorer『窗口主体』

这些作为最基本的窗口元素，在wb里的定义和vs有些不同，那就是wb的左右边缘用的图片会延伸到标题栏及底部。

特别提一下，wb里许多地方都可以看到vs实现不了的文字特效，比如上图中的标题栏文字就应用了外发光，这也算是我弃vs投wb的一个小小原因吧。大家可以自己研究研究，应该可以实现一点不错的效果。另外wb还有一个特点记得以前用StyleBuilder时不曾见到的，那就是ss可以吧标题栏文字设为局中，如下图：

1.红色部分为Menubar,此处可自定义的包括item background和pulldown menu也就是“文字”“编辑”等文字项的背景和按下后的下拉菜单（此菜单亦作为系统右键菜单）。

2.绿色部分为toolbar，（SS界面中预览在control项）。可编辑部分包括图标背景（共五个状态：普通（normal）、单击鼠标（pressed）、不可用（disable）、鼠标悬停（mouse over）、按下（down））、分割条

3.蓝色部分为statusbar，包含了右下角那个调整大小用的小块（gripper）。在ss中这个小块的位置在controls-combobox border-extra images的最后一个状态。

4.黄色部分为task panel，好像也就是shell style吧，记得老早以前这是要另外改dll文件的。ss里把它单独列为一个部分，其实也没什么内容，需要改掉的图片也就是那几个向上向下的小箭头和几个特殊文件夹（音乐、图形、视频等文件夹）的背景图。其余的都是直接用参数定义，比如背景是从上到下的一个渐变。

　

二、任务栏

主要就是三部分，左侧开始按钮，中间任务栏及右边的系统托盘

这里详细分析一下：

1.开始按钮：

总共5个状态，但基本常用的就是三种：普通、单击鼠标、鼠标悬停。需要注意的是，不过任务栏是水平还是垂直，开始按钮只有这一组。

2.快速启动：

这部分也就有两个内容，图标背景及开始菜单未锁定时的分割条。

3.任务栏按钮：

如果没有记错的话这组按钮就是wb里包含状态最多的。总共6个状态。依次为：

　

普通（即窗口未激活也没有鼠标悬停）

单击鼠标

不可用

鼠标悬停

激活（此窗口打开且处于系统前台）

激活窗口鼠标悬停

　

此按钮分任务栏水平及垂直时两种，且ss中每个状态下的文字颜色都可定义。此外，还有一个flashing状态（比如qq消息窗口有新消息时会闪烁就是高亮主题和普通状态间快速切换。），是单独列出来作为一张图片的。写到这里想起来我以前做的两个wb skin都把这个闪烁状态给忽略了。。。。。

　

4.任务栏背景：

任务栏在顶部及底部时是一样的，在左侧及右侧时则不同，所以共3个状态。还有就是任务栏未锁定时用来调整任务栏大小的细条：

5.系统托盘：

包括水平/垂直两状态时的托盘背景和显示/隐藏不活动图标的按钮

　

鼯鼠

三、开始菜单

1.紫色部分为user panel包括了一张用户图片可用户名字。不知为什么我的机子上名字显示的位置总是捉摸不定，大部分主题的用户名位置都发生了错误，不知道这是不是因为wb对中文的支持不佳造成的。

2.红色部分为放置程序之处除了一个背景就是中间的分割条

3.蓝色部分ss里叫places同程序部分一样，一个背景和一个分割条。

4.所有程序，这个比较特殊，高度30，似乎是不可调整大小的。程序菜单打开之后的背景及选中项目的图片也可自定义。

这里提一下：如果你的开始菜单的中部（及红色/蓝色区域）有从上至下的渐变的话那左右两部分就不能用同样的渐变，因为右边是全高的，而左侧是由程序及所有程序组成，否则开始菜单越长两边的差异越明显，就露出破绽了。

5.黄色部分里包含两个按钮：注销和关机。（准确说是3个，另一个是undock，登陆界面里也有这个按钮，可我从没在应用中从没见过，不知哪位能告诉我）还有就是按钮的背景，这里感觉这个设计有点累赘了，弄成一个不就得了，多一个不就添麻烦了嘛，尤其是我在做第一个wb skin时，做到这里偏偏碰上断电，结果这个部分出了莫名其妙的错误。。。所以我对这个有部分特别讨厌。。。

　

四、控制元件

最后就是最麻烦的部分了，这里包含的东西最繁多，但也没什么好说的，就是些按钮

内容比较多，所以就如ss一样分成两部分讲

1.黄色部分为小窗口，比如ps里右侧那些面板和myie中的简易收集板。这个弄主窗口一样也分成激活与未激活状态，唯一的按钮就是关闭按钮。

2.右侧及底部当然就是滚动条。滚动条背景也分成normal/pressed/mouse over/disable几个状态。而上下/左右的尖头由两部分组成，及底部按钮和覆盖在其上的小箭头。

3.绿色的称为tab，大部分tab一整个都是显示默认颜色，而有些则可以按你定义的图片来显示，如下图：

4.红色的是选框，分成单选和多选

多选框的最后四个状态称为混合，如果一个文件夹下文件的有些是只读，有些则不是，那打开文件夹属性就可以看到这个状态。

顺便提一下tga文件的情况，大家知道tga文件是可以包含通道信息的，这样tga也可以实现像png那样的半透明效果，由于有些部件是带圆角的，不用半透明则在不同背景下就会出现或多或少的锯齿，所以有时就会用到tga文件来代替bmp，如上边的单选框。

5.黑色的就是系统按钮了，

状态依次是普通、单击鼠标、不可以、鼠标悬停和默认（即窗口中你按回车所自动按下的那个按钮）

1.灰色的是下拉框，可以定义边框的颜色和右侧那个按钮。

2.红色的是进度条，居然还有垂直的进度条，大家见到过吗？

3.绿色的就比如调整音量时的出现的那组调整块。大家也看到了，这部分尤其时右边那半都不整齐，我始终搞不定，而且ss里的预览与实际应用也有些不同，所以这里也懒的再调整了，建议大家做成和原来luna一样的中宽宽的大块。

4.黄色的微调框基本和普通按钮一样只是上面贴了可以自定义的尖头，底部的按钮基本可以沿用系统按钮，只是大小，margins和位置需要调整一下。

5.蓝色的listview是在以“详细信息”显示时出现的。

几个状态依次是

普通

按下

多余（也就是图中最右侧没有显示内容的那部分）

鼠标悬停

多余

　

有两个一样的，不知有什么区别。。。

　

　

似乎除了中学时的作文外第一次写长一点的东西，语言水平也很差，所以可能有些不着边际，大家将就着看吧。

到现在为止我也只做过两个wb skin，很多地方自己都搞不清楚，所以其实更希望大家把自己的心得都分享出来，让更多中国人都能加入skinner的行列。

　

　

by JJ.Ying (重护航舰)

yingjunjiu@yahoo.com.cn

http://yingjunjiu.77g.net