鳴人的窝

转载请注明出处

文中所用来示例的QQ Classic 皮肤在这里下载 

教程doc版本下载: QQ_Skin_Tutorial.zip

一、工具

工欲善其事，必先利其器。有很多同类工具，我只说我用的
1、photoshop，这个是最主要的工具了，没了它你能用画板画出很精致的图也行
2、iconworkshop，制作和修改图标，全靠它
3、emeditor，没有的话，用window记事本也能搞定一切
4、reshacker，习惯用这个来修改资源文件

上面4个是必备的，辅助工具还有

5、color schemer studio，习惯用它取色，调色
6、calc，做皮肤讲究细节精确，因此计算器也是需要的
7、stuffit，解压mac格式的压缩包，配合iconworkshop使用
…… #此前在首页部分显示#

二、基础

其实都不是必须的，我最开始也是什么都不懂。最关键的是要有兴趣和耐心，这就无敌了。话虽这么说，不过还是希望你继续看下去之前明白下面两个“基础”：

1、ps基础，基本的操作要懂，对图片的基本加工要会。不懂的话，要学会临时折腾，久了，就熟
2、代码基础，代码不是很难，简单的xml和vbs，只要有耐心，看它一下午你自然就什么都会了
如果你一碰ps就头疼、一看code就吐血，强烈建议就此打住，别再往下看，出了人命我不负责:~
 

 三、QQ坐标

先来了解QQ的坐标，看图:

cx、cy是QQ面板当前的宽度和高度，c代表current
用A代表面板上任意一个元素，可以是按钮、文字或图片等，A的坐标为（A.left, A.top）

这张图很好懂吧，嘿嘿，考你一下，怎样确定一个按钮的位置？譬如，下面这张图里的最小化按钮的坐标应该怎样给？

假设这个按钮的名称是topBtnMin，那么答案是:
topBtnMin.left = cx - 53
topBtnMin.top = 6

53和6是具体算出来的，换了皮肤可能是其它值，但left值一定是cx - 53这种格式，53表示的是最小化按钮和面板最右边的距离。当你拉伸面板时，cx是一个变量，但最小化按钮始终是靠右的，因此它的x坐标需要设定为cx - 53。这里千万要想清楚，很简单的道理。好了，现在问你，下面的图又如何呢

答案:

状态选择按钮的坐标是left = 86, top = cy - 22
天气按钮的坐标是 left = 3, top = 22

数值具体皮肤都不同，形式则必然是上面的样子。做对了没？没做对的打pp

坐标没弄糊涂的，跟我继续-:

四、解读config.xml文件

打开QQ Classic 2005的皮肤的config.xml，如图

图上说得很明白了。如果有一款QQ皮肤拉不宽，那么只要将maxWidth的值改大一些就行。但请注意，如果是一款精心设计的皮肤，同时限定了最大宽度，那一定是有理由的，譬如，很可能拉得太大时会变形等。因此没必要时，不要修改这些值。

默认的透明色是紫色，这主要是因为QQ现在还不支持png，只支持bmp位图（动态皮肤里可以用gif，但支持得并不好），bmp没有透明色，因此把紫色部分显示为透明

好了，继续看下面的

这一部分是背景图，被切割成上中下三部分，每部分又被切割成左中右三部分
注释已经很明白了，我简单的说一下各项的含义

用<!– … –> 括起来的绿色部分是注释
<Picture … 表示图片
id 是这个图片的唯一标志符
left、top是坐标
width、height是宽高，一般就是原图片的宽高，如果用QQ来缩放，效果很差
image是图像名
zindex是层叠数，越在上面的，zindex越大
其它的不多说，很少用到

除了Picture对象，最常用的还有Text和Button对象，属性都和上面的一样，类推即可

Text的例子:

看见“宁静以致远”了吗？修改之，这个问题就解决了

细心的肯定会发现还有“QQ Classic”字样，的确，这个也是可以修改的，譬如改成 "DRL QQ"

更细心的也许会很奇怪为什么都出现了两次？有了QQSkinName，还有QQSkinName2，这不是多余吗？

揭开秘密的办法是，你任意修改其中一个，保存，刷新皮肤，发现了什么？

这里的巧妙是，出现两次，但位置稍微错开，颜色也不同，当颜色搭配好时，就能出来阴影效果（如QQ Classic），或雕刻效果（“宁静以致远”），这是以前在玩Samurize时想到的，借用在QQ上，聪明的你是否立刻想到，这种文字效果也能很方便 的在网页设计时用上呢？

好了，继续往下看，

这是侧栏和QQ好友面板，意思很明白，就不解释了

再下面是底边按钮组，然后是</window></theme>，整个文件就完了。

可以发现，最常用的对象就三个：Picture、Button和Text
最常用的属性: id、坐标、大小、zindex以及tooltips

对于button，一般还有image、downimage、hoverimage三个属性，分别代表一般状态时显示的图片，鼠标按下时的图片，以及松开鼠标时的图片

invisible属性是很有用的，设置为false，则不可见，默认是true。点击切换头像就是利用这个属性来实现的

cursor属性是光标，就是那只小手

Text一般还有fontfamily等属性，这些和CSS里面的概念是一模一样的，不多说

好了，对config.xml理解了吗？注意里面各行的顺序是可以随便怎么写的，除了开头和结尾。

五、vbscript.vbs文件

如果你有vbs的基础知识，则你完全能自己看懂这个文件，可以跳过此节
如果你没有vbs的基础，建议你先学学vbs，然后也能看懂

于是我不用写了

呵呵，真想偷懒不写啊。代码这东西，会的一看就明白，不会的十个谭浩强也给他讲不清楚。我简单的说一下吧

Dim是定义变量，VBS和JS都是宽松类型的语言，因此不必显式定义变量的数据类型

Sub functionname()
End Sub

这是定义函数

ok，有这两点知识就可以了。说一下TX皮肤里最重要的几个函数

首先是
Sub Window_OnSize(cx,cy)

这个是拉伸面板大小时调用的函数，分析函数里面，
Window.LockPaint() 顾名思义，锁定绘图

然后全是left = … top = …，这些就是面板上各种按钮的位置坐标
如果某个按钮（如头像）的left和top值是定值，则直接在config.xml里赋值就可以了，需要在vbscript.vbs里赋值的都是需要动态改变的

最后是 Window.UnLockPaint() 解除绘图锁定

知道了上面这个函数，想必你已经清楚如何增添一个按钮了

譬如要增添一个QQ宠物按钮，只要在config.xml里添加

<Button id="PetOpenBtn" left="120" top="500" width="11" height="11" zIndex="22" toolTip="打开宠物" image="pet.bmp" hoverImage="pet_hover." downImage="pet_down.bmp" cursor="hand.cur" visible="true"/>

<Button id="PetCloseBtn" left="120" top="500" width="11" height="11" zIndex="22" toolTip="关闭宠物" image="pet.bmp" hoverImage="pet_hover." downImage="pet_down.bmp" cursor="hand.cur" visible="true"/>

当然，先得PS好bmp图片，或者用ico也行，不过上面的代码得改成
<Button … />
<Icon ico="xx.ico" … />
</Button>

在xml和vbs的OnSize函数里设置好位置参数，这样就添加了一个宠物按钮

这时宠物按钮点击不会有任何反应，请回来继续听课，呵呵

接着你会看到这样一些函数，
Sub topBtnMin_onClick()
Window.ExeCommand 1,2
End Sub

onClick，顾名思义，就是点击时调用的函数

对于QQ宠物，点击函数为

sub petOpenBtn_onClick()
Window.ExeCommand 40,12
end Sub

Sub petCloseBtn_onClick()
Window.ExeCommand 40,13
End Sub

将上面的代码加进vbs，你的宠物按钮就可以用了。
添加其它按钮也是这样，很简单吧？

说明，Window.ExeCommand n,m是QQ内部的一些命令，我收集整理了一部分，但一直没有得到详细的列表，如果那位在TX工作的，可以弄到全部的命令，别忘了告诉我哦

Window.ExeCommand

1,1 皮肤管理器
1,2 最小化
1,3 close

4,1 ChatRoom
4,2 发送手机短信
4,3 search
4,4 腾讯浏览器
4,5 Game
4,6 信息管理器
4,7 color
4,8 个人帐户
4,9 面板选择
4,10 Mail相关

50,1 显示信息
60,2 个人设置

7,1 Mail
15,1 host

除了onClick函数，还有onMouseMove、onMouseLeave等，这些函数的用处，金山词霸就能告诉你:p

然后翻到最下面，找到

Sub Window_OnNotify(code ,var)

这是接收到消息时皮肤上的一些反应，更改状态按钮，动态提示消息，全部在这里，认真看看就明白哦

到此为止，QQ原版皮肤自带的vbs函数基本上就分解完毕

下面说说我增添的函数

首先是头像切换函数

如果认真看了我上面讲的基础知识，这个函数的功能不说也清楚了吧，嘿嘿

vbs里，调用外部函数的代码是

    tmp="CQQCfg.exe"
    Set fso = CreateObject("Scripting.FileSystemObject")
    If (fso.FileExists(tmp)) Then
    Set objShell = CreateObject("Wscript.Shell")
    objShell.Run tmp
    else
    msgbox "咦，你安装的是珊瑚虫版吗？" & chr(10) & "我找不到CQQCfg.exe文件呢。",,"错误提示"
    end if 

 改变tmp的值，就可以调用任何外部函数了
注意：QQ自带的vbscript.dll文件不支持外部调用，要外部调用，必须用我皮肤包里那个破解的vbscript.dll文件覆盖原来的

灵活一点的，肯定会想到，也可以在QQ面板上放个记事本按钮，呵呵。你甚至可以把常用的软件的快捷方式都放在QQ皮肤上，把QQ打造成一个Dock软件，彻底改变QQ的用处，嘿嘿……

最后说一点的是，只要vbs里能用的，在QQ皮肤里都能用

曾和先锋的一位好友一致同意: QQ皮肤、Sam、Kon等都是有限的，但脚本却是无限的……

结合脚本，你可以在QQ上显示foobar的音乐信息，并控制foobar的播放，或者，远程操纵一台电脑……别笑，都是有可能的……音乐控制我曾实现过，远程控制老板的电脑就交给你了……

昨天写得匆忙，忘了一些东西，今天继续补充

六、ini文件

除了config.xml和vbscript.vbs文件，还有两个配置文件: Skin.ini和IMSkin.ini

Skin.ini文件定义了QQ主面板的一些基本参数，譬如底色和分隔线的颜色等等，皮肤作者等信息在这里也能找到

IMSkin.ini在IMSkin目录里，QQ的聊天窗口全靠它来定义的，也正因为聊天窗口是由ini文件来配置，而不是xml文件，所以对聊天窗口的大改动一般来说很难，基本框架都是腾讯搭好的，你想改也改不了，这是QQ逊于MIM最关键的一个地方

对IMSkin.ini，只说几处关键的地方:

一是这句 rightSpace = -35，这是大工具栏的右边距，有很多QQ皮肤的作者喜欢把大工具栏完全展开，据说这是QQ会员才能享受的特权，我也喜欢将大工具栏展开，修改办法是
rightSpace = -238
具体数值对不同的皮肤都不同，需要慢慢调，找到最佳值

和这个问题相关的是，珊瑚虫的一个配置，如下

注意红线部分。如果你发现聊天窗口的“窗口布局设置”按钮老有点怪异，就是因为上图红线部分设置的值太大，改小一点，譬如200，就没问题了

还有就是一些小技巧，譬如想隐藏某个按钮，你只要修改对应的ico为透明即可（真透明，不是紫色）

七、修改QQRes

一个典型的界面如下

用ResHacker打开需要修改的文件，找到想替换的部分，替换就可

最经常改的部分是Bitmap和Icon Group资源

一个小技巧: 

如上图，可以将所有Bitmap保存出来预览，然后利用保存时生成的rc文件即可快速定位自己想替换的资源，这样可以避免一个一个去找（最开始我就是一个一个去找的，为了替换一个资源，累死了……），其它资源也可以这样预览

如果某个位图在QQRes.dll里找不到，可以在其它的dll文件里找，譬如截图时出来的那个图片，QQ2005正式版里，就放在了CameraDll.dll文件里，而登陆窗口的资源则在LoginCtrl.dll里

修改QQRes靠的是耐心。记住这句话，就可以了

八、图像处理篇

这个最不好写，建议你学点ps基础知识，然后花两天琢磨iconworkshop，这样，基本就无敌了

好了，虽然挂一漏万，但教程还是要结束了。
可能枯燥了点，不过希望你看完这个教程后，能开始打造出自己的QQ
更希望，这个教程能引起你对脚本和PS的兴趣，那样我就功德无量了，呵呵

lifesinger（射雕） 2005年11月14日