千千靜聽皮膚制作全教程

1、千千靜聽皮膚制作全教程千千靜聽(以下簡稱千千)從2.0版開始就支持換膚功能，現(xiàn)在已經(jīng)有不少皮膚可以和 Winamp相媲美了，不過由于千千暫時(shí)不支持png圖片格式及腳本，因而效果是無法和 Winamp的現(xiàn)代皮膚或Windows Media Player的皮膚相比的。但千千的皮膚制作起來卻要 簡單許多，不需要任何編程知識(shí)和復(fù)雜的技術(shù)，只要掌握基本的圖像編輯操作(Photoshop) 和有足夠的耐心(Patient)就可以做出漂亮的皮膚出來，看完下面這個(gè)教程相信你也可以為千 千設(shè)計(jì)一款個(gè)性十足的精美皮膚！皮膚構(gòu)造千千的皮膚位于安裝目錄下的Skin文件夾內(nèi)，擴(kuò)展名可以為.skn或.zip，實(shí)際上二者

2、是一樣的，都是zip格式的壓縮文件。對于前者，可以先將skn的擴(kuò)展名改為.zip(要在系統(tǒng) 中顯示文件的擴(kuò)展名，依次點(diǎn)擊工具一文件夾選項(xiàng)一查看，再把隱藏已知文件類型的 擴(kuò)展名前的小勾去除即可)，然后將其解壓到單獨(dú)的文件夾，進(jìn)入該文件夾，可以發(fā)現(xiàn)里面 包含了許多bmp格式的圖片和若干個(gè)xml文件，其中最重要的是Skin.xml這個(gè)xml文件， 其它幾個(gè)xml文件的作用在后面會(huì)提到。bmp圖片是各個(gè)窗口的背景及按鈕圖片，Skin.xml則是配置文件，定義了皮膚的基本 信息、窗口及按鈕的位置、大小等，它是基于XML格式的文件，可直接用系統(tǒng)自帶的記事 本或者其它文本編輯工具打開，打開后我們可以看到其基

3、本構(gòu)造： .仔細(xì)分析可發(fā)現(xiàn)每一行都是以”結(jié)尾，中間有若干項(xiàng)和參數(shù)，可以將 它們分為兩種類型，第一種結(jié)構(gòu)形如：像XXX這樣的項(xiàng)稱作元素，AAA、BBB這樣的項(xiàng)稱作屬性，aaa、bbb則是屬性的參數(shù) 值。在這里AAA、BBB都是XXX的屬性，是用于修飾XXX的，比如position屬性用于定 義元素的位置，image屬性用于定義元素的位圖等。在這種類型中，XXX和/XXX必須同時(shí)使用，形成一個(gè)閉合回路，就是說前面使用 了 XXX 開頭，后面就一定要用/XXX來閉合，包含這中間的各項(xiàng)則都屬于該元素。使用 該類型的主要有主窗口（即player_window元素）、均衡器窗口（即equalizer_wi

4、ndow元素）、 歌詞秀窗口（即lyric_window元素）、播放列表窗口（即playlist_window元素）以及迷你模式窗 口（即mini_window元素）這5個(gè)基本的窗口，這5個(gè)窗口又全部包含在skin和/skin之 間。第二種結(jié)構(gòu)形如：YYY CCC=ccc DDD=ddd/實(shí)際上這是一種縮寫形式，即丫丫丫 CCC=ccc DDD=dddYYY|的縮寫，它們是最基 本的單位元素，分別被包含于各個(gè)基本窗口中，用于比如各個(gè)按鈕，拖動(dòng)條等。關(guān)于XML文件的格式，可以參照相關(guān)的文檔，在這里要提一下的是，各元素及屬性的 順序是不分先后的，空格的多少也沒有關(guān)系，只要包含和被包含的位置及基本的

5、格式別弄錯(cuò) 了就可以（比如屬性的參數(shù)值必須用英文雙引號(hào)引上等），但是為了便于閱讀和編輯修改，最 好嚴(yán)格按照標(biāo)準(zhǔn)格式來書寫。下面我們來詳細(xì)分析一下Skin.xml，第一行：skin version=2 name=. author=. url=. email=. transparent_color=.這一行用于定義皮膚的基本屬性和信息，其中version=2指的是皮膚的版本號(hào)，不必 更改，后面的name、author、url和email屬性分別指的是該皮膚的名稱、作者的名字、作 者主頁地址和作者電子郵件地址，這些信息會(huì)顯示在千千選項(xiàng)的應(yīng)用皮膚的窗口中；再后面 的transparent_color是

6、一個(gè)非常重要的屬性，即”透明色”，定義了透明色之后，皮膚上有這 個(gè)顏色的部分都會(huì)被顯示為透明。因?yàn)閎mp格式圖片是不支持透明的，所以要做出不規(guī)則 的背景窗口和按鈕，就要通過透明色來實(shí)現(xiàn)，方法是把要顯示為透明的部分用定義好的透明 色填充即可。一個(gè)皮膚只能定義一個(gè)固定的透明色，并用顏色的RGB編碼表示，比如純紫 色的RGB碼為#FF00FF，RGB編碼可以在Photoshop等工具中查看。（透明色應(yīng)盡量選擇 皮膚色調(diào)相差較大的顏色，否則很容易與皮膚上的顏色重復(fù)，導(dǎo)致把必要的部分透明了，一 般情況下用純紫色即可）接下來就是5個(gè)基本窗口的配置，其中迷你模式窗口在后面會(huì)單獨(dú)詳細(xì)講解。在 Skin.xml

7、中，首先要配置好的就是主窗口，歌詞秀窗口，均衡器窗口，播放列表窗口這4 個(gè)子窗口的相關(guān)設(shè)置，然后再分別配置各窗口上的按鈕等。屬性參數(shù)介紹下面是各窗口上元素的對應(yīng)圖及屬性說明：position：這是眾元素中最基本的屬性之一，用于定義窗口背景及按鈕的位置及大小， 參數(shù)值格式為a, b ,c ,d，這4個(gè)數(shù)值既固定了元素的位置也確定了其大小，其中（a, b）為 左上角的坐標(biāo)，（c, d）為右下角的坐標(biāo)，c-a就是長度，d-b就是高度，坐標(biāo)原點(diǎn)要分兩種 情況：如果是歌詞秀、均衡器、播放列表這3個(gè)子窗口的position，則是把主窗口的左上角 作為它們的坐標(biāo)原點(diǎn)；如果是各窗口內(nèi)部按鈕的position，

8、則是把對應(yīng)的各窗口的左上角作 為坐標(biāo)原點(diǎn)，比如歌詞秀窗口中的關(guān)閉按鈕就是以歌詞秀背景圖片的左上角為原點(diǎn)，其它 依此類推！特別地：播放列表中的scrollbar元素不需要定義position屬性，它的位置會(huì)自動(dòng)固 定在playlist的最右邊；主窗口中的progress、volume元素及均衡器窗口中的balance、 surround、preamp元素的position屬性表示的是滑塊能夠移動(dòng)的范圍的坐標(biāo)；播放列表 衡器窗口中的playlist元素、歌詞秀衡器窗口中的lyric元素的position屬性表示的是播放列 表和歌詞的顯示范圍，當(dāng)播放列表窗口和歌詞秀窗口改變大小時(shí)，這兩個(gè)元素會(huì)自動(dòng)跟

9、著改 變大小，但它們的四個(gè)邊和窗口的四個(gè)邊的距離就是通過這個(gè)position來體現(xiàn)的；resize_rect :歌詞秀和播放列表窗口特有的屬性，用于定義這兩個(gè)窗口可被拉伸的部 分，其參數(shù)格式同position，代表的是當(dāng)改變窗口大小時(shí)只有這個(gè)矩形框內(nèi)的部分才會(huì)被拉 長，在這個(gè)范圍外的部分則不會(huì)變化，另外還有一個(gè)屬性resize_tile是對應(yīng)使用的，其參數(shù) 值可以為0或1,其中0表示在改變窗口大小時(shí)采用拉伸的方式，1表示采用平鋪的方式， 該屬性可省略不寫，即使用默認(rèn)值0；此外，歌詞秀和播放列表窗口還有一個(gè)可選擇的元素：title，可在有特定需要時(shí)（比如 在改變窗口大小時(shí)標(biāo)題保持居中等）使用，格

10、式如下：前面3者的示意圖如下：image：用于定義該元素所使用的圖片。一般地，按鈕圖片大部分都是由4個(gè)大小相同 的圖片并排組合在一起的，分別代表按鈕的4種不同狀態(tài)：按鈕正常、鼠標(biāo)經(jīng)過按鈕、鼠 標(biāo)按下按鈕、按鈕無效，下圖就是播放按鈕的圖片：注：如果按鈕在這4種狀態(tài)下都是一樣的，同樣需要將4張圖片并排在一起才能正 常顯示；存在于播放列表中的scroll元素內(nèi)的scrollbar_button和scrollbar_button屬性 所對應(yīng)的圖片只有3種狀態(tài)：按鈕正常、鼠標(biāo)經(jīng)過按鈕和鼠標(biāo)按下按鈕；align :用于定義元素的對齊方式，參數(shù)值分兩種情況：一種是存在于主窗口中的led、 info、ster

11、eo、status元素內(nèi)，此時(shí)可以取值為left、center、right，代表這些文字的縮進(jìn)方 式；第二種是存在于歌詞秀窗口中的title、close、ontop元素內(nèi)，播放列表窗口的title、close、 toolbar元素內(nèi)，此時(shí)可以取值為left、center、right、top、bottom等，代表當(dāng)調(diào)整窗口大 小時(shí)元素位置相對于邊框移動(dòng)，如果要同時(shí)設(shè)置垂直對齊和水平對齊方式，可以用英文加號(hào) 將二者連在一起，比如top+left表示在垂直方向上頂部對齊、在水平方向上左對齊；thumb_image、fill_image、bar_image:存在于主窗口中的progress、volum

12、e元素和均 衡器窗口的balance、surround、preamp、eqfactor元素內(nèi)，分別用于定義滑塊的圖片、移 動(dòng)滑塊時(shí)填充的圖片和移動(dòng)范圍內(nèi)的背景圖片；vertical:存在于主窗口中的progress、volume元素，參數(shù)值可以為true或false，其 中取true時(shí)指滑塊按垂直方向移動(dòng)，取false時(shí)滑塊按水平方向移動(dòng)；color、bkgnd、font、font_size:存在于主窗口中的 info、stereo、status 元素內(nèi)，用 于定義文字的顏色、背景色、字體和字體大小，如要顯示透明文字則不需要指定背景色 (bkgnd)；thumb_resize_center：存

13、在于播放列表窗口中的scrollbar元素內(nèi)，用于定義scrollbar 的thumb滑塊中間可以進(jìn)行平鋪縮放的部分的大小，如果取值為0，則代表在改變播放列 表窗口高度大小時(shí)滑塊進(jìn)行不縮放；thumb_resize_tile：存在于播放列表窗口中的scrollbar元素內(nèi)，作用與播放列表窗口 和歌詞秀窗口的resize_tile相同；hot_image：存在于播放列表窗口中的toolbar元素內(nèi)，用于定義播放列表工具欄中當(dāng) 鼠標(biāo)經(jīng)過時(shí)的圖片形態(tài)。此屬性可選擇，如省略不寫的話程序會(huì)自動(dòng)生成鼠標(biāo)經(jīng)過時(shí)的按鈕 狀態(tài)；eq_interval：存在于均衡器窗口中的equalizer_window元素內(nèi)，

14、指eqfactor元素中10 個(gè)波段的間隔大小(另：eqfactor元素的position屬性表示的是10個(gè)滑塊中第一個(gè)滑塊的位 置，而其它屬性對于所有10個(gè)滑塊都有效)；icon：存在于主窗口中的icon元素內(nèi)，用于自定義皮膚圖標(biāo)，必須將圖標(biāo)文件(*.ico， 16*16)放于皮膚文件夾中并一起打包壓縮。此屬性可選擇，如省略不寫的話則使用默認(rèn)的程 序圖標(biāo)；left_top_color、right_bottom_color：存在于歌詞秀窗口中的 mini_border 元素內(nèi)，用 于定義在迷你模式下歌詞秀窗口的左上邊框和右下邊框的顏色；在這里重點(diǎn)介紹一下迷你模式窗口:如上圖，迷你模式其實(shí)是獨(dú)立

15、于主窗口外的另外一個(gè)皮膚，不過在迷你模式下省略了播 放列表和均衡器窗口、簡化了歌詞秀窗口和主窗口。迷你窗口里的所有元素、屬性及參數(shù)都 是和主窗口一樣的，它們都被包含于mini_window和/mini_window 中，相當(dāng)于主窗口 中的 player_window /player_window；迷你模式就是為了減小屏幕大小占用及簡化按鈕，故迷你窗口各按鈕也要相應(yīng)調(diào)整縮 小，并省略部分不常用的按鈕，比如音量調(diào)節(jié)等，一般只保留下播放/暫停、停止、后 退、前進(jìn)、靜音、圖標(biāo)、視覺效果等即可。另外，迷你模式下的歌詞秀窗口的位置 和長度是固定的，高度則是和迷你模式的背景圖片高度相同。打包壓縮當(dāng)把所有圖片

16、都制作完成并配置好Skin.xml后還需做一件事情，那就是添加Lyric.xml、 Playlist.xml、Visual.xml等3個(gè)xml文件，它們分別是作為歌詞秀、播放列表、視覺效果 的配色方案及相關(guān)的設(shè)置，如果不加上這3個(gè)文件皮膚就按默認(rèn)的配色來顯示，所以建議 給每個(gè)皮膚都加上合適的配色便于與整體配套，從而使得皮膚更為美觀漂亮，另外，如果皮 膚沒有自帶配色文件的話，從其它有配色的皮膚切換到該皮膚時(shí)，會(huì)把原先皮膚的配色也一 起帶過來，效果非常難看。它們的參數(shù)和Skin.xml類似的，可以用記事本打開后進(jìn)行配置，不過還有另外一種更 為簡潔高效的方法，那就是在千千選項(xiàng)里配置好，然后分別在每個(gè)選項(xiàng)卡中點(diǎn)擊配置 文件”一”保存到文件”，并分別保存為Playlist.xml”、Lyric.xml”、Visual.xml”，再將它們復(fù) 制到相同目錄下的皮膚文件夾