ToTo Look 偷偷看
  首页 软件 频道 偷乐者公社    
皮肤制作


ToTolook皮肤制作宝典

    ToTolook从2007新版开始支持换肤的功能,现在已经有不少靓丽的皮肤了。ToTolook的皮肤制作起来其实蛮简单的,不需要任何编程知识和复杂的技术,只要掌握基本的图形编辑操作(Photoshop或者fireworks)和有足够的耐心(Patient)就可以做出漂亮的皮肤出来,看完下面这个教程相信你也可以为ToTolook设计一款个性十足的精美皮肤!

 
第一部分:从替换一张图片开始做皮肤
    ToTolook的皮肤位于安装目录下的Themes文件夹内,像黑色旋风、蓝色魅力之类文件夹都是一个个独立的皮肤,进入这些文件夹,可以发现里面包含了许多bmp格式的图片和一个default.xml文件,其中最重要的是default.xml这个xml文件。

    仅仅替换一张图片,就能改变一下皮肤的风格,因此,即使是新手也能很快上手。高手的话就可以发挥自己的艺术特长,用photoshop,illustrator做出各种效果来。
举个例子, channel_header_background.bmp这个皮肤文件是一个地球的图形, 135px宽x 35px高。我们可以用一张同样135px宽* 25px高的图片来替代它。

最后的效果就是:

 

第二部分:皮肤的结构
1、图片
bmp图片构成了各个窗口的框架、按钮和滚动条等元素,皮肤的外观基本上由这些图片决定。
下面是各窗口上元素的对应图 (点击可查看大图)
 

2、xml配置文件
default.xml是配置文件,定义了皮肤的基本信息、窗口及按钮的位置、大小等,它是基于XML格式的文件,可直接用系统自带的记事本或者其它文本编辑工具打开,我们推荐使用ultraedit、notepad++等带语法高亮的文本编辑器。

<?xml version="1.0" encoding="utf-8"?>
<!-- Default theme -->
<theme version="1.0">
<fonts>
<font
id="mainmenu"
name="Arial"
size="12"
char_set="GB2312" />
……
</fonts>
<main_frame
back_color="255,255,255"
transparent_color="255,0,255"
main_frame_image="main_frame.bmp"
title_height="37"
min_button_pos="-54,7,-41,20"
max_button_pos="-39,7,-26,20"
close_button_pos="-24,7,-11,20"
……
min_track_size="400,300" />
仔细分析可发现每一行都是以"<"开头,最后以">"结尾,中间有若干项和参数,可以将它们分为两种类型,

第一种结构形如<YYY CCC="ccc" DDD="ddd"/>
实际上这是一种缩写形式,它们是最基本的单位元素,分别被包含于各个基本窗口中,用于比如各个按钮,字体大小颜色等。

第二种结构形如<XXX AAA="aaa" BBB="bbb"></XXX>
像XXX这样的项称作元素,AAA、BBB这样的项称作属性,aaa、bbb则是属性的参数值。在这里AAA、BBB都是XXX的属性,是用于修饰XXX的,比如position属性用于定义元素的位置,image属性用于定义元素的位图等。

在这种类型中,和必须同时使用,形成一个闭合回路,就是说前面使用了开头,后面就一定要用来闭合,包含这中间的各项则都属于该元素。使用该类型的主要有这5个基本的窗口:

  1. 主窗口(即main_frame元素)
  2. 播放器窗口(即media_player_frame元素)
  3. 任务列表窗口(即jobview_control元素)
  4. 频道列表窗口(即channel_control元素)
  5. 搜索窗口(即search_frame元素)

这5个窗口又全部包含在和之间。
其他的基本元素

  1. 缩进条(即splitter_control元素)
  2. 音量控制(即volume_control元素)
  3. 播放进度条(即slider_control元素)
  4. 基本颜色(即colors元素)
  5. 频道高亮显示(即channeltheme元素)

关于xml文件的格式,可以参照相关的文档,在这里要提一下的是,各元素及属性的顺序是不分先后的,空格的多少也没有关系,只要包含和被包含的位置及基本的格式别弄错了就可以(比如属性的参数值必须用英文双引号引上等),但是为了便于阅读和编辑修改,最好严格按照标准格式来书写。

  在default.xml中,首先要配置好的就是主窗口,播放器窗口,任务列表窗口,频道列表窗口和搜索窗口这5个窗口的相关设置,然后再分别配置各窗口上的按钮等其他元素。

 

第三部分、元素的属性与参数
pos也就是position,这是众元素中最基本的属性之一,用于定义窗口背景及按钮的位置及大小,参数值格式为 "a, b ,c ,d",这4个数值既固定了元素的位置也确定了其大小,其中(a, b)为左上角的坐标,(c, d)为右下角的坐标,c-a 就是长度,d-b 就是高度,坐标原点要分两种情况:如果是主窗口、任务列表、播放器这3个子窗口的position,则是把主窗口的左上角作为它们的坐标原点;如果是各窗口内部按钮的position,则是把对应的各窗口的左上角作为坐标原点,其它依此类推!

bar、image:用于定义该元素所使用的图片,相关语句里都会包含一个.bmp的文件。一般地,按钮图片大部分都是由4个大小相同的图片并排组合在一起的,分别代表按钮的4种不同状态:按钮正常、鼠标经过按钮、鼠标按下按钮、鼠标离开,下图就是播放按钮的图片:

注:如果按钮在这4种状态下都是一样的,同样需要将4张图片并排在一起才能正常显示
color、background_color、text_color用于定义文字的颜色、背景色等。颜色定义使用RGB颜色值(0 to 255),通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红、绿、蓝三个通道的颜色。配色可参考

font、name、size:用于定义字体和字体大小等;

channellevel:用于定义频道名称的高亮色;

margin、width 、height:分别用于定义元素的边界、宽度、高度,单位是px(像素)。

 

四、使用皮肤
把所有bmp文件和default.xml放入同一个文件夹,替这个文件夹取一个响亮的名字,再把这个文件夹拷贝到themes文件夹下。最后依次点击主菜单-皮肤切换,就可以看到新制作的皮肤了。

制作ToTolook皮肤的基本方法就这么多,但是技巧远不止这些,大家可以在制作的过程中不断实践摸索,并发挥自己的创造力,设计出各种有创意的皮肤来!

 
 
 
客服邮箱:service#ToToLook.Com #->@ 客服 QQ:365999924 151790950
Copyright @ 2006-2007 ToToLook.COM All Rights Reserved