千千静听皮肤制作.docx

千千静听皮肤制作.docx

《千千静听皮肤制作.docx》由会员分享，可在线阅读，更多相关《千千静听皮肤制作.docx（26页珍藏版）》请在冰点文库上搜索。

千千静听皮肤制作

2008年12月25日更新：

增加在线歌曲的缓冲进度条皮肤元素。

命名：

progress_fill2.bmp

一、了解千千静听皮肤制作是怎么一回事？

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

缓冲进度条填充背景图

该进度条在听在线歌曲发生缓冲时出现，如果没有该元素，默认方式是会将进度条的颜色加深，作为缓冲条颜色显示。

命名：

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

三、播放列表窗口的控件

（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），注意圆角像素的处理。

然后制作窗口里的控件，上图中用红色框标出了所有控件，包括后退、前进、刷新、关闭、多选框、连接文字区。

其中后退、前进的功能是像网页一样的控制当前页面，并不是歌曲的后退、前进，不过也没影响，不多说了。

最后，还要制作一个按钮，用来打开音乐窗，按钮要做在主窗口上，做主窗口时别忘了留出地方哦...

具体切图示例如下，大家一看就会明白啦：

增加新的音乐窗和下载管理标签按钮很简单，只需在音乐窗代码块中加入如下2行代码：

browser_mini.bmp表示音乐窗按钮图片

browser_download.bmp即是下载管理按钮图片

按钮状态都是四种（初始、鼠标浮动、按下、不可点），位置坐标和其它的元素一样，很简单吧：

）

（B）修改配置文件

一、首先看一下skin.xml这个配置文件

以上是皮肤的基本描述信息，请根据您自己的情况填写，分别是版本号，皮肤名称，皮肤作者，地址，电子邮箱，透明色的设置

1、和之间的代码

它是描述主窗口的参数设置的

Position是坐标定位，image是图片名称，就是我刚才讲述的每个图片的命名

坐标由4个数字组成，中间用逗号隔开，前两个数字是图片左上角的x坐标和y坐标，后两个数字是图片右下角的x坐标和y坐标,请注意，这里的右下角x坐标和y坐标都要多算一个点，否则播放器会少显示两条边；

这里需要注意的是：

每个窗口的位置是组合窗口后抓的坐标，而每个窗口上面的按钮控件是单独定位的，比如，我们要获得歌词秀窗口上面的关闭按钮的坐标，是要把歌词秀窗口的左上角定位在切图软件（0，0）坐标上，然后再抓关闭按钮的坐标。

可以参考下图来理解代码

以下文字是播放器上面的一些显示文字的设置

Icon是千千静听的logo；

info是音乐标题和专辑歌手的信息，轮显在播放器窗口上；

led是时间数字，这里不是文字代码，是做好了一张图片，这张图片由大小相等的12个字符组成，0123456789:

-

记住这12个字符缺一不可。

Stereo 是立体声的字体设置

Status是状态的字体设置

Visual是视觉效果的设置，这里面只是简单定义了位置，更详细的设置请看Visual.xml文件

2、歌词秀窗口的代码

参考如下图一起看

3、均衡器窗口的代码

4、播放列表窗口的代码

1、 迷你窗口的代码

2、 音乐窗的代码（代码后面//部分为注释）

//关闭按钮位置

//后退按钮位置

//前进按钮位置

//刷新按钮位置

//多选框的位置，注意X坐标要包括后面的文字，interval的值为多选框和文字之间的距离

//连接文字区域，建议多留一些，以显示更多的文字内容

//html网页位置，和“歌词秀”中的歌词显示范围性质一样

二、下面看一下Lyric.xml这个配置文件

以下是歌词文字的设置，分别定义了字体类型，字体颜色，高亮颜色和背景颜色

Font="-11,0,0,0,400,0,0,0,134,3,2,4,49,Tahoma" 

TextColor="#008CC1" 

HilightColor="#005489" 

BkgndColor="#F4FBFE"/>

三、下面看一下Playlist.xml这个配置文件

这个是播放列表窗口的文字设置，分别定义了字体类型，字体颜色，高亮颜色，第一背景颜色，数字颜色，时间颜色，当前选择颜色，第二背景颜色（可以和第一背景颜色一致）

  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"

 />

四、下面看一下Visual.xml这个配置文件

这个是用来设置视觉显示的效果，我们先给大家介绍一下千千静听都提供哪几种视觉效果：

1、 频谱分析

2、 梦幻星空

3、 视波显示

4、 专辑封面

5、 不显示视频效果

这5种情况只要在播放器主窗口上面点击鼠标右键即可切换

如图：

下面的配置文件是用来设置各种视觉效果颜色的，大家可以试试看，调出你喜欢的效果来

  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"

 />

（C）打包成皮肤文件

好了，以上就是皮肤制作的整个过程啦，把上面的切图和配置文件制作好后，就可以打包成皮肤文件了，可以用WinRAR或WinZIP等压缩工具，以WinRAR为例，先按键盘上的Ctrl＋A全选所有文件，然后将全部文件添加到压缩文件夹，压缩文件格式选择"zip"，压缩方式可选择"最好"，再点击"确定"就行了！

（D）应用皮肤

将这个压缩文件复制到千千安装目录下的Skin文件夹，然后在"千千选项..."－"皮肤"中就可以选择应用皮肤了，或直接在主面板上点击右键－"选择皮肤"即可！

或许您已经了解皮肤的制作方法了，为了更深入