xfwm4主题介绍及制作流程 （一）介绍
本帖最后由 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程序窗口为例，看下图：
http://www.lucky8k.com/data/attachment/album/201012/20/201807sz22i0o6dds60y6z.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种按钮，在这个窗口看得很清楚：
http://www.lucky8k.com/data/attachment/album/201012/20/2020205a0p5rcr0r7n0r8p.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 编辑 ] 支持，先收藏，有空慢慢实习。 要坐下慢慢学习才行，好帖，难得一见的好帖。 支持教程。 想学，不过看上去不容易。
页:
[1]
2