千千静听(以下简称"千千")从2.0版开始就支持换肤功能,现在已经有不少皮肤可以和Winamp相媲美了,不过由于千千暂时不支持png图片格式及脚本,因而效果是无法和Winamp的现代皮肤或Windows Media Player的皮肤相比的。但千千的皮肤制作起来却要简单许多,不需要任何编程知识和复杂的技术,只要掌握基本的图像编辑操作(Photoshop)和有足够的耐心(Patient)就可以做出漂亮的皮肤出来,看完下面这个教程相信你也可以为千千设计一款个性十足的精美皮肤!
一.皮肤构造
千千的皮肤位于安装目录下的Skin文件夹内,扩展名可以为.skn或.zip,实际上二者是一样的,都是zip格式的压缩文件。对于前者,可以先将.skn的扩展名改为.zip(要在系统中显示文件的扩展名,依次点击"工具"-"文件夹选项"-"查看",再把"隐藏已知文件类型的扩展名"前的小勾去除即可),然后将其解压到单独的文件夹,进入该文件夹,可以发现里面包含了许多bmp格式的图片和若干个xml文件,其中最重要的是Skin.xml这个xml文件,其它几个xml文件的作用在后面会提到。
bmp图片是各个窗口的背景及按钮图片,Skin.xml则是配置文件,定义了皮肤的基本信息、窗口及按钮的位置、大小等,它是基于XML格式的文件,可直接用系统自带的记事本或者其它文本编辑工具打开,打开后我们可以看到其基本构造:
<skin version="2" name="..." author="..." url="..." email="..." transparent_color="...">
<player_window image="...">
...
</player_window>
<mini_window image="...">
...
</mini_window>
<lyric_window position="..." resize_rect="..." image="...">
...
</lyric_window>
<equalizer_window position="..." image="…" eq_interval="...">
...
</equalizer_window>
<playlist_window position="..." resize_rect="..." image="...">
...
</playlist_window>
</skin>
仔细分析可发现每一行都是以"<"开头,最后以">"结尾,中间有若干项和参数,可以将它们分为两种类型,第一种结构形如:<XXX AAA="aaa" BBB="bbb"></XXX>
像XXX这样的项称作元素,AAA、BBB这样的项称作属性,aaa、bbb则是属性的参数值。在这里AAA、BBB都是XXX的属性,是用于修饰XXX的,比如position属性用于定义元素的位置,image属性用于定义元素的位图等。
在这种类型中,<XXX>和</XXX>必须同时使用,形成一个闭合回路,就是说前面使用了<XXX>开头,后面就一定要用</XXX>来闭合,包含这中间的各项则都属于该元素。使用该类型的主要有主窗口(即player_window元素)、均衡器窗口(即equalizer_window元素)、歌词秀窗口(即lyric_window元素)、播放列表窗口(即playlist_window元素)以及迷你模式窗口(即mini_window元素)这5个基本的窗口,这5个窗口又全部包含在<skin>和</skin>之间。
第二种结构形如:<YYY CCC="ccc" DDD="ddd"/>
实际上这是一种缩写形式,即<YYY CCC="ccc" DDD="ddd"><YYY>的缩写,它们是最基本的单位元素,分别被包含于各个基本窗口中,用于比如各个按钮,拖动条等。
关于XML文件的格式,可以参照相关的文档,在这里要提一下的是,各元素及属性的顺序是不分先后的,空格的多少也没有关系,只要包含和被包含的位置及基本的格式别弄错了就可以(比如属性的参数值必须用英文双引号引上等),但是为了便于阅读和编辑修改,最好严格按照标准格式来书写。下面我们来详细分析一下Skin.xml,第一行:
<skin version="2" name="..." author="..." url="..." email="..." transparent_color="...">
这一行用于定义皮肤的基本属性和信息,其中version="2"指的是皮肤的版本号,不必更改,后面的name、author、url和email属性分别指的是该皮肤的名称、作者的名字、作者主页地址和作者电子邮件地址,这些信息会显示在千千选项的应用皮肤的窗口中;再后面的transparent_color是一个非常重要的属性,即"透明色",定义了透明色之后,皮肤上有这个颜色的部分都会被显示为透明。因为bmp格式图片是不支持透明的,所以要做出不规则的背景窗口和按钮,就要通过透明色来实现,方法是把要显示为透明的部分用定义好的透明色填充即可。一个皮肤只能定义一个固定的透明色,并用颜色的RGB编码表示,比如纯紫色的RGB码为#FF00FF,RGB编码可以在Photoshop等工具中查看。(透明色应尽量选择皮肤色调相差较大的颜色,否则很容易与皮肤上的颜色重复,导致把必要的部分透明了,一般情况下用纯紫色即可)
接下来就是5个基本窗口的配置,其中迷你模式窗口在后面会单独详细讲解。在Skin.xml中,首先要配置好的就是主窗口,歌词秀窗口,均衡器窗口,播放列表窗口这4个子窗口的相关设置,然后再分别配置各窗口上的按钮等。
一.皮肤构造
千千的皮肤位于安装目录下的Skin文件夹内,扩展名可以为.skn或.zip,实际上二者是一样的,都是zip格式的压缩文件。对于前者,可以先将.skn的扩展名改为.zip(要在系统中显示文件的扩展名,依次点击"工具"-"文件夹选项"-"查看",再把"隐藏已知文件类型的扩展名"前的小勾去除即可),然后将其解压到单独的文件夹,进入该文件夹,可以发现里面包含了许多bmp格式的图片和若干个xml文件,其中最重要的是Skin.xml这个xml文件,其它几个xml文件的作用在后面会提到。
bmp图片是各个窗口的背景及按钮图片,Skin.xml则是配置文件,定义了皮肤的基本信息、窗口及按钮的位置、大小等,它是基于XML格式的文件,可直接用系统自带的记事本或者其它文本编辑工具打开,打开后我们可以看到其基本构造:
<skin version="2" name="..." author="..." url="..." email="..." transparent_color="...">
<player_window image="...">
...
</player_window>
<mini_window image="...">
...
</mini_window>
<lyric_window position="..." resize_rect="..." image="...">
...
</lyric_window>
<equalizer_window position="..." image="…" eq_interval="...">
...
</equalizer_window>
<playlist_window position="..." resize_rect="..." image="...">
...
</playlist_window>
</skin>
仔细分析可发现每一行都是以"<"开头,最后以">"结尾,中间有若干项和参数,可以将它们分为两种类型,第一种结构形如:<XXX AAA="aaa" BBB="bbb"></XXX>
像XXX这样的项称作元素,AAA、BBB这样的项称作属性,aaa、bbb则是属性的参数值。在这里AAA、BBB都是XXX的属性,是用于修饰XXX的,比如position属性用于定义元素的位置,image属性用于定义元素的位图等。
在这种类型中,<XXX>和</XXX>必须同时使用,形成一个闭合回路,就是说前面使用了<XXX>开头,后面就一定要用</XXX>来闭合,包含这中间的各项则都属于该元素。使用该类型的主要有主窗口(即player_window元素)、均衡器窗口(即equalizer_window元素)、歌词秀窗口(即lyric_window元素)、播放列表窗口(即playlist_window元素)以及迷你模式窗口(即mini_window元素)这5个基本的窗口,这5个窗口又全部包含在<skin>和</skin>之间。
第二种结构形如:<YYY CCC="ccc" DDD="ddd"/>
实际上这是一种缩写形式,即<YYY CCC="ccc" DDD="ddd"><YYY>的缩写,它们是最基本的单位元素,分别被包含于各个基本窗口中,用于比如各个按钮,拖动条等。
关于XML文件的格式,可以参照相关的文档,在这里要提一下的是,各元素及属性的顺序是不分先后的,空格的多少也没有关系,只要包含和被包含的位置及基本的格式别弄错了就可以(比如属性的参数值必须用英文双引号引上等),但是为了便于阅读和编辑修改,最好严格按照标准格式来书写。下面我们来详细分析一下Skin.xml,第一行:
<skin version="2" name="..." author="..." url="..." email="..." transparent_color="...">
这一行用于定义皮肤的基本属性和信息,其中version="2"指的是皮肤的版本号,不必更改,后面的name、author、url和email属性分别指的是该皮肤的名称、作者的名字、作者主页地址和作者电子邮件地址,这些信息会显示在千千选项的应用皮肤的窗口中;再后面的transparent_color是一个非常重要的属性,即"透明色",定义了透明色之后,皮肤上有这个颜色的部分都会被显示为透明。因为bmp格式图片是不支持透明的,所以要做出不规则的背景窗口和按钮,就要通过透明色来实现,方法是把要显示为透明的部分用定义好的透明色填充即可。一个皮肤只能定义一个固定的透明色,并用颜色的RGB编码表示,比如纯紫色的RGB码为#FF00FF,RGB编码可以在Photoshop等工具中查看。(透明色应尽量选择皮肤色调相差较大的颜色,否则很容易与皮肤上的颜色重复,导致把必要的部分透明了,一般情况下用纯紫色即可)
接下来就是5个基本窗口的配置,其中迷你模式窗口在后面会单独详细讲解。在Skin.xml中,首先要配置好的就是主窗口,歌词秀窗口,均衡器窗口,播放列表窗口这4个子窗口的相关设置,然后再分别配置各窗口上的按钮等。