皮肤制作教程Word格式文档下载.docx

1、3）迷你模式按钮minimode.bmp 同上，这里不再赘述了。（4）关闭按钮close.bmp（5）播放进度滑块（本例中播放进度条上的小圆按钮）progress_thumb.bmp这个小按钮是需要脱离背景部分单独扣出来的，那么镂空部分需要如何处理才能最终在界面上显示出透明的效果呢，解决的办法和上面的大背景镂空处理一样就是把镂空填充成（#ff00ff）这个颜色，如上图。（6）播放进度填充背景图progress_fill.bmp缓冲进度条填充背景图该进度条在听在线歌曲发生缓冲时出现，如果没有该元素，默认方式是会将进度条的颜色加深，作为缓冲条颜色显示。（7）播放列表窗口打开关闭按钮playlist

2、.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）关闭按钮，切图同主窗口上的关闭按钮（

3、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）总在最

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

5、在主窗口上，做主窗口时别忘了留出地方哦.具体切图示例如下，大家一看就会明白啦：（B）修改配置文件一、首先看一下skin.xml这个配置文件以上是皮肤的基本描述信息，请根据您自己的情况填写，分别是版本号，皮肤名称，皮肤作者，地址，电子邮箱，透明色的设置1、和之间的代码它是描述主窗口的参数设置的Position 是坐标定位，image是图片名称，就是我刚才讲述的每个图片的命名坐标由4个数字组成，中间用逗号隔开，前两个数字是图片左上角的x坐标和y坐标，后两个数字是图片右下角的x坐标和y坐标,请注意，这里的右下角x坐标和y坐标都要多算一个点，否则播放器会少显示两条边；这里需要注意的是：每个窗口的位置是

6、组合窗口后抓的坐标，而每个窗口上面的按钮控件是单独定位的，比如，我们要获得歌词秀窗口上面的关闭按钮的坐标，是要把歌词秀窗口的左上角定位在切图软件（0，0）坐标上，然后再抓关闭按钮的坐标。可以参考下图来理解代码player_window image=player_skin.bmpplay position=50, 123, 90, 163 image=play.bmp/pause position=pause.bmpprev position=9, 123, 49, 163prev.bmpnext position=132, 123, 172, 163next.bmpstop position=

7、91, 123, 131, 163stop.bmpmute position=183, 137, 194, 148mute.bmp /lyric position=248, 112, 272, 126lyric.bmpequalizer position=223, 112, 242, 126equalizer.bmpplaylist position=197, 112, 216, 126playlist.bmpbrowser position=214, 86, 276, 106browser.bmpminimize position=230, 3, 247, 21minimize.bmpmin

8、imode position=248, 3, 265, 21minimode.bmpexit position=266, 3, 283, 21close.bmpprogress position=7, 112, 184, 123 bar_image= thumb_image=progress_thumb.bmp fill_image=progress_fill.bmpvolume position=197, 136, 277, 147 vertical=falseprogress2.bmp以下文字是播放器上面的一些显示文字的设置Icon是千千静听的logo；info是音乐标题和专辑歌手的信息，

9、轮显在播放器窗口上；led是时间数字，这里不是文字代码，是做好了一张图片，这张图片由大小相等的12个字符组成， 0 1 2 3 4 5 6 7 8 9 : -记住这12个字符缺一不可。Stereo 是立体声的字体设置Status是状态的字体设置Visual是视觉效果的设置，这里面只是简单定义了位置，更详细的设置请看Visual.xml文件icon position=4, 3, 20, 19TTPlayer.icoinfo position=21, 34, 208, 49 color=#ffffff font=Tahoma font_size=13 align=leftled position=

10、160, 37, 270, 49number.bmprightstereo position=224, 54, 273, 70status position=200, 70, 273, 86visual position=17, 56, 185, 1062、歌词秀窗口的代码参考如下图一起看lyric_window position=0, 393, 287, 475 resize_rect=49, 25, 245, 73lyric_skin.bmp10, 25, 277, 73close position=221, 3, 283, 20ontop position=202, 3, 264, 20

11、ontop.bmp/lyric_window3、均衡器窗口的代码equalizer_window position=0, 165, 287, 279eq_skin.bmp eq_interval=5266, 3, 283, 20enabled position=152, 3, 187, 21eq_enabled.bmpprofile position=224, 3, 259, 21eq_profile.bmpreset position=188, 3, 223, 21reset.bmpbalance position=15, 45, 71, 56eqfactor_full2.bmpsurrou

12、nd position=15, 76, 71, 87preamp position=81, 36, 92, 99eqfactor_full.bmpeqfactor position=115, 36, 126, 98/equalizer_window4、播放列表窗口的代码playlist_window position=0, 279, 287, 39361, 43, 265, 105playlist_skin.bmp221, 2, 283, 19toolbar position=10, 24, 278, 41playlist_toolbar.bmp hot_image=playlist_tool

13、bar_hot.bmpscrollbar buttons_image=scrollbar_button.bmpscrollbar_thumb.bmpscrollbar_bar.bmpcenter10, 43, 278, 105 selected_image=playlist_selected.bmp/playlist_window1、迷你窗口的代码mini_window image=mini-player.bmp177, 3, 271, 27play_mini.bmppause_mini.bmp153, 3, 247, 27prev_mini.bmp224, 3, 318, 27next_mi

14、ni.bmp201, 3, 295, 27stop_mini.bmp269, 17, 379, 27lyric_mini.bmp272, 3, 335, 20255, 3, 317, 20289, 3, 351, 203, 6, 19, 2227, 7, 142, 22/mini_window2、音乐窗的代码（代码后面/部分为注释）browser_window position=540, 0, 810, 336browser_skin.bmp452, 3, 469, 19 /关闭按钮位置backward position=112, 3, 133, 19browser_backward.bmp

15、/后退按钮位置forward position=148, 3, 169, 19browser_forward.bmp /前进按钮位置refresh position=186, 2, 207, 18browser_refresh.bmp /刷新按钮位置startup position=7, 458, 144, 473 ckbox_image=browser_startup.bmp interval=4 color=SimSun12 /多选框的位置，注意X坐标要包括后面的文字，interval的值为多选框和文字之间的距离linktxt position=280, 457, 464, 472 /连接

16、文字区域，建议多留一些，以显示更多的文字内容9, 26, 464, 447 /html网页位置，和“歌词秀”中的歌词显示范围性质一样/browser_window二、下面看一下Lyric.xml这个配置文件以下是歌词文字的设置，分别定义了字体类型，字体颜色，高亮颜色和背景颜色 ttplayer_lyricLyricFont=-11,0,0,0,400,0,0,0,134,3,2,4,49,TahomaTextColor=#008CC1HilightColor=#005489BkgndColor=#F4FBFE/ttplayer_lyric三、下面看一下Playlist.xml这个配置文件这个是

17、播放列表窗口的文字设置，分别定义了字体类型，字体颜色，高亮颜色，第一背景颜色，数字颜色，时间颜色，当前选择颜色，第二背景颜色（可以和第一背景颜色一致）ttplayer_playlistPlayList Color_Text=Color_Hilight=Color_Bkgnd=#EAF5FAColor_Number=Color_Duration=Color_Select=#84CEF9Color_Bkgnd2=/ttplayer_playlist四、下面看一下Visual.xml这个配置文件这个是用来设置视觉显示的效果，我们先给大家介绍一下千千静听都提供哪几种视觉效果：频谱分析梦幻星空3、视波显

18、示4、专辑封面5、不显示视频效果这5种情况只要在播放器主窗口上面点击鼠标右键即可切换如图：下面的配置文件是用来设置各种视觉效果颜色的，大家可以试试看，调出你喜欢的效果来ttplayer_visualVisual SpectrumTopColor=#FFFFFFSpectrumBtmColor=#07F7FFSpectrumMidColor=#8CDCFFSpectrumPeakColor=SpectrumWide=1BlurSpeed=3Blur=BlurScopeColor=/ttplayer_visual（C）打包成皮肤文件好了，以上就是皮肤制作的整个过程啦，把上面的切图和配置文件制作好后

19、，就可以打包成皮肤文件了，可以用WinRAR或WinZIP等压缩工具，以WinRAR为例，先按键盘上的CtrlA全选所有文件，然后将全部文件添加到压缩文件夹，压缩文件格式选择zip，压缩方式可选择最好，再点击确定就行了！（D）应用皮肤将这个压缩文件复制到千千安装目录下的Skin文件夹，然后在千千选项.皮肤中就可以选择应用皮肤了，或直接在主面板上点击右键选择皮肤即可！或许您已经了解皮肤的制作方法了，为了更深入的理解，我们增加以下部分的内容帮助您消化：三、几个重要的属性解释position：这是众元素中最基本的属性之一，用于定义窗口背景及按钮的位置及大小，参数值格式为 a, b ,c ,d，这4个数值既固定了元素的位置也确定了其大小，其中（a, b）为左上角的坐标，（c, d）为右下角的坐标，c-a 就是长度，d-b 就是高度，坐标原点要分两种情况：如果是歌词秀、均衡器、播放列表这3个子窗口的position，则是把主窗口的左上角作为它们的坐标原点；如果是各窗口内部按钮的position，则是把对应的各窗口的左上角作为坐标原点，比如歌词秀窗口中的