veket官方网站论坛

veket

 找回密码
 要注册
搜索
查看: 5500|回复: 8

xfwm4主题介绍及制作流程 (一)介绍

[复制链接]
发表于 2010-8-19 20:22 | 显示全部楼层 |阅读模式
本帖最后由 perryfa 于 2010-12-20 20:20 编辑

第一部分 介绍

1. 制作主题的基本知识介绍
xfwm4主题提供了xfce4桌面管理器的窗口装饰,简单地说,当你在lucky8k-veket系列的桌面打开一个程序窗口,四周一圈的颜色、图样就是xfwm4定义的。
在lucky8k-veket系统,xfwm4主题都放在这个目录下:
/usr/share/themes
这个目录里的每个子目录都是一个主题,目录名就是主题名(必须是英文的,中文不认)。进入某个主题的目录,例如/usr/share/themes/Perryfa-Spring-Xfce,可以看到两个子目录:gtk-2.0和xfwm4(有的主题只有一个子目录,那就意味这这个主题是纯粹的gtk主题或者xfwm4主题)。这两个目录名是不可以改动的,改了程序就找不到了。xfwm4目录下就是全部的主题文件,有图片文件,也有文本文件。
对于桌面管理来说,程序窗口有两种状态,active和inactive,就是你正在使用的程序窗口,和被压在下面暂时不用的程序窗口。制作主题一般也会做两种有区别的窗口(如果你偷懒,只做一种,让两种窗口一模一样,那也不是不可以)。
制作主题,一般需要做两种工作。
一是主题参数设置文件,例如对Perryfa-Spring-Xfce这个主题,它的设置文件就是:/usr/share/themes/Perryfa-Spring-Xfce/xfwm4/themerc。xfwm4的主题设置文件相当简单。
另个相对费时的工作就是制作图片了。xfwm4的主题所用的图片都有固定的文件名字,不可以改动,名字不对程序就不认了。如果你的英文过得去的话,这些图片的作用是一目了然的,因为它的作用在文件名字里都写着了,例如title-1-active.png,一看就是给active程序窗口的标题栏用的,而left-inactive.png,显然是inactive程序窗口的左边沿。看下面的详细介绍。

2. xfwm4图片文件介绍
对于xfwm4图片文件的命名,以active程序窗口为例,看下图:

                               
登录/注册后可看大图


xfwm4-window.png
上图是一个程序窗口,周围一圈,是依赖xfwm4主题的各种图片显示成这个样子的,中间灰色的部分是程序窗口的内容部分,是gtk主题定义的,不在本文讨论的范围之内(关于gtk主题,我另有教程)。
上图中每个图片位置旁边的英文字就是它的图片文件名。
对于每一个位置,xfwm4用两张图片来表现,分别为xpm格式和png格式,xpm格式的图片为底图,png格式的图片是覆盖在xpm格式的图片之上的(所以通常是半透明的)。两种格式的图片大小必须一样,永远是成对出现。这种设计是很独特的,一些特殊的效果全赖这种设计才能做成。

首先看程序窗口的标题栏,也就是上面最醒目的一条。上面这一条包括两个部分,按钮和其他部分,按钮我们最后说(因为图片最多),先说标题栏。
上图中图片文件名中有title字样的就是标题栏图片,一共有五种。
title-1-active.png        title-1-active.xpm
title-2-active.png        title-2-active.xpm
title-3-active.png        title-3-active.xpm
title-4-active.png        title-4-active.xpm
title-5-active.png        title-5-active.xpm
这五对图片从左到右排列拼成一个标题栏。
其中,1、3、5三对图片比较特别,它们应用到程序窗口上时,程序会自动拼贴。我们通常使用程序窗口是可以缩放的,那么把程序窗口框起来的图片自然也应该有缩放功能。而xfwm4的做法是根据程序窗口的大小需要,反复拼贴这三张图。所以,为了节约字节,也为了让窗口缩得很小时也能正常显示,通常这三对图片做得极小,假设你想把这个标题栏做成27像素高,那么这三对图片有可能是1x27,也就是只有1个像素宽,让程序自己去拼贴成长长的一条。注意,xfwm4不支持图片按比例缩放,只能平铺拼贴。如果需要做一些效果,例如采用了不对称、不均匀的图片(我做了不少这样的主题),那么就要非常仔细地研究图片之间的无缝拼接效果,不断地放大缩小窗口看效果,非常化时间。
2、3、4三对图片通常是用来给程序窗口的文字标题做特殊效果用的,就像我上图贴的那样,突出了程序的标题。2、4两对图片是不会改变大小的,你图片做成多宽,在程序窗口上就显示多宽。这两张图片是用来给程序窗口的文字显示部分做边框的,而3是衬在文字后面的,它会被拼贴,因为每个程序出现的文字是不一样多的,文字有多有少,背后的图片当然应该相应改变。

再看程序窗口的四个角,图片文件为:
top-left-active.png        top-left-active.xpm 左上角
top-right-active.png        top-right-active.xpm 右上角
bottom-left-active.png        bottom-left-active.xpm 左下角
bottom-right-active.png        bottom-right-active.xpm 左下角
这4对图片要注意以下问题。
图片宽度:
这4对图片的宽度应该和下面说的左右边沿的图片相同。如果图片不够宽,会出现衔接不上的问题,窗口出现缺口(特意要做这种效果的除外)。如果图片太宽,那么多余部分无法显示。
图片高度:
左右上角的图片高度一般至少和窗口标题栏(title)相同,比标题栏高是可以的,程序会自动让左右边沿的图片显示变矮,这在做某些渐变效果时很有用。
左右下角的图片高度一般至少和底部图片(bottom)相同,比底部高也是可以的,程序会自动让左右边沿的图片显示变矮。

再看程序窗口的左右两边和底部,图片文件为:
left-active.png        lef-active.xpm 左边沿
right-active.png          right-active.xpm  右边沿
bottom-active.png        bottom-active.xpm  底部
这三对图片和前面说的标题栏1、3、5一样,是拼贴的。左右边沿是上下拼贴,底部图片是左右拼贴。
因为有自动拼贴功能,所以,这三对图片一般都做得极小(为了节约字节),假设你希望左边沿有5个像素宽,那么left-active的图片大小可以是5x1像素,也就是说,高度只有1个像素。同理,bottome-active的图片可能是1x5像素,也就是5个像素高,1个像素宽。

上面介绍的程序窗口边框图片都是针对active程序窗口的,总共有12对图片,前面我说过还有一种程序窗口是inactive状态,需要的图片也是一样的,只要把上面的图片名里的“active”全部替换成“inactive”就是了,例如title-1-inactive.png/title-1-intactive.xpm。
所以,要做的图片一共是24对,48张。

最后介绍一下按钮图片,这部分的图片很多。
首先,xfwm4共有6种按钮,在这个窗口看得很清楚:

                               
登录/注册后可看大图


2.jpg
用户可以自己决定需要哪些按钮,并且决定按钮的排列顺序。
这6种按钮在xfwm4里分别命名为menu(菜单)、stick(钉住,我自己乱意译的,为了好理解)、shade(卷起)、hide(最小化或隐藏)、maximize(最大化)和close(关闭)。其中,stick、shade和maximize这三种按钮又有两种不同的状态,即钉住/松开、卷起/放下、最大化/恢复。
所以,实际上,我们要做的按钮有6+3,总共9个。
每种按钮有三种状态,激活窗口按钮(active)、非激活窗口按钮(inactive)和按下动画效果(pressed)。
所以,全部按钮需要做9x3=27对图片,54张。

菜单按钮:
menu-active.png/xpm        menu-pressed.png/xpm        menu-inactive.png/xpm

关闭按钮:
close-active.png/xpm        close-pressed.png/xpm        close-inactive.png/xpm

最小化/隐藏按钮:
hide-active.png/xpm        hide-pressed.png/xpm        hide-inactive.png/xpm

最大化/恢复按钮:
最大化 maximize-active.png/xpm   maximize-pressed.png/xpm   maximize-inactive.png/xpm
恢复  maximize-toggled-active.png/xpm   maximize-toggled-pressed.png/xpm   maximize-toggled-inactive.png/xpm

卷起/放下按钮:

卷起 shade-active.png/xpm   shade-pressed.png/xpm   shade-inactive.png/xpm
放下 shade-toggled-active.png/xpm   shade-toggled-pressed.png/xpm   shade-toggled-inactive.png/xpm

钉住/松开按钮:
钉住 stick-active.png/xpm   stick-pressed.png/xpm   stick-inactive.png/xpm
松开 stick-toggled-active.png/xpm   stick-toggled-pressed.png/xpm   stick-toggled-inactive.png/xpm

图片文件就这么多了,48+54=102张图片,看上去不少,不过不用太担心,制作主题时真正要化功夫精工细作的,也就几张到十几张图片,其余的或者可以链接,或者可以用别的图片简单地翻转/旋转使用,不费什么时间。但是,这么多图片的数量摆着,图片相互之间的关系也非常有讲究,所以,做主题最基本的要求是心静,需要非常耐心、细心和不怕麻烦。

[ 本帖最后由 perryfa 于 2010-8-20 21:48 编辑 ]
发表于 2010-8-19 21:01 | 显示全部楼层
支持,先收藏,有空慢慢实习。
发表于 2010-8-19 22:18 | 显示全部楼层
要坐下慢慢学习才行,好帖,难得一见的好帖。
发表于 2010-8-20 08:49 | 显示全部楼层
支持教程。
发表于 2010-8-20 10:59 | 显示全部楼层
想学,不过看上去不容易。
您需要登录后才可以回帖 登录 | 要注册

本版积分规则

QQ|手机版|Archiver|veket官方网站论坛 ( 粤ICP备 11052856 )

GMT+8, 2024-4-15 07:41

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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