2008年12月25日更新：增加在线歌曲的缓冲进度条皮肤元素。命名：progress_fill2.bmp
一、了解千千静听皮肤制作是怎么一回事？
1、如果您是位从未接触过皮肤制作的人，那么请先仔细看下面的这段话：
如何把设计好的皮肤效果图应用到千千静听软件上去，有两个主导思想您应该了解：一个是需要把效果图上面的控件（或称按钮）单独切出来，另一个是需要把上一点说的控件（或称按钮）的坐标到，为它精准定位，是不是听的有点眉目了，那么我们接着往下讲。
2、千千的皮肤位于安装目录下的Skin文件夹内，扩展名可以为.skn或.zip，实际上二者是一样的。对于前者，可以先将.skn的扩展名改为.zip(要在系统中显示文件的扩展名，依次点击"工具"－"文件夹选项"－"查看"，再把"隐藏已知文件类型的扩展名"前的小勾去除即可)，然后将其解压到单独的文件夹，进入该文件夹，可以发现里面包含了许多bmp格式的图片和若干个xml文件，他这些文件便是皮肤的组成部分了，bmp图片是各个窗口的背景及按钮图片，l则是配置文件，定义了皮肤的基本信息、窗口及按钮的位置、大小等，它是基于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
缓冲进度条填充背景图
该进度条在听在线歌曲发生缓冲时出现，如果没有该元素，默认方式是会将进度条的颜加深，作为缓冲条颜显示。
命名：progress_fill2.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

莲花l3gt 
三、播放列表窗口的控件
（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
 
坦克800多少钱
五、音乐窗窗口的控件

 
上图为千千音乐窗界面，其中用绿边框套住的部分为显示部分，和皮肤设计无关，就是说我们要做的是绿边框外的内容。
好，明确了制作部分，开始讲制作过程，首先，要制作一个窗口背景，就是图中显示的最外面的蓝风格的窗口，像主窗口一样，不难理解，格式同样为.bmp，需要设置透明背景（#FF00ff），注意圆角像素的处理。
然后制作窗口里的控件，上图中用红框标出了所有控件，包括后退、前进、刷新、关闭、多选框、连接文字区。其中后退、前进的功能是像网页一样的控制当前页面，并不是歌曲的后退、前进，不过也没影响，不多说了。
最后，还要制作一个按钮，用来打开音乐窗，按钮要做在主窗口上，做主窗口时别忘了留出地方哦...
具体切图示例如下，大家一看就会明白啦：

增加新的音乐窗和下载管理标签按钮很简单，只需在音乐窗代码块中加入如下2行代码：
<minibtn position="101,5,175,29" image="browser_mini.bmp" />
<downloadbtn position="176,5,250,29" image="browser_download.bmp"/>
browser_mini.bmp表示音乐窗按钮图片
browser_download.bmp即是下载管理按钮图片
按钮状态都是四种（初始、鼠标浮动、按下、不可点），位置坐标和其它的元素一样，很简单吧：）


（B）修改配置文件
一、首先看一下l这个配置文件
<skin version="2" name="静听•蔚蓝" author="千千静听" url="player" email="none" transparent_color="#ff00ff">
以上是皮肤的基本描述信息，请根据您自己的情况填写，分别是版本号，皮肤名称，皮肤作者，地址，，透明的设置
1、<player_window>和</player_window>之间的代码
它是描述主窗口的参数设置的
Position 是坐标定位，image是图片名称，就是我刚才讲述的每个图片的命名
坐标由4个数字组成，中间用逗号隔开，前两个数字是图片左上角的x坐标和y坐标，后两个数字是图片右下角的x坐标和y坐标,请注意，这里的右下角x坐标和y坐标都要多算一个点，否则播放器会少显示两条边；
这里需要注意的是：每个窗口的位置是组合窗口后抓的坐标，而每个窗口上面的按钮控件是单独定位的，比如，我们要获得歌词秀窗口上面的关闭按钮的坐标，是要把歌词秀窗口的左上角定位在切图软件（0，0）坐标上，然后再抓关闭按钮的坐标。
可以参考下图来理解代码
 石家庄二手货车

<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" />
长安睿骋cc<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是视觉效果的设置，这里面只是简单定义了位置，更详细的设置请看l文件
<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">