千千靜聽皮膚制作.doc

2008年12月25日更新：增加在線歌曲的緩沖進度條皮膚元素。命名：progress_fill2.bmp一、了解千千靜聽皮膚制作是怎么一回事？1、如果您是位從未接觸過皮膚制作的人，那么請先仔細看下面的這段話：如何把設(shè)計好的皮膚效果圖應(yīng)用到千千靜聽軟件上去，有兩個主導思想您應(yīng)該了解：一個是需要把效果圖上面的控件（或稱按鈕）單獨切出來，另一個是需要把上一點說的控件（或稱按鈕）的坐標找到，為它精準定位，是不是聽的有點眉目了，那么我們接著往下講。2、千千的皮膚位于安裝目錄下的Skin文件夾內(nèi)，擴展名可以為.skn或.zip，實際上二者是一樣的。對于前者，可以先將.skn的擴展名改為.zip(要在系統(tǒng)中顯示文件的擴展名，依次點擊工具文件夾選項查看，再把隱藏已知文件類型的擴展名前的小勾去除即可)，然后將其解壓到單獨的文件夾，進入該文件夾，可以發(fā)現(xiàn)里面包含了許多bmp格式的圖片和若干個xml文件，他這些文件便是皮膚的組成部分了，bmp圖片是各個窗口的背景及按鈕圖片，Skin.xml則是配置文件，定義了皮膚的基本信息、窗口及按鈕的位置、大小等，它是基于XML格式的文件，可直接用系統(tǒng)自帶的記事本或者其它文本編輯工具打開的。好，了解以上的基礎(chǔ)知識后，我們就開始學習實際的制作過程。二、開始制作啦！按照四個步驟進行：（A）切圖（B）修改配置文件（C）打包成皮膚文件（D）應(yīng)用皮膚（A）切圖：用PS或FW打開設(shè)計效果圖，整體觀察一下，下面講一下哪些圖片是要單獨切出來的以及圖片的命名。一、主窗口的控件（1）主窗口背景 命名：player_skin.bmp重點：邊緣小圓角的鏤空處理，把鏤空填充成（#ff00ff）這個顏色，要細心處理這部分哦，邊緣要1像素1像素的填充（如上圖，鏤空部分的顏色處理）（2）最小化按鈕（4個狀態(tài)）命名：minimize.bmp重點：凡是功能按鈕都要做4種狀態(tài)，并把這四種狀態(tài)做在一張圖里，存儲成.BMP格式，注意每種狀態(tài)按鈕他的寬度和高度要一致，說一下每種狀態(tài)代表的含義第一個狀態(tài)：自然狀態(tài)第二個狀態(tài)：鼠標劃過時的狀態(tài)第三個狀態(tài)：鼠標按下去時的狀態(tài)第四個狀態(tài)：按鈕失效時的狀態(tài)（舉個例子，比如播放列表只有一首歌曲，那么“下一首”按鈕就是無法點擊的，那么此時這個按鈕狀態(tài)就是失效時的狀態(tài)）3）迷你模式按鈕命名：minimode.bmp 同上，這里不再贅述了。（4）關(guān)閉按鈕命名：close.bmp（5）播放進度滑塊（本例中播放進度條上的小圓按鈕）命名：progress_thumb.bmp重點：這個小按鈕是需要脫離背景部分單獨扣出來的，那么鏤空部分需要如何處理才能最終在界面上顯示出透明的效果呢，解決的辦法和上面的大背景鏤空處理一樣就是把鏤空填充成（#ff00ff）這個顏色，如上圖。（6）播放進度填充背景圖命名：progress_fill.bmp緩沖進度條填充背景圖該進度條在聽在線歌曲發(fā)生緩沖時出現(xiàn)，如果沒有該元素，默認方式是會將進度條的顏色加深，作為緩沖條顏色顯示。命名：progress_fill2.bmp（7）播放列表窗口打開關(guān)閉按鈕命名：playlist.bmp（8）均衡器窗口打開關(guān)閉按鈕命名：equalizer.bmp（9）歌詞窗口打開關(guān)閉按鈕命名：lyric.bmp（10）“上一首”按鈕命名：prev.bmp（11）“播放”按鈕命名：play.bmp（12）“暫?！卑粹o命名：pause.bmp(13)“下一首”按鈕命名：next.bmp(14)“打開播放文件”按鈕命名：open.bmp(15)音量小喇叭按鈕命名：mute.bmp(16)音量進度背景填充圖命名：progress2.bmp(17)音量滑塊同（5）二、均衡器窗口的控件（18）開啟按鈕命名：eq_enabled.bmp（19）重設(shè)按鈕命名：reset.bmp（20）配置按鈕命名：eq_profile.bmp（21）關(guān)閉按鈕，切圖同主窗口上的關(guān)閉按鈕（22）平衡器環(huán)繞聲所有滑動的小按鈕 同（5）（23）平衡，環(huán)繞填充背景命名：eqfactor_full2.bmp（24）均衡填充背景命名：eqfactor_full.bmp三、播放列表窗口的控件（25）關(guān)閉按鈕，同主窗口關(guān)閉按鈕（26）工具條按鈕，命名：playlist_toolbar.bmp熱點狀態(tài)命名：playlist_toolbar_hot.bmp（27）滾動條上下按鈕命名：scrollbar_button.bmp 重點：將上下按鈕拼在一張圖上制作（28）滾動條滑動按鈕命名：scrollbar_thumb.bmp（29）滾動條背景命名：scrollbar_bar.bmp四、歌詞秀窗口的控件（30）關(guān)閉按鈕，同主窗口（31）總在最前按鈕命名：ontop.bmp五、音樂窗窗口的控件上圖為千千音樂窗界面，其中用綠色邊框套住的部分為顯示部分，和皮膚設(shè)計無關(guān)，就是說我們要做的是綠色邊框外的內(nèi)容。好，明確了制作部分，開始講制作過程，首先，要制作一個窗口背景，就是圖中顯示的最外面的藍色風格的窗口，像主窗口一樣，不難理解，格式同樣為.bmp，需要設(shè)置透明色背景（#FF00ff），注意圓角像素的處理。然后制作窗口里的控件，上圖中用紅色框標出了所有控件，包括后退、前進、刷新、關(guān)閉、多選框、連接文字區(qū)。其中后退、前進的功能是像網(wǎng)頁一樣的控制當前頁面，并不是歌曲的后退、前進，不過也沒影響，不多說了。最后，還要制作一個按鈕，用來打開音樂窗，按鈕要做在主窗口上，做主窗口時別忘了留出地方哦.具體切圖示例如下，大家一看就會明白啦：增加新的音樂窗和下載管理標簽按鈕很簡單，只需在音樂窗代碼塊中加入如下2行代碼：browser_mini.bmp表示音樂窗按鈕圖片browser_download.bmp即是下載管理按鈕圖片按鈕狀態(tài)都是四種（初始、鼠標浮動、按下、不可點），位置坐標和其它的元素一樣，很簡單吧：）（B）修改配置文件一、首先看一下skin.xml這個配置文件以上是皮膚的基本描述信息，請根據(jù)您自己的情況填寫，分別是版本號，皮膚名稱，皮膚作者，地址，電子郵箱，透明色的設(shè)置1、和之間的代碼它是描述主窗口的參數(shù)設(shè)置的Position 是坐標定位，image是圖片名稱，就是我剛才講述的每個圖片的命名坐標由4個數(shù)字組成，中間用逗號隔開，前兩個數(shù)字是圖片左上角的x坐標和y坐標，后兩個數(shù)字是圖片右下角的x坐標和y坐標,請注意，這里的右下角x坐標和y坐標都要多算一個點，否則播放器會少顯示兩條邊；這里需要注意的是：每個窗口的位置是組合窗口后抓的坐標，而每個窗口上面的按鈕控件是單獨定位的，比如，我們要獲得歌詞秀窗口上面的關(guān)閉按鈕的坐標，是要把歌詞秀窗口的左上角定位在切圖軟件（0，0）坐標上，然后再抓關(guān)閉按鈕的坐標?？梢詤⒖枷聢D來理解代碼以下文字是播放器上面的一些顯示文字的設(shè)置Icon是千千靜聽的logo；info是音樂標題和專輯歌手的信息，輪顯在播放器窗口上；led是時間數(shù)字，這里不是文字代碼，是做好了一張圖片，這張圖片由大小相等的12個字符組成， 0 1 2 3 4 5 6 7 8 9 : -記住這12個字符缺一不可。Stereo 是立體聲的字體設(shè)置Status是狀態(tài)的字體設(shè)置Visual是視覺效果的設(shè)置，這里面只是簡單定義了位置，更詳細的設(shè)置請看Visual.xml文件2、歌詞秀窗口的代碼參考如下圖一起看3、均衡器窗口的代碼4、播放列表窗口的代碼1、迷你窗口的代碼2、音樂窗的代碼（代碼后面/部分為注釋） /關(guān)閉按鈕位置 /后退按鈕位置 /前進按鈕位置 /刷新按鈕位置 /多選框的位置，注意X坐標要包括后面的文字，interval的值為多選框和文字之間的距離 /連接文字區(qū)域，建議多留一些，以顯示更多的文字內(nèi)容 /html網(wǎng)頁位置，和“歌詞秀”中的歌詞顯示范圍性質(zhì)一樣二、下面看一下Lyric.xml這個配置文件以下是歌詞文字的設(shè)置，分別定義了字體類型，字體顏色，高亮顏色和背景顏色 三、下面看一下Playlist.xml這個配置文件這個是播放列表窗口的文字設(shè)置，分別定義了字體類型，字體顏色，高亮顏色，第一背景顏色，數(shù)字顏色，時間顏色，當前選擇顏色，第二背景顏色（可以和第一背景顏色一致）四、下面看一下Visual.xml這個配置文件這個是用來設(shè)置視覺顯示的效果，我們先給大家介紹一下千千靜聽都提供哪幾種視覺效果：1、頻譜分析2、夢幻星空3、視波顯示4、專輯封面5、不顯示視頻效果這5種情況只要在播放器主窗口上面點擊鼠標右鍵即可切換如圖：下面的配置文件是用來設(shè)置各種視覺效果顏色的，大家可以試試看，調(diào)出你喜歡的效果來(C)打包成皮膚文件好了，以上就是皮膚制作的整個過程啦，把上面的切圖和配置文件制作好后，就可以打包成皮膚文件了，可以用WinRAR或WinZIP等壓縮工具，以WinRAR為例，先按鍵盤上的CtrlA全選所有文件，然后將全部文件添加到壓縮文件夾，壓縮文件格式選擇zip，壓縮方式可選擇最好，再點擊確定就行了！（D）應(yīng)用皮膚將這個壓縮文件復(fù)制到千千安裝目錄下的Skin文件夾，然后在千千選項.皮膚中就可以選擇應(yīng)用皮膚了，或直接在主面板上點擊右鍵選擇皮膚即可！或許您已經(jīng)了解皮膚的制作方法了，為了更深入的理解，我們增加以下部分的內(nèi)容幫助您消化：三、幾個重要的屬性解釋position：這是眾元素中最基本的屬性之一，用于定義窗口背景及按鈕的位置及大小，參數(shù)值格式為 a, b ,c ,d，這4個數(shù)值既固定了元素的位置也確定了其大小，其中(a, b)為左上角的坐標，(c, d)為右下角的坐標，c-a 就是長度，d-b 就是高度，坐標原點要分兩種情況：如果是歌詞秀、均衡器、播放列表這3個子窗口的position，則是把主窗口的左上角作為它們的坐標原點；如果是各窗口內(nèi)部按鈕的position，則是把對應(yīng)的各窗口的左上角作為坐標原點，比如歌詞秀窗口中的關(guān)閉按鈕就是以歌詞秀背景圖片的左上角為原點，其它依此類推！特別地：播放列表中的scrollbar元素不需要定義position屬性，它的位置會自動固定在playlist的最右邊；主窗口中的progress、volume元素及均衡器窗口中的balance、surround、preamp元素的position屬性表示的是滑塊能夠移動的范圍的坐標；播放列表衡器窗口中的playlist元素、歌詞秀衡器窗口中的lyric元素的position屬性表示的是播放列表和歌詞的顯示范圍，當播放列表窗口和歌詞秀窗口改變大小時，這兩個元素會自動跟著改變大小，但它們的四個邊和窗口的四個邊的距離就是通過這個position來體現(xiàn)的；resize_rect：歌詞秀和播放列表窗口特有的屬性，用于定義這兩個窗口可被拉伸的部分，其參數(shù)格式同position，代表的是當改變窗口大小時只有這個矩形框內(nèi)的部分才會被拉長，在這個范圍外的部分則不會變化，另外還有一個屬性resize_tile是對應(yīng)使用的，其參數(shù)值可以為0或1，其中0表示在改變窗口大小時采用拉伸的方式，1表示采用平鋪的方式，該屬性可省略不寫，即使用默認值0；此外，歌詞秀和播放列表窗口還有一個可選擇的元素：title，可在有特定需要時(比如在改變窗口大小時標題保持居中等)使用，格式如下：align：用于定義元素的對齊方式，參數(shù)值分兩種情況：一種是存在于主窗口中的led、info、stereo、status元素內(nèi)，此時可以取值為left、center、right，代表這些文字的縮進方式；第二種是存在于歌詞秀窗口中的title、close、ontop元素內(nèi)，播放列表窗口的title、close、toolbar元素內(nèi)，此時可以取值為left、center、right、top、bottom等，代表當調(diào)整窗口大小時元素位置相對于邊框移動，如果要同時設(shè)置垂直對齊和水平對齊方式，可以用英文加號將二者連在一起，比如top+left表示在垂直方向上頂部對齊、在水平方向上左對齊；vertical：存在于主窗口中的progress、volume元素，參數(shù)值可以為true或false，其中取true時指滑塊按垂直方向移動，取false時滑塊按水平方向移動；thumb_resize_center：存在于播放列表窗口中的scrollbar元素內(nèi)，用于定義scrollbar的thumb滑塊中間可以進行平鋪縮放的部分的大小，如果取值為0，則代表在改變播放列表窗口高度大小時滑塊進行不縮放；thumb_resize_tile：存在于播放列表窗口中的scrollbar元素內(nèi)，作用與播放列表窗口和歌詞秀窗口的resize_tile相同；hot_image：存在于播放列表窗口中的toolbar元素內(nèi)，用于定義播放列表工具欄中當鼠標經(jīng)過時的圖片形態(tài)。此屬性可選擇，如省略不寫的話程序會自動生成鼠標經(jīng)過時的按鈕狀態(tài)；eq_interval：存在于均衡器窗口中的equalizer_window元素內(nèi)，指eqfactor元素中10個波段的間隔大小(另：eqfactor元素的position屬性表示的是10個滑塊中第一個滑塊的位置，而其它屬性對于所有10個滑塊都有效)；icon：存在于主窗口中的icon元素內(nèi)，用于自定義皮膚圖標，必須將圖標文件(*.ico，16*16)放于皮膚文件夾中并一起打包壓縮。此屬性可選擇，如省略不寫的話則使用默認的程序圖標；left_top_color、right_bottom_color：存在于歌詞秀窗口中的mini_border元素內(nèi)，用于定義在迷你模式下歌詞秀窗口的左上邊框和右下邊框的顏色；迷你窗口：迷你模式其實是獨立于主窗口外的另外一個皮膚，不過在迷你模式下省略了播放列表和均衡器窗口、簡化了歌詞秀窗口和主窗口。迷你窗口里的所有元素、屬性及參數(shù)都是和主窗口一樣的，它們都被包含于和中，相當于主窗口中的 ；迷你模式就是為了減小屏幕大小占用及簡化按鈕，故迷你窗口各按鈕也要相應(yīng)調(diào)整縮小，并省略部分不常用的按鈕，比如音量調(diào)節(jié)等，一般只保留下播放/暫停、停止、后退、前進、靜音、圖標、視覺效果等即可。另外，迷你模式下的歌詞秀窗口的位置和長度是固定的，高度則是和迷你模式的背景圖片高度相同。四、皮膚制作注意事項及技巧：1.壓縮皮膚文件時，不是壓縮整個文件夾，而是應(yīng)該進入文件夾后按CtrlA全選所有文件，然后再添加到壓縮文件(zip格式)，否則皮膚無效；2.播放列表和歌詞秀窗口的position屬性定義了這兩個窗口初始化時的大小，這個大小可以不是圖片的實際大小。這兩個窗口在初始化時就會按照resize_rect的規(guī)則拉伸窗口至所設(shè)置的大小。此外，這兩個窗口最大可以拉伸到與屏幕同樣大小，但最小只能縮小到與原始圖片同樣的大小，所以原始圖片應(yīng)該盡量畫得小一些，這樣可以方便用戶把窗口縮成最小，同時還可以稍微減少圖片及皮膚大??；注：這個時候窗口上的按鈕的position屬性是按圖片的實際大小來確定坐標的；3.bmp圖片(尤其是幾個面積較大的窗口背景圖片)應(yīng)盡量轉(zhuǎn)換為8位的索引顏色，這樣可以極大地減少圖片及皮膚的大小，同時在應(yīng)用皮膚時可以減少內(nèi)存占用率。具體的方法為：在Adobe Photoshop中，打開RGB模式的圖片，然后點擊圖像模式索引顏色，再保存即可！注：如果有透明色時要注意兩點：在填充透明色時，一定不要選容差；轉(zhuǎn)換時一定要選中保留原實際顏色，以防止填充的透明色被改掉。4.當按鈕很小的時候，不要將其透明，而是和背景圖片連在一起！因為我們知道，皮膚中透明的部分是不感應(yīng)鼠標動作的，因此當按鈕比較小的時候如果中間有很小的縫隙，鼠標移動到上面時就會亂跳，不便于點擊操作！如圖所示：5.在制作皮膚時最好做一部分預(yù)覽一下效果，這樣有問題的地方可以及時修改過來6.如果不想在主窗口或迷你模式中顯示千千靜聽的圖標，可以將圖標的position設(shè)置為超過窗口大小，比如500, 500, 516, 516；7.在主窗口中的led元素(即播放時間)有兩種顯示方式，一種是已播放的時間，一種是未播放的時間，鼠標點擊即可在兩種顯示方式之間切換。后者比前者多了一個負號，因此在主窗口上應(yīng)至少給led留出6位的空間，以防止在顯示剩余時間時數(shù)字覆蓋到面板上的其它部分而影響美觀；led元素使用的圖片必須是12張同樣大小的圖片排在一起，分別代表0-9十個數(shù)字、冒號和減號(可以使用透明色)；8.如果不想顯示某個窗口或者各窗口上的某些元素，把相應(yīng)的元素代碼全部刪除即可；9.如果是用記事本打開XML文件的，那存儲的時候盡量編碼設(shè)置成ANSI；如下圖所示：10、關(guān)于坐標定位的小技巧：大家注意一下坐標定義的問題，拿一個20*20的小圖為例，它的位置是150，30，170，50，大家來看這個坐標，一定認為沒有問題，但實際效果會顯示不全，為什么呢，因為坐標的X軸有一個小小的誤差問題，要多加2像素才可以哦，正確的定位是150，30，172，50。大家在制作時注意一下。制作千千皮膚的基本方法就只有這么多，但是技巧遠不止這些，大家可以在制作的過程中不斷實踐摸索，并發(fā)揮自己的創(chuàng)造力，設(shè)計出各種有創(chuàng)意的皮膚來！鳴謝：發(fā)呆的猴子，很高很瘦五、新增桌面歌詞工具條制作方法（2009年4月8日）圖0圖00首先要在歌詞秀原來的代碼