千千静听皮肤制作

千千静听皮肤制作(2007-12-22 09:28:34)

标签：IT/科技千千静听

千千静听(以下简称"千千")从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格式的文件，可直接用系统自带的记事本或者其它文本编辑工具打开，打开后我们可以看到其基本构造：

...

...

...

...

...

仔细分析可发现每一行都是以"<"开头，最后以">"结尾，中间有若干项和参数，可以将它们分为两种类型，第一种结构形如：

像XXX这样的项称作元素，AAA、BBB这样的项称作属性，aaa、bbb则是属性的参数值。

在这里AAA、BBB都是XXX的属性，是用于修饰XXX的，比如position属性用于定义元素的

位置，image属性用于定义元素的位图等。

在这种类型中，和必须同时使用，形成一个闭合回路，就是说前面使用了开头，后面就一定要用来闭合，包含这中间的各项则都属于该元素。使用该类型的主要有主窗口(即player_window元素)、均衡器窗口(即equalizer_window元素)、歌词秀窗口(即lyric_window元素)、播放列表窗口(即playlist_window元素)以及迷你模式窗口(即mini_window元素)这5个基本的窗口，这5个窗口又全部包含在和之间。

第二种结构形如：

实际上这是一种缩写形式，即的缩写，它们是最基本的单位元素，分别被包含于各个基

本窗口中，用于比如各个按钮，拖动条等。

关于XML文件的格式，可以参照相关的文档，在这里要提一下的是，各元素及属性的顺序是不分先后的，空格的多少也没有关系，只要包含和被包含的位置及基本的格式别弄错了就可以(比如属性的参数值必须用英文双引号引上等)，但是为了便于阅读和编辑修改，最好严格按照标准格式来书写。下面我们来详细分析一下Skin.xml，第一行：

transparent_color="...">

这一行用于定义皮肤的基本属性和信息，其中version="2"指的是皮肤的版本号，不必更改，后面的name、author、url和email属性分别指的是该皮肤的名称、作者的名字、作者主页地址和作者电子邮件地址，这些信息会显示在千千选项的应用皮肤的窗口中；再后面的transparent_color是一个非常重要的属性，即"透明色"，定义了透明色之后，皮肤上有这个颜色的部分都会被显示为透明。因为bmp格式图片是不支持透明的，所以要做出不规则的背景窗口和按钮，就要通过透明色来实现，方法是把要显示为透明的部分用定义好的透明色填充即可。一个皮肤只能定义一个固定的透明色，并用颜色的RGB编码表示，比如纯紫色的RGB码为#FF00FF，RGB编码可以在Photoshop等工具中查看。(透明色应尽量选择皮肤色调相差较大的颜色，否则很容易与皮肤上的颜色重复，导致把必要的部分透明了，一般情况

下用纯紫色即可)

接下来就是5个基本窗口的配置，其中迷你模式窗口在后面会单独详细讲解。在Skin.xml中，首先要配置好的就是主窗口，歌词秀窗口，均衡器窗口，播放列表窗口这4个子窗口的相关设置，然后再分别配置各窗口上的按钮等。

二.属性参数介绍

下面是各窗口上元素的对应图及属性说明：

position：这是众元素中最基本的属性之一，用于定义窗口背景及按钮的位置及大小，参数值格式为"a, b ,c ,d"，这4个数值既固定了元素的位置也确定了其大小，其中(a, b)为左上角的坐标，(c, d)为右下角的坐标，c-a 就是长度，d-b 就是高度，坐标原点要分两种情况：如果是歌词秀、均衡器、播放列表这3个子窗口的position，则是把主窗口的左上角作为它们的坐标原点；如果是各窗口内部按钮的position，则是把对应的各窗口的左上角作为坐标原点，比如歌词秀窗口中的"关闭"按钮就是以歌词秀背景图片的左上角为原点，其它依此类推！

特别地：①播放列表中的scrollbar元素不需要定义position属性，它的位置会自动固定在playlist的最右边；

②主窗口中的progress、volume元素及均衡器窗口中的balance、surround、preamp元素的position属性表示的是滑块能够移动的范围的坐标；③播放列表衡器窗口中的playlist元素、歌词秀衡器窗口中的lyric元素的position 属性表示的是播放列表和歌词的显示范围，当播放列表窗口和歌词秀窗口改变大小时，这两个元素会自动跟着改变大小，但它们的四个边和窗口的四个边的距离就是通过这个position来体现的；

resize_rect：歌词秀和播放列表窗口特有的属性，用于定义这两个窗口可被拉伸的部分，其参数格式同position，代表的是当改变窗口大小时只有这个矩形框内的部分才会被拉长，在这个范围外的部分则不会变化，另外还有一个属性resize_tile是对应使用的，其参数值可以为0或1，其中0表示在改变窗口大小时采用拉伸的方式，1表示采用平铺的方式，该属性可省略不写，即使用默认值0；

此外，歌词秀和播放列表窗口还有一个可选择的元素：title，可在有特定需要时(比如在改变窗口大小时标题保持居中等)使用，格式如下：

前面3者的示意图如下：

image：用于定义该元素所使用的图片。一般地，按钮图片大部分都是由4个大小相同的图片并排组合在一起的，分别代表按钮的4种不同状态：按钮正常、鼠标经过按钮、鼠标按下按钮、按钮无效，下图就是播放按钮

的图片：

注：①如果按钮在这4种状态下都是一样的，同样需要将4张图片并排在一起才能正常显示；②存在于播放列表中的scroll元素内的scrollbar_button和scrollbar_button属性所对应的图片只有3种状态：按钮正常、鼠标经过按钮和鼠标按下按钮；

align：用于定义元素的对齐方式，参数值分两种情况：一种是存在于主窗口中的led、info、stereo、status 元素内，此时可以取值为left、center、right，代表这些文字的缩进方式；第二种是存在于歌词秀窗口中的title、close、ontop元素内，播放列表窗口的title、c lose、toolbar元素内，此时可以取值为left、center、right、top、bottom等，代表当调整窗口大小时元素位置相对于边框移动，如果要同时设置垂直对齐和水平对齐方式，可以用英文加号将二者连在一起，比如"top+left"表示在垂直方向上顶部对齐、在水平方向上左对齐；

thumb_image、fill_image、bar_image：存在于主窗口中的progress、volume元素和均衡器窗口的balance、surround、preamp、eqfactor元素内，分别用于定义滑块的图片、移动滑块时填充的图片和移动范围内的背景图片；

vertical：存在于主窗口中的progress、volume元素，参数值可以为true或false，其中取true时指滑块按垂直方向移动，取false时滑块按水平方向移动；

color、bkgnd、font、font_size：存在于主窗口中的info、stereo、status元素内，用于定义文字的颜色、背景色、字体和字体大小，如要显示透明文字则不需要指定背景色(bkgnd)；

thumb_resize_center：存在于播放列表窗口中的scrollbar元素内，用于定义scrollbar的thumb滑块中间可以进行平铺缩放的部分的大小，如果取值为0，则代表在改变播放列表窗口高度大小时滑块进行不缩放；

thumb_resize_tile：存在于播放列表窗口中的scrollbar元素内，作用与播放列表窗口和歌词秀窗口的resize_tile相同；

hot_image：存在于播放列表窗口中的toolbar元素内，用于定义播放列表工具栏中当鼠标经过时的图片形态。此属性可选择，如省略不写的话程序会自动生成鼠标经过时的按钮状态；

eq_interval：存在于均衡器窗口中的equalizer_window元素内，指eqfactor元素中10个波段的间隔大小(另：eqfactor元素的position属性表示的是10个滑块中第一个滑块的位置，而其它属性对于所有10个滑块都有效)；

icon：存在于主窗口中的icon元素内，用于自定义皮肤图标，必须将图标文件(*.ico，16*16)放于皮肤文件夹中并一起打包压缩。此属性可选择，如省略不写的话则使用默认的程序图标；

left_top_color、right_bottom_color：存在于歌词秀窗口中的mini_border元素内，用于定义在迷你模式下歌词秀窗口的左上边框和右下边框的颜色；

在这里重点介绍一下迷你模式窗口：

如上图，迷你模式其实是独立于主窗口外的另外一个皮肤，不过在迷你模式下省略了播放列表和均衡器窗口、简化了歌词秀窗口和主窗口。迷你窗口里的所有元素、属性及参数都是和主窗口一样的，它们都被包含于和中，相当于主窗口中的；

迷你模式就是为了减小屏幕大小占用及简化按钮，故迷你窗口各按钮也要相应调整缩小，并省略部分不常用的按钮，比如音量调节等，一般只保留下"播放/暂停"、"停止"、"后退"、"前进"、"静音"、"图标"、"视觉效果"等即可。另外，迷你模式下的歌词秀窗口的位置和长度是固定的，高度则是和迷你模式的背景图片高度相同。

三.打包压缩

当把所有图片都制作完成并配置好Skin.xml后还需做一件事情，那就是添加Lyric.xml、Playlist.xml、Visual.xml 等3个xml文件，它们分别是作为歌词秀、播放列表、视觉效果的配色方案及相关的设置，如果不加上这3个文件皮肤就按默认的配色来显示，所以建议给每个皮肤都加上合适的配色便于与整体配套，从而使得皮肤更为美观漂亮，另外，如果皮肤没有自带配色文件的话，从其它有配色的皮肤切换到该皮肤时，会把原先皮肤的配色也一起带过来，效果非常难看。

它们的参数和Skin.xml类似的，可以用记事本打开后进行配置，不过还有另外一种更为简洁高效的方法，那就是在"千千选项" 里配置好，然后分别在每个选项卡中点击"配置文件"－"保存到文件"，并分别保存为"Playlist.xml"、"Lyric.xml"、"Visual.xml"，再将它们复制到相同目录下的皮肤文件夹即可，如图：

最后就是将这些文件一起打包压缩制作成皮肤了，可以用WinRAR或WinZIP等压缩工具，以

WinRAR为例，先按键盘上的Ctrl＋A全选所有文件，然后将全部文件添加到压缩文件夹，

压缩文件格式选择"zip"，压缩方式可选择"最好"，再点击"确定"就行了！

到这里皮肤就已经全部制作完成了，将这个压缩文件复制到千千安装目录下的Skin文

件夹，然后在"千千选项..."－"皮肤"中就可以选择应用皮肤了，或直接在主面板上点击右

键－"选择皮肤"即可！

(全文完，感谢dafan的说明思路)

皮肤制作注意事项及技巧：

1.压缩皮肤文件时，不是压缩整个文件夹，而是应该进入文件夹后按Ctrl＋A全选所有文件，

然后再添加到压缩文件(zip格式)，否则皮肤无效；

2.播放列表和歌词秀窗口的position属性定义了这两个窗口初始化时的大小，这个大小可以不是图片的实际大小。这两个窗口在初始化时就会按照resize_rect的规则拉伸窗口至所设置的大小。此外，这两个窗口最大可以拉伸到与屏幕同样大小，但最小只能缩小到与原始图片同样的大小，所以原始图片应该尽量画得小一些，这样可以方便用户把窗口缩成最小，同时还可以稍微减少图片及皮肤大小；

注：这个时候窗口上的按钮的position属性是按图片的实际大小来确定坐标的；

3.bmp图片(尤其是几个面积较大的窗口背景图片)应尽量转换为8位的索引颜色，这样可以极大地减少图片及皮肤的大小，同时在应用皮肤时可以减少内存占用率。

具体的方法为：在Adobe Photoshop中，打开RGB模式的图片，然后点击"图像"－"模式"－"索引颜色"，再保存即可！注：如果有透明色时要注意两点：①在填充透明色时，一定不要选"容差"；②转换时一定要选中"保留原实际颜色"，以防止填充的透明色被改掉。

4.当按钮很小的时候，不要将其透明，而是和背景图片连在一起！因为我们知道，皮肤中透明的部分是不感应鼠标动作的，因此当按钮比较小的时候如果中间有很小的缝隙，鼠标移动到上面时就会乱跳或者很难准确定位，不便于点击操作！正确的做法是别把对应位置的背景图片连在一起作为按钮；

5.千千现在可以支持包括.zip和.skn在内的两种皮肤格式，但是如果你的皮肤做好后要发布在网上时，建议把扩展名改为.skn，然后再压缩为rar文件(因为一般论坛不支持.skn文件格式上传)。这样别人下载后解压就可以得到有正确皮肤文件名的skn格式皮肤(这个只是为了方便管理，程序是从Skin.xml中读取皮肤文件名的，而和皮肤文件本身的文件名没有关系)；另外，这样还可以防止别人误将zip文件解压而不能正确使用皮肤的情况；

6.在制作皮肤时不一定要在全部图片都制作完成并配置好Skin.xml后才去看最终的效果，而是可以在制作到一半左右时就多预览几次，如果发现有不对的地方赶紧回来修改，这样有

利于节省时间和提高效率；

7.如果要独立设计一款完整的皮肤，恐怕需要一定的设计水平和花费不少的时间，其实还有一种更为快速有效的皮肤制作方法，那就是从其它现成的播放器皮肤移植到千千上来，比如Winamp(后缀名一般为.wal)、Windows Media Player(后缀名为一般为.wmz)等，将它们的后缀名改为zip后解压就可以得到其按钮素材，然后再用这些已经做好的按钮来做千千的皮肤就方便许多了！

8.花一个月的时间做10个皮肤不如花半个月时间用心做好一个皮肤！现在千千不缺皮肤，缺的是精品的皮肤，因此建议大家想做皮肤的话要抱着"做了就要做最好"的决心去做，追求完美地，尽量把一个皮肤完善！无论是自己原创制作，还是从winamp、WMP皮肤文件改造，都应该把皮肤做完整，包括按钮要有四种不同的鼠标感应状态、要有迷你模式、要有配色文件等；

9.如果不想在主窗口或迷你模式中显示图标，可以将图标的position设置为超过窗口大小，比如"500, 500, 516, 516"；如果想让歌词秀或播放列表固定大小而不能拉伸，可以

resize_rect的矩形范围任意一边大小设置为0即可，比如"100, 20, 100, 30"；

10.在主窗口中的led元素(即播放时间)有两种显示方式，一种是已播放的时间，一种是未播放的时间，鼠标点击即可在两种显示方式之间切换。后者比前者多了一个负号，因此在主窗口上应至少给led留出6位的空间，以防止在显示剩余时间时数字覆盖到面板上的其它部分而影响美观；led元素使用的图片必须是12张同样大小的图片排在一起，分别代表0-9十个数字、冒号和减号(可以使用透明色)；

11.如果不想显示某个窗口或者各窗口上的某些元素，把相应的元素代码全部删除即可；