先锋论坛

标题: （原创）5.x 版皮肤制作图文教程 [打印本页]

作者: Aplus 时间: 2011-3-16 13:56
标题: （原创）5.x 版皮肤制作图文教程
官方原创发布，严禁转载！

先锋是我用过第一款中文媒体播放器，当我第一次接触先锋时就觉得很好，当时我的电脑里的codec好像是都坏了（不知怎么搞的），一用先锋，什么都能播放。所以我就支持先锋到现在。其他拍马的话我就不多说了，直接写个皮肤制作教程给那些认为先锋皮肤难看的朋友，自己动手制作皮肤吧~

前言：

很多朋友都想为先锋制作美丽的皮肤，帮助先锋获得更多肯定，但却因为现有的教程太“高级”，缺乏解释，而本教程则针对难懂之处进行补充，了解更快。废话完毕，现在开始咯~

=====================================================================================================

第一课：初始

需要的工具：
1. Photoshop 或其他制图工具。
2. 笔记本（Notepad）
3. 先锋男儿的皮肤教程作为参考。

首先，在先锋安装目录下找到“Skins”目录，创建一个新目录并且命名，如Demo。
创建新笔记本文件并保存，修改后辍为.xml文件，这里就是你皮肤的控制中心了，把代码全都写进去。

文件类型：

<?xml version="1.0" encoding="utf-8"?>
<skin xmlns="" version="1.0">

这个代码是决定整个文件的编码，可以不用理会。

=====================================================================================================

第二课：基本信息（皮肤：魔幻蓝色2）

现在填下你皮肤的信息，在选择皮肤时，会显示这些信息。

<manifest
            name="魔幻蓝色2"
            author="先锋男儿"
            link="链接没能发"
            email="也是"
            Description="一款以魔幻与梦幻结合的蓝色默认皮肤"
            version="1.10"
            type="Skin"/>

如图所示，蓝色是超链接，点击“魔幻蓝色”会到“链接”，点击“先锋男儿”会发送油箱。

=====================================================================================================

第三课：颜色

<colourScheme>
<colour name="System.Base.Midtone" value="C3DAF9"/>
<colour name="System.Shadow" value="C3DAF9"/>

看见C3DAF9 了吗？这是颜色的代码，称为十六进制颜色，不同的代码会有不同的颜色，可到网上搜查一下十六进制颜色生成。

=====================================================================================================

第四课：坐标、对齐

看到下列代码：

<windowSkins>
   <windowSkin>
         <image path="xf_main.bmp"/>
         <target window="CMainWnd"/>
         <parts>

第一个windowSkins是概括整个皮肤文件的，第二个windowSkins则是CMainWnd的部分。在这个windowSkins下的part，用的都是xf_main.bmp 的图片。这是怎么实现的？技巧就是定位。

<part name="TopLeft"       rect="139,36,41,33"/>

这个代码中TopLeft 是固定了的；rect 的意思是四方形；139，36 是xf_main.bmp图片中的开始点，意思就是从X轴算起139像素和y轴算起第36像素开始引用宽为41像素和高为33像素的部分。如图：

name 里的相对名称请查看4.0超越版皮肤制作教程。Parts 结束后用</parts> 来关闭，就代表第一windowSkins的part已经结束了。

Anchors：

Anchors 指的是坐标，但是要怎样定位呢？看看例子：

<anchor name="Minimise" rect="-100,0,26,18" />

“-”的意思就是从后面算起，普通则为正常算起。比如-100就表示后面算起100像素，见图：

接下来我们看看字体，

<caption align="left" rect="29,0,-110,33" fontFace="微软雅黑" fontSize="14" colour="FFFFFF" inactivecolour="B7B7B7" />

左对齐，从X 轴正面29像素开始，直到从后面算起110像素，允许高度33像素内。字体是微软雅黑，14号白色字体。
这部分的WindowSkins完了，用</windowSkin> 关闭。

=====================================================================================================

第五课：多重文件

      <image type="image" language="ch" path="xftooL.bmp"/>
      <image type="alpha" language="ch" path="xftooLApp.bmp"/>
      <image type="silder" language="ch" path="gdt.bmp"/>
      <image type="silder2" language="ch" path="ylt.bmp"/>
      <image type="watermark" language="ch" path="bj.bmp"/>
      <picture type="siltrack" path="PosTrack.bmp"/>
      <picture type="yltrack" path="ylTrack.bmp"/>

看到很多图片一起，不要惊慌，其实我们需要定位的就只有xftooL.bmp罢了，有注意到这些图片有哪些不同吗？就是image type 和 language， image type 已经定下来了，所以我们不修改，ch的意思是中文，没什么关系。为什么要 type？原因是让系统自动选择要用的图片文件，就不用我们一个一个地去设置了。 Type 的作用其实和name 一样，就是添加标签。xftooLApp.bmp在介绍中为轮廓文件，大家仔细看的话会发现它和xftooL.bmp很相近，只是这个文件用黑色把不用的部分注释掉了。其他的图片文件真的不用给他们定位吗？不用，但是你必须制作一样大小的图片来覆盖旧的图片，就连位置也不能偏差。

=====================================================================================================

第六课：Alpha

这里有三个图，MenuBar的背景色是红色的，为什么出来的效果是透明？原因是系统把MenuBar中的红色，ylt和gdt中的紫色给注释掉了，我们称这两个颜色为alpha通道。当我们制作这些带alpha通道的文件时，除了MenuBar.bmp以外，其他文件的背景都用紫色。

=====================================================================================================

第七课：完成

完成了你的自制皮肤，当然少不了测试。测试满意的话，别忘了发上先锋论坛和大家分享哦~

欢迎光临先锋论坛 (https://bbs.xfplay.com/)