TT皮肤制作Word格式文档下载.docx
《TT皮肤制作Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《TT皮肤制作Word格式文档下载.docx(10页珍藏版)》请在冰点文库上搜索。
bmp图片是各个窗口的背景及按钮图片,Skin.xml则是配置文件,定义了皮肤的基本信息、窗口及按钮的位置、大小等,它是基于XML格式的文件,可直接用系统自带的记事本或者其它文本编辑工具打开,打开后我们可以看到其基本构造:
<
skinversion="
2"
name="
..."
author="
url="
email="
transparent_color="
>
player_windowimage="
...
/player_window>
mini_windowimage="
/mini_window>
lyric_windowposition="
resize_rect="
image="
/lyric_window>
equalizer_windowposition="
…"
eq_interval="
/equalizer_window>
playlist_windowposition="
/playlist_window>
/skin>
仔细分析可发现每一行都是以"
"
开头,最后以"
结尾,中间有若干项和参数,可以将它们分为两种类型,第一种结构形如:
XXXAAA="
aaa"
BBB="
bbb"
/XXX>
像XXX这样的项称作元素,AAA、BBB这样的项称作属性,aaa、bbb则是属性的参数值。
在这里AAA、BBB都是XXX的属性,是用于修饰XXX的,比如position属性用于定义元素的位置,image属性用于定义元素的位图等。
在这种类型中,<
XXX>
和<
必须同时使用,形成一个闭合回路,就是说前面使用了<
开头,后面就一定要用<
来闭合,包含这中间的各项则都属于该元素。
使用该类型的主要有主窗口(即player_window元素)、均衡器窗口(即equalizer_window元素)、歌词秀窗口(即lyric_window元素)、播放列表窗口(即playlist_window元素)以及迷你模式窗口(即mini_window元素)这5个基本的窗口,这5个窗口又全部包含在<
skin>
之间。
第二种结构形如:
YYYCCC="
ccc"
DDD="
ddd"
/>
实际上这是一种缩写形式,即<
YYY>
的缩写,它们是最基本的单位元素,分别被包含于各个基本窗口中,用于比如各个按钮,拖动条等。
关于XML文件的格式,可以参照相关的文档,在这里要提一下的是,各元素及属性的顺序是不分先后的,空格的多少也没有关系,只要包含和被包含的位置及基本的格式别弄错了就可以(比如属性的参数值必须用英文双引号引上等),但是为了便于阅读和编辑修改,最好严格按照标准格式来书写。
下面我们来详细分析一下Skin.xml,第一行:
这一行用于定义皮肤的基本属性和信息,其中version="
指的是皮肤的版本号,不必更改,后面的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,可在有特定需要时(比如在改变窗口大小时标题保持居中等)使用,格式如下:
titleposition="
align="
/>
前面3者的示意图如下:
image:
用于定义该元素所使用的图片。
一般地,按钮图片大部分都是由4个大小相同的图片并排组合在一起的,分别代表按钮的4种不同状态:
按钮正常、鼠标经过按钮、鼠标按下按钮、按钮无效,下图就是播放按钮的图片:
注:
①如果按钮在这4种状态下都是一样的,同样需要将4张图片并排在一起才能正常显示;
②存在于播放列表中的scroll元素内的scrollbar_button和scrollbar_button属性所对应的图片只有3种状态:
按钮正常、鼠标经过按钮和鼠标按下按钮;
align:
用于定义元素的对齐方式,参数值分两种情况:
一种是存在于主窗口中的led、info、stereo、status元素内,此时可以取值为left、center、right,代表这些文字的缩进方式;
第二种是存在于歌词秀窗口中的title、close、ontop元素内,播放列表窗口的title、close、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元素内,用于定义在迷你模式下歌词秀窗口的左上边框和右下边框的颜色;
在这里重点介绍一下迷你模式窗口:
如上图,迷你模式其实是独立于主窗口外的另外一个皮肤,不过在迷你模式下省略了播放列表和均衡器窗口、简化了歌词秀窗口和主窗口。
迷你窗口里的所有元素、属性及参数都是和主窗口一样的,它们都被包含于<
mini_window>
中,相当于主窗口中的<
player_window>
<
;
迷你模式就是为了减小屏幕大小占用及简化按钮,故迷你窗口各按钮也要相应调整缩小,并省略部分不常用的按钮,比如音量调节等,一般只保留下"
播放/暂停"
、"
停止"
后退"
前进"
静音"
图标"
视觉效果"
等即可。
另外,
迷你模式下的歌词秀窗口的位置和长度是固定的,高度则是和迷你模式的背景图片高度相同。
三.打包压缩
当把所有图片都制作完成并配置好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文件夹,然后在"
千千选项..."
皮肤"
中就可以选择应用皮肤了,或直接在主面板上点击右键-"
选择皮肤"
即可!