先锋论坛

 找回密码
 注册
查看: 25660|回复: 1

(原创)5.x 版 皮肤制作图文教程

[复制链接]
发表于 2011-3-16 13:56:11 | 显示全部楼层 |阅读模式
官方原创发布,严禁转载!

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


前言:

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


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

第一课:初始

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

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

rename.jpg

文件类型:

<?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"/>

xinxi.jpg

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


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

第三课:颜色

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


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

yanse.jpg


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

第四课:坐标、对齐

看到下列代码:

<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像素的部分。如图:

dingwei.jpg

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

Anchors:

Anchors 指的是坐标,但是要怎样定位呢?看看例子:

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

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

px.jpg

接下来我们看看字体,

<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

tu.jpg

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


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

第七课:完成

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

小黑屋|手机版|Archiver|零与壹软件 ( 桂ICP备14004305号 桂公网安备 45030502000091号 )

返回顶部
x

影音先锋资讯

GMT+8, 2018-7-22 20:41

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表