如何制作千千静听个性皮肤
一、了解千千静听皮肤制作是怎么一回事？
1、如果您是位从未接触过皮肤制作的人，那么请先仔细看下面的这段话：
如何把设计好的皮肤效果图应用到千千静听软件上去，有两个主导思想您应该了解：一个是需要把效果图上面的控件（或称按钮）单独切出来，另一个是需要把上一点说的控件（或称按钮）的坐标找到，为它精准定位，是不是听的有点眉目了，那么我们接着往下讲。
2、千千的皮肤位于安装目录下的Skin文件夹内，扩展名可以为.skn或.zip，实际上二者是一样的。对于前者，可以先将.skn的扩展名改为.zip(要在系统中显示文件的扩展名，依次点击"工具"－"文件夹选项"－"查看"，再把"隐藏已知文件类型的扩展名"前的小勾去除即可)，然后将其解压到单独的文件夹，进入该文件夹，可以发现里面包含了许多bmp格式的图片和若干个xml文件，他这些文件便是皮肤的组成部分了，bmp图片是各个窗口的背景及按钮图片，Skin.xml则是配置文件，定义了皮肤的基本信息、窗口及按钮的位置、大小等，它是基于XML格式的文件，可直接用系统自带的记事本或者其它文本编辑工具打开的。
好，了解以上的基础知识后，我们就开始学习实际的制作过程。
二、开始制作啦！
按照四个步骤进行：（A）切图（B）修改配置文件（C）打包成皮肤文件（D）应用皮肤
（A）切图：
用PS或FW打开设计效果图，整体观察一下，下面讲一下哪些图片是要单独切出来的以及图片的命名。
一、主窗口的控件
（1）主窗口背景 命名：player_skin.bmp
重点：边缘小圆角的镂空处理，把镂空填充成（#ff00ff）这个颜色，要细心处理这部分哦，边缘要1像素1像素的填充（如上图，镂空部分的颜色处理）
（2）最小化按钮（4个状态）
命名：minimize.bmp
重点：凡是功能按钮都要做4种状态，并把这四种状态做在一张图里，存储成.BMP格式，注意每种状态按钮他的宽度和高度要一致，说一下每种状态代表的含义
第一个状态：自然状态
第二个状态：鼠标划过时的状态
第三个状态：鼠标按下去时的状态
第四个状态：按钮失效时的状态（举个例子，比如播放列表只有一首歌曲，那么“下一首”按钮就是无法点击的，那么此时这个按钮状态就是失效时的状态）
3）迷你模式按钮
命名：minimode.bmp
同上，这里不再赘述了。
（4）关闭按钮
命名：close.bmp
（5）播放进度滑块（本例中播放进度条上的小圆按钮）
命名：progress_thumb.bmp
重点：这个小按钮是需要脱离背景部分单独扣出来的，那么镂空部分需要如何处理才能最终在界面上显示出透明的效果呢，解决的办法和上面的大背景镂空处理一样就是把镂空填充成（#ff00ff）这个颜色，如上图。
（6）播放进度填充背景图
命名：progress_fill.bmp
（7）播放列表窗口打开关闭按钮
命名：playlist.bmp
（8）均衡器窗口打开关闭按钮
命名：equalizer.bmp
（9）歌词窗口打开关闭按钮
命名：lyric.bmp
（10）“上一首”按钮
命名：prev.bmp
（11）“播放”按钮
命名：play.bmp
（12）“暂停”按钮
命名：pause.bmp
(13)“下一首”按钮
命名：next.bmp
(14)“打开播放文件”按钮
命名：open.bmp
(15)音量小喇叭按钮
命名：mute.bmp
(16)音量进度背景填充图
命名：progress2.bmp
(17)音量滑块
同（5）
二、均衡器窗口的控件
（18）开启按钮
命名：eq_enabled.bmp
（19）重设按钮
命名：reset.bmp
（20）配置按钮
命名：eq_profile.bmp
（21）关闭按钮，切图同主窗口上的关闭按钮
（22）平衡器环绕声所有滑动的小按钮 同（5）
（23）平衡，环绕填充背景
命名：eqfactor_full2.bmp
（24）均衡填充背景
命名：eqfactor_full.bmp
三、播放列表窗口的控件
（25）关闭按钮，同主窗口关闭按钮
（26）工具条按钮，
命名：playlist_toolbar.bmp
热点状态命名：playlist_toolbar_hot.bmp
（27）滚动条上下按钮
命名：scrollbar_button.bmp
重点：将上下按钮拼在一张图上制作
（28）滚动条滑动按钮
命名：scrollbar_thumb.bmp
（29）滚动条背景
命名：scrollbar_bar.bmp
四、歌词秀窗口的控件
（30）关闭按钮，同主窗口
（31）总在最前按钮
命名：ontop.bmp
五、音乐窗窗口的控件
上图为千千音乐窗界面，其中用绿色边框套住的部分为显示部分，和皮肤设计无关，就是说我们要做的是绿色边框外的内容。
好，明确了制作部分，开始讲制作过程，首先，要制作一个窗口背景，就是图中显示的最外面的蓝色风格的窗口，像主窗口一样，不难理解，格式同样为.bmp，需要设置透明色背景（#FF00ff），注意圆角像素的处理。
然后制作窗口里的控件，上图中用红色框标出了所有控件，包括后退、前进、刷新、关闭、多选框、连接文字区。其中后退、前进的功能是像网页一样的控制当前页面，并不是歌曲的后退、前进，不过也没影响，不多说了。
最后，还要制作一个按钮，用来打开音乐窗，按钮要做在主窗口上，做主窗口时别忘了留出地方哦...
具体切图示例如下，大家一看就会明白啦：
（B）修改配置文件
一、首先看一下skin.xml这个配置文件
skin version="2" name="静听蔚蓝" author="千千静听" url="" email="none" transparent_color="#ff00ff"
可以参考下图来理解代码
player_window image="player_skin.bmp"
play position="50, 123, 90, 163" image="play.bmp"/
pause position="50, 123, 90, 163" image="pause.bmp"/
prev position="9, 123, 49, 163" image="prev.bmp"/
next position="132, 123, 172, 163" image="next.bmp"/
stop position="91, 123, 131, 163" image="stop.bmp"/
mute position="183, 137, 194, 148" image="mute.bmp" /
lyric position="248, 112, 272, 126" image="lyric.bmp"/
equalizer position="223, 112, 242, 126" image="equalizer.bmp"/
playlist position="197, 112, 216, 126" image="playlist.bmp"/
browser position="214, 86, 276, 106" image="browser.bmp" /
minimize position="230, 3, 247, 21" image="minimize.bmp"/
minimode position="248, 3, 265, 21" image="minimode.bmp"/
exit position="266, 3, 283, 21" image="close.bmp"/
progress position="7, 112, 184, 123" bar_image="" thumb_image="progress_thumb.bmp" fill_image="progress_fill.bmp"/
volume position="197, 136, 277, 147" vertical="false" bar_image="" thumb_image="progress_thumb.bmp" fill_image="progress2.bmp"/
以下文字是播放器上面的一些显示文字的设置
Icon是千千静听的logo；
info是音乐标题和专辑歌手的信息，轮显在播放器窗口上；
led是时间数字，这里不是文字代码，是做好了一张图片，这张图片由大小相等的12个字符组成， 0 1 2 3 4 5 6 7 8 9 : -
记住这12个字符缺一不可。
Stereo 是立体声的字体设置
Status是状态的字体设置
Visual是视觉效果的设置，这里面只是简单定义了位置，更详细的设置请看Visual.xml文件
icon position="4, 3, 20, 19" image="TTPlayer.ico"/
info position="21, 34, 208, 49" color="#ffffff" font="Tahoma" font_size="13" align="left"/
led position="160, 37, 270, 49" image="number.bmp" align="right"/
stereo position="224, 54, 273, 70" color="#ffffff" font="Tahoma" font_size="13" align="right" /
status position="200, 70, 273, 86" color="#ffffff" font="Tahoma" font_size="13" align="right" /
visual position="17, 56, 185, 106"/
/player_window
2、歌词秀窗口的代码
参考如下图一起看
lyric_window position="0, 393, 287, 475" resize_rect="49, 25, 245, 73" image="lyric_skin.bmp"
lyric position="10, 25, 277, 73"/
close position="221, 3, 283, 20" image="close.bmp" align="right"/
ontop position="202, 3, 264, 20" image="ontop.bmp" align="right"/
/lyric_window
3、均衡器窗口的代码
equalizer_window position="0, 165, 287, 279" image="eq_skin.bmp" eq_interval="5"
close position="266, 3, 283, 20" image="close.bmp" align="right"/
enabled position="152, 3, 187, 21" image="eq_enabled.bmp"/
profile position="224, 3, 259, 21" image="eq_profile.bmp"/
reset position="188, 3, 223, 21" image="reset.bmp"/
balance position="15, 45, 71, 56" thumb_image="progress_thumb.bmp" bar_image="" fill_image="eqfactor_full2.bmp"/
surround position="15, 76, 71, 87" thumb_image="progress_thumb.bmp" bar_image="" fill_image="eqfactor_full2.bmp"/
preamp position="81, 36, 92, 99" thumb_image="progress_thumb.bmp" bar_image="" fill_image="eqfactor_full.bmp"/
eqfactor position="115, 36, 126, 98" thumb_image="progress_thumb.bmp" bar_image="" fill_image="eqfactor_full.bmp"/
/equalizer_window
4、播放列表窗口的代码
playlist_window position="0, 279, 287, 393" resize_rect="61, 43, 265, 105" image="playlist_skin.bmp"
close position="221, 2, 283, 19" image="close.bmp" align="right"/
toolbar position="10, 24, 278, 41" image="playlist_toolbar.bmp" hot_image="playlist_toolbar_hot.bmp" align="left"/
scrollbar buttons_image="scrollbar_button.bmp" thumb_image="scrollbar_thumb.bmp" bar_image="scrollbar_bar.bmp" align="center"/
playlist position="10, 43, 278, 105" selected_image="playlist_selected.bmp"/
/playlist_window
1、 迷你窗口的代码
mini_window image="mini-player.bmp"
play position="177, 3, 271, 27" image="play_mini.bmp" /
pause position="177, 3, 271, 27" image="pause_mini.bmp" /
prev position="153, 3, 247, 27" image="prev_mini.bmp" /
next position="224, 3, 318, 27" image="next_mini.bmp" /
stop position="201, 3, 295, 27" image="stop_mini.bmp" /
lyric position="269, 17, 379, 27" image="lyric_mini.bmp" /
minimode position="272, 3, 335, 20" image="minimode.bmp" /
minimize position="255, 3, 317, 20" image="minimize.bmp" /
exit position="289, 3, 351, 20" image="close.bmp" /
icon position="3, 6, 19, 22" image="TTPlayer.ico"/
info position="27, 7, 142, 22" color="#ffffff" font="Tahoma" font_size="13" align="left"/
/mini_window
2、 音乐窗的代码（代码后面//部分为注释）
browser_window position="540, 0, 810, 336" image="browser_skin.bmp" transparent_color="#ff00ff"
close position="452, 3, 469, 19" image="close.bmp" / //关闭按钮位置
backward position="112, 3, 133, 19" image="browser_backward.bmp" / //后退按钮位置
forward position="148, 3, 169, 19" image="browser_forward.bmp" / //前进按钮位置
refresh position="186, 2, 207, 18" image="browser_refresh.bmp" / //刷新按钮位置
startup position="7, 458, 144, 473" ckbox_image="browser_startup.bmp" interval=4 color="#ffffff" font="SimSun" font_size="12" / //多选框的位置，注意X坐标要包括后面的文字，interval的值为多选框和文字之间的距离
linktxt position="280, 457, 464, 472" color="#ffffff" font="SimSun" font_size="12" / //连接文字区域，建议多留一些，以显示更多的文字内容
browser position="9, 26, 464, 447" / //html网页位置，和“歌词秀”中的歌词显示范围性质一样
/browser_window
二、下面看一下Lyric.xml这个配置文件
以下是歌词文字的设置，分别定义了字体类型，字体颜色，高亮颜色和背景颜色
ttplayer_lyric
Lyric
Font="-11,0,0,0,400,0,0,0,134,3,2,4,49,Tahoma"
TextColor="#008CC1"
HilightColor="#005489"
BkgndColor="#F4FBFE" /
/ttplayer_lyric
三、下面看一下Playlist.xml这个配置文件
这个是播放列表窗口的文字设置，分别定义了字体类型，字体颜色，高亮颜色，第一背景颜色，数字颜色，时间颜色，当前选择颜色，第二背景颜色（可以和第一背景颜色一致）
ttplayer_playlist
PlayList
Font="-11,0,0,0,400,0,0,0,134,3,2,4,49,Tahoma"
Color_Text="#008CC1"
Color_Hilight="#005489"
Color_Bkgnd="#EAF5FA"
Color_Number="#005489"
Color_Duration="#005489"
Color_Select="#84CEF9"
Color_Bkgnd2="#EAF5FA"
/
/ttplayer_playlist
四、下面看一下Visual.xml这个配置文件
这个是用来设置视觉显示的效果，我们先给大家介绍一下千千静听都提供哪几种视觉效果：
1、 频谱分析
2、 梦幻星空
3、 视波显示
4、 专辑封面
5、 不显示视频效果
这5种情况只要在播放器主窗口上面点击鼠标右键即可切换
如图：
下面的配置文件是用来设置各种视觉效果颜色的，大家可以试试看，调出你喜欢的效果来
ttplayer_visual
Visual
SpectrumTopColor="#FFFFFF"
SpectrumBtmColor="#07F7FF"
SpectrumMidColor="#8CDCFF"
SpectrumPeakColor="#FFFFFF"
SpectrumWide="1"
BlurSpeed="3"
Blur="1"
BlurScopeColor="#07F7FF"
TextColor="#FFFFFF"
Font="-11,0,0,0,400,0,0,0,134,3,2,4,49,Tahoma"
/
/ttplayer_visual
(C)打包成皮肤文件
好了，以上就是皮肤制作的整个过程啦，把上面的切图和配置文件制作好后，就可以打包成皮肤文件了，可以用WinRAR或WinZIP等压缩工具，以 WinRAR为例，先按键盘上的Ctrl＋A全选所有文件，然后将全部文件添加到压缩文件夹，压缩文件格式选择"zip"，压缩方式可选择"最好"，再点击"确定"就行了！
（D）应用皮肤
将这个压缩文件复制到千千安装目录下的Skin文件夹，然后在"千千选项..."－"皮肤"中就可以选择应用皮肤了，或直接在主面板上点击右键－"选择皮肤"即可！
或许您已经了解皮肤的制作方法了，为了更深入的理解，我们增加以下部分的内容帮助您消化：
三、几个重要的属性解释
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，可在有特定需要时(比如在改变窗口大小时标题保持居中等)使用，格式如下：
title