文档介绍：文中所用来示例的QQ Classic 皮肤在这里下载
一、工具
工欲善其事,必先利其器。有很多同类工具,我只说我用的
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的坐标为(, )
这张图很好懂吧,嘿嘿,考你一下,怎样确定一个按钮的位置?譬如,下面这张图里的最小化按钮的坐标应该怎样给?
假设这个按钮的名称是topBtnMin,那么答案是:
= cx - 53
= 6
53和6是具体算出来的,换了皮肤可能是其它值,但left值一定是cx - 53这种格式,53表示的是最小化按钮和面板最右边的距离。当你拉伸面板时,cx是一个变量,但最小化按钮始终是靠右的,因此它的x坐标需要设定为cx - 53。这里千万要想清楚,很简单的道理。好了,现在问你,下面的图又如何呢
答案:
状态选择按钮的坐标是left = 86, top = cy - 22
天气按钮的坐标是 left = 3, top = 22
数值具体皮肤都不同,形式则必然是上面的样子。做对了没?没做对的打ppemoticon
坐标没弄糊涂的,跟我继续-: emoticon
四、
打开QQ Classic ,如图
图上说得很明白了。如果有一款QQ皮肤拉不宽,那么只要将maxWidth的值改大一些就行。但请注意,如果是一款精心设计的皮肤,同时限定了最大宽度,那一定是有理由的,譬如,很可能拉得太大时会变形等。因此没必要时,不要修改这些值。
默认的透明色是紫色,这主要是因为QQ现在还不支持png,只支持bmp位图(动态皮肤里可以用gif,但支持得并不好),bmp没有透明色,因此把紫色部分显示为透明
好了,继续看下面的
这一部分是背景图,被切割成上中下三部分,每部分又被切割成左中右三部分
注释已经很明白了,我简单的说一下各项的含义
用<! …> 括起来的绿色部分是注释
<Picture …表示图片
id 是这个图片的唯一标志符
left、top是坐标
width、height是宽高,一般就是原图片的宽高,如果用QQ来缩放,效果很差
image是图像名
zindex是层叠数,越在上面的,zindex越大
其它的不多说,很少用到
除了Picture对象,最常用的还有Text和Button对象,属性都和上面的一样,类推即可
Text的例子:
看见“宁静以致远”了吗?修改之,这个问题就解决了
细心的肯定会发现还有“QQ Classic”字样,的确,这个也是可以修改的,譬如改成"****** QQ"
更细心的也许会很奇怪为什么都出现了两次?有了QQSkinName,还有QQSkinName2,这不是多余吗?
揭开秘密的办法是,你任意修改其中一个,保存,刷新皮肤,发现了什么?
这里的巧妙是,出现两次,但位置稍微错开,颜色也不同,当颜色搭配好时,就能出来阴影效果(如QQ Classic),或雕刻效果(“宁静以致远”),这是以前在玩Samurize时想到的,借用在QQ上,聪明的你是否立刻想到,这种文字效果也能很方便的在网页设计时用上呢?
好了,继续往下看,
这是侧栏和QQ好友面板,意思很明白,就不解释了
再下面是底边按钮组,然后是</window></theme>,整个文件就完了。
可以发现,最常用的对象就三个:Picture、Butto