千千静听皮肤制作教程

千千静听皮肤制作教程【新增 5.2.0 版本音乐窗脚本详解】 一、了解千千静听皮肤制作是怎么一回事？ .......................................................................1 二、开始制作啦！...................................................................................................................1 （A）切图：....................................................................................................................1 （B）修改配置文件 ........................................................................................................6 （C）打包成皮肤文件 ..................................................................................................13 （D）应用皮肤..............................................................................................................13 三、几个重要的属性解释.....................................................................................................14 四、皮肤制作注意事项及技巧：.........................................................................................15 注：此教程不介绍 Photoshop 或 Firewoks 等图像图形处理软件设计皮肤过程 一、了解千千静听皮肤制作是怎么一回事？ 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 （7）播放列表窗口打开关闭按钮 命名：playlist.bmp （8）均衡器窗口打开关闭按钮 命名：equalizer.bmp （9）歌词窗口打开关闭按钮 命名：lyric.bmp （10）“上一首”按钮 命名：prev.bmp （11）“播放”按钮 命名：play.bmp （12）“暂停”按钮 命名：pause.bmp (13)“下一首”按钮 命名：next.bmp (14)音量小喇叭按钮 命名：mute.bmp (15)音量进度背景填充图 命名：progress2.bmp （16）音量滑块 同（5） 二、均衡器窗口的控件 （17）开启按钮 命名：eq_enabled.bmp （18）重设按钮 命名：reset.bmp （19）配置按钮 命名：eq_profile.bmp （20）关闭按钮，切图同主窗口上的关闭按钮 （21）平衡器环绕声所有滑动的小按钮 同（5） （22）平衡，环绕填充背景 命名：eqfactor_full2.bmp （23）均衡填充背景 命名：eqfactor_full.bmp 三、播放列表窗口的控件 （24）关闭按钮，同主窗口关闭按钮 （25）工具条按钮， 命名：playlist_toolbar.bmp 热点状态命名：playlist_toolbar_hot.bmp （26）滚动条上下按钮 命名：scrollbar_button.bmp 重点：将上下按钮拼在一张图上制作 （27）滚动条滑动按钮 命名：scrollbar_thumb.bmp （28）滚动条背景 命名：scrollbar_bar.bmp 四、歌词秀窗口的控件 （29）关闭按钮，同主窗口 （30）总在最前按钮 命名：ontop.bmp 五、音乐窗窗口的控件 上图为千千音乐窗界面，其中用绿色边框套住的部分为显示部分，和皮肤设计无关，就是说 我们要做的是绿色边框外的内容。 好，明确了制作部分，开始讲制作过程，首先，要制作一个窗口背景，就是图中显示的最外 面的蓝色风格的窗口，像主窗口一样，不难理解，格式同样为.bmp，需要设置透明色背景 （#FF00ff），注意圆角像素的处理。 然后制作窗口里的控件，上图中用红色框标出了所有控件，包括后退、前进、刷新、关闭、 多选框、连接文字区。其中后退、前进的功能是像网页一样的控制当前页面，并不是歌曲的 后退、前进，不过也没影响，不多说了。 最后，还要制作一个按钮，用来打开音乐窗，按钮要做在主窗口上，做主窗口时别忘了留出 地方哦... 具体切图示例如下，大家一看就会明白啦： （B）修改配置文件 一、首先看一下 skin.xml 这个配置文件 以上是皮肤的基本描述信息，请根据您自己的情况填写，分别是版本号，皮肤名称，皮肤作 者，地址，电子邮箱，透明色的设置 1、和之间的代码 它是描述主窗口的参数设置的 Position 是坐标定位，image 是图片名称，就是我刚才讲述的每个图片的命名 坐标由 4 个数字组成，中间用逗号隔开，前两个数字是图片左上角的 x 坐标和 y 坐标，后两 个数字是图片右下角的 x 坐标和 y 坐标,请注意，这里的右下角 x 坐标和 y 坐标都要多算一 个点，否则播放器会少显示两条边； 这里需要注意的是：每个窗口的位置是组合窗口后抓的坐标，而每个窗口上面的按钮控件 是单独定位的，比如，我们要获得歌词秀窗口上面的关闭按钮的坐标，是要把歌词秀窗口 的左上角定位在切图软件（0，0）坐标上，然后再抓关闭按钮的坐标。 请参考下图来理解代码 以下文字是播放器上面的一些显示文字的设置 Icon 是千千静听的 logo； info 是音乐标题和专辑歌手的信息，轮显在播放器窗口上； led 是时间数字，这里不是文字代码，是做好了一张图片，这张图片由大小相等的 12 个字符 组成， 0 1 2 3 4 5 6 7 8 9 : - 记住这 12 个字符缺一不可。 Stereo 是立体声的字体设置 Status 是状态的字体设置 Visual 是视觉效果的设置，这里面只是简单定义了位置，更详细的设置请看 Visual.xml 文件 2、歌词秀窗口的代码 参考如下图一起看 3、均衡器窗口的代码 4、播放列表窗口的代码 1、 迷你窗口的代码 2、 音乐窗的代码（代码后面//部分为注释） //关闭按钮位置 //后退按钮 位置 //前进按钮位置 //刷新按钮位置 //多选框的位置，注意 X 坐标要包括后面的文 字，interval 的值为多选框和文字之间的距离 //连接文字区域，建议多留一些，以显示更多的文字内容 //html 网页位置，和“歌词秀”中的歌词显示 范围性质一样 二、下面看一下 Lyric.xml 这个配置文件 以下是歌词文字的设置，分别定义了字体类型，字体颜色，高亮颜色和背景颜色 三、下面看一下 Playlist.xml 这个配置文件 这个是播放列表窗口的文字设置，分别定义了字体类型，字体颜色，高亮颜色，第一背景颜 色，数字颜色，时间颜色，当前选择颜色，第二背景颜色（可以和第一背景颜色一致） 四、下面看一下 Visual.xml 这个配置文件 这个是用来设置视觉显示的效果，我们先给大家介绍一下千千静听都提供哪几种视觉效果： 1、 频谱分析 2、 梦幻星空 3、 视波显示 4、 专辑封面 5、 不显示视频效果 这 5 种情况只要在播放器主窗口上面点击鼠标右键即可切换 如图： ， 下面的配置文件是用来设置各种视觉效果颜色的，大家可以试试看，调出你喜欢的效果来 (C)打包成皮肤文件 好了，以上就是皮肤制作的整个过程啦，把上面的切图和配置文件制作好后，就可以打包成 皮肤文件了，可以用 WinRAR 或 WinZIP 等压缩工具，以 WinRAR 为例，先按键盘上的 Ctrl ＋A 全选所有文件，然后将全部文件添加到压缩文件夹，压缩文件格式选择"zip"，压缩方式 可选择"最好"，再点击"确定"就行了！ （D）应用皮肤 将这个压缩文件复制到千千安装目录下的 Skin 文件夹，然后在"千千选项..."－"皮肤"中就可 以选择应用皮肤了，或直接在主面板上点击右键－"选择皮肤"即可！ 或许您已经了解皮肤的制作方法了，为了更深入的理解，我们增加以下部分的内容帮助 您消化： 三、几个重要的属性解释 position：这是众元素中最基本的属性之一，用于定义窗口背景及按钮的位置及大小，参 数值格式为 "a, b ,c ,d"，这 4 个数值既固定了元素的位置也确定了其大小，其中(a, b)为左上 角的坐标，(c, d)为右下角的坐标，c-a 就是长度，d-b 就是高度，坐标原点要分两种情况： 如果是歌词秀、均衡器、播放列表这 3 个子窗口的 position，则是把主窗口的左上角作为它 们的坐标原点；如果是各窗口内部按钮的 position，则是把对应的各窗口的左上角作为坐标 原点，比如歌词秀窗口中的"关闭"按钮就是以歌词秀背景图片的左上角为原点，其它依此类 推！ 特别地：①播放列表中的 scrollbar 元素不需要定义 position 属性，它的位置会自动固定 在 playlist 的最右边；②主窗口中的 progress、volume 元素及均衡器窗口中的 balance、 surround、preamp 元素的 position 属性表示的是滑块能够移动的范围的坐标；③播放列表衡 器窗口中的 playlist 元素、歌词秀衡器窗口中的 lyric 元素的 position 属性表示的是播放列表 和歌词的显示范围，当播放列表窗口和歌词秀窗口改变大小时，这两个元素会自动跟着改变 大小，但它们的四个边和窗口的四个边的距离就是通过这个 position 来体现的； resize_rect：歌词秀和播放列表窗口特有的属性，用于定义这两个窗口可被拉伸的部分， 其参数格式同 position，代表的是当改变窗口大小时只有这个矩形框内的部分才会被拉长， 在这个范围外的部分则不会变化，另外还有一个属性 resize_tile 是对应使用的，其参数值可 以为 0 或 1，其中 0 表示在改变窗口大小时采用拉伸的方式，1 表示采用平铺的方式，该属 性可省略不写，即使用默认值 0； 此外，歌词秀和播放列表窗口还有一个可选择的元素：title，可在有特定需要时(比如在 改变窗口大小时标题保持居中等)使用，格式如下：