xfwm4主题介绍及制作流程 （二）范例
本帖最后由 perryfa 于 2011-8-21 15:36 编辑第二部分 制作流程（范例）
做主题第一件事当然是构思。一般来说，总是先有了想法，然后才会起意要做个主题来实现自己的想法。这种想法，可能是因为你看见了一个中意的网页，或者打一个画面漂亮的游戏，或者仅仅是看见了一张好看的图。
借用这个范例，我把我曾经有过的一个想法来实现一下。这个想法来自以前看过的一张图，一个win下的系统检测软件的界面，印象深刻。
首先，我从系统的主题目录（/usr/share/themes/）下面随便选择一个子目录，在thunar里复制粘贴并改名，于是一个新的主题目录产生了：
/usr/share/themes/Perryfa-MetalNavy
然后，在xfce桌面设置界面选择这个新的主题，因为我什么都没有做，所以界面暂时是原来的主题的模样：
http://www.lucky8k.com/attachments/20100819_b0b1b91f481a5dcb0e88lkMt2o0rk5Lr.png
现在，我开始改变这个模样。
第一步 active程序窗口标题栏
标题栏通常是最重要的部分，因为它显眼（但我这个主题的重点不在这里，所以标题栏会比较简单）
我要做的这个标题栏比较简单，只需要做两张图，其他的全部采用链接。也就是说程序窗口顶上一条是一样的图片。
我选定标题栏的高度为27像素，一般来说，显示器的分辨率大的话，标题栏应该稍微高一些，以前一般都会选择30像素的高度。但因为今年发布的系统都号称要倾向于上网本，那么显示器的分辨律就会比较小，那么标题栏就不能太高，可以小到22像素。我选择的27是比较适中的（越小越难做）。
这是title-1-active.xpm，很简单，纯黑。图片大小6x27.
http://www.lucky8k.com/attachments/20100819_4ea3097c355ee9e45d04Quic5dgTZBu9.png
title-1-active.png就比较复杂一点，因为所有的光影效果都在这张图实现，我做的这个是比较简单的仅仅只有两个图层，一个是往黑色底色上覆盖一些灰色的点状条纹，这个图层的不透明度是70%，另一个图层负责在标题栏顶部加高光，不透明度50%。模仿某种胶木板的感觉。就是这个样子：
http://www.lucky8k.com/attachments/20100819_3ab336e8c7d80e01a563NGqmip6931EH.png
做完这两张图以后，我把剩下的2、3、4、5四对图全部链接到title-1-active，也就是说它们全都是一样，于是重新加载主题以后，就出来这个样子：
http://www.lucky8k.com/attachments/20100819_e322334963a3b0c95fd3rmE2cg6WcbkO.png
看上去已经开始不一样了。仔细看这个图（作图的第一要素是会看图），灰色点状斜纹使平面有了质感，可以想象摸上去是有花纹凹凸的，而非简陋的平板。而顶部的白色高光使得黑色板有了厚度的感觉。白色高光和黑色阴影的运用是作图最首要的技巧（当然，我的水平还是相当菜鸟的）。
第二步 active程序窗口的左右侧边沿和左右上角
这两个部分通常是会在一起做的，因为需要衔接在一起看效果。先做左边（或右边，随你便了）。
left-top-active.xpm，这张图比较简单，大小是15x27。这个27的高度是和标题栏一致的，而15的宽度是和下面的左边沿的宽度一致。
http://www.lucky8k.com/attachments/20100819_198d7e01b9090d548995GvJucGi3WZjX.png
left-top-active.png，大小当然和上图一样。
这张图就比较复杂了，因为光影效果都在这里。我无法在这个教程里细说gimp做图的技巧（那样的话这个教程就写不完了），只能简单地说，我在这里加了黑色胶木板的斜纹、顶光（因为要和标题栏图片无缝衔接），左边的不锈钢弯管（这是我要的效果），黑色胶木板左边沿的高光（和左边沿无缝衔接），总共是4个图层叠加在一起。每个图层，通常都需要几次、十几次地修改、重画，每改一次都需要重载主题看效果。
http://www.lucky8k.com/attachments/20100819_2fd9123cb4c44e553acaZff56RnkheeG.png
left-active.xpm，大小是15x27. 之所以高度是27,是因为这个左边沿的黑色胶木板并不是完全均匀材质的，和标题栏一样，是有斜纹的，所以需要一定的高度（其实不需要27, 我只是比较懒，直接把title-1-active.xpm拿过来作为一个图层，省了重新画图的功夫）。
左边是不锈钢管，右边是黑色胶木板，因为是底图，所以比较简单，胶木板的底图就是全黑。
http://www.lucky8k.com/attachments/20100819_b2dc6e960fa94fe2d4ca450NgtdKkoUi.png
left-active.png, 左边是不锈钢管，右边是黑色斜纹和高光两个图层（黑色斜纹图层也是直接把title-1-active.png拿来的）。
http://www.lucky8k.com/attachments/20100819_6a09454955c4d92a6056vfdey1nUObT1.png
经过不知道多少次的修改，终于把大致效果画好了，就是这个样子：
http://www.lucky8k.com/attachments/20100819_0c313f5eae08aaaee8b6YK61esNd4e4d.png
接下来的事情就比较好办了。因为程序窗口大多是对称的，所以右边沿和右上角只需要翻转左边的图就可以了。关于翻转，这里有个讲究，我假设屏幕顶上中部有光源，这样左右两边的光影效果就是对称的，这个假设其实是为了偷懒，我以前做的主题，曾经是把光源想象在左边或右边的，这样翻转就不可以，因为左右边的光影效果是不对称的。
把上面四张图在gimp里实行水平翻转，保存为：
right-top-active.xpm/png
right-active.xpm/png
重载主题，就变成这个样子：
http://www.lucky8k.com/attachments/20100819_083c62cfc438bb6bfacaB0Zd3AUixQ8u.png
第三步 active程序窗口的左右下角和底部
在视觉上，底部和左右下角比较不重要，因为人们很少会去注意它们。
我先做底部，这样做角的时候就比较容易衔接，可以直接把底部的图作为图层放在左右下角的图里稍作修整即可。
bottom-active.xpm，还是一张纯黑的底图（不贴了），大小是6x16，之所以需要6的宽度，是因为斜纹需要，而16的高度，是因为做左右角的图时，不锈钢弯管的转角需要较多的像素来表现。而左右角的空间和底部的高矮是有关系的。
bottom-active.png，底部光线比较暗，所以加了一点点阴影，斜纹还必须保持，这张图也不贴了，因为光源在顶部，底部应该比较暗，灰色条纹相对暗淡，已经几乎很难看清纹理了。
bottom-left-active.xpm，大小是15x16. 15的宽度和左边沿相同，而16的高度和底部相同。这张图还是两部分组成，胶木板的底图是纯黑，左边加上一个不锈钢弯管：
http://www.lucky8k.com/attachments/20100819_8b2ec075ffcc36bb62daMusiMRAfX7J6.png
bottom-left-active.png, 这张图也费了不少功夫，因为上要和左边沿衔接，右下要和底部衔接，加上光影的效果的转换（从边沿的亮到底部的暗），总共做了6个图层才勉强让上下衔接看上去不太突兀了。
http://www.lucky8k.com/attachments/20100819_84ff9bf9344163513c45Lgt5A0yOy0yf.png
现在只要把上面两张图水平翻转就得到了右下角的图两张图：bottom-right-active.xpm和bottom-right-active.png。
现在，整个窗口终于看上去完整了
http://www.lucky8k.com/attachments/20100819_e8345420f7e7a5db4183hVUwEkvuc56o.png
第四步 active程序窗口的按钮
从上图可见，其实我用来做模板的主题的按钮对本主题来说还算是比较协调的。可以不重新做。不过，考虑到这是在做范例，无论如何都得示范一下。而且，原主题缺了很多按钮，卷起/放下、钉住/松开、还有最大化后的恢复按钮，这些都没做。作为主题来说，不管别人用不用，按钮总是要做全的。用不用某个按钮的主动权交给用户。
首先，为了简单起见，我设定所有的按钮图片都是24像素宽，而高度必须和标题栏图片的高度一致，也就是一开始设定的27像素。按钮的大小是可以自己定义的，按钮太小，用户点击不便，按钮太大，会比较难看，显得粗鲁。有时候我会把按钮图片做成不一样的大小，也就是关闭按钮最宽，最大化最小，最小化中等。
因为按钮和标题栏是在同一排，所以按钮图片的背景和标题栏通常是一样的，在这个主题，背景图都是纯黑。所以，我先做了一张纯黑的24x27的图，命名为：close-active.xpm.
因为所有的按钮背景都是一样的颜色，一样的大小，所以，我就把其他按钮的active-xpm图片都链接到这个close-active.xpm，就是这些：
maximize-acitive.xpm, hide-active.xpm, shade-active.xpm, stick-active.xpm, menu-active.xpm
而对于状态按钮的背景图片，则链接到它们各自的主按钮背景，因为无论按钮是什么状态，背景都是一样的。也就是：
close-active.xpm 链接到 close-pressed.xpm
maximize-acitive.xpm 链接到 maximize-pressed.xpm, maximize-toggled-active.xpm 和 maximize-toggled-pressed.xpm
hide-active.xpm 链接到 hide-pressed.xpm
shade-acitive.xpm 链接到 shade-pressed.xpm, shade-toggled-active.xpm 和 shade-toggled-pressed.xpm
stick-acitive.xpm 链接到 stick-pressed.xpm, stick-toggled-active.xpm 和 stick-toggled-pressed.xpm
menu-active.xpm链接到 menu-active.xpm
现在开始做png图片。
一般的做法，无论是什么按钮（不管是圆的方的），除了按钮本身，其余的边角部分都是默认和标题栏看上去一样的，那样整个标题栏会有一个整体的感觉。当然，做成异形的也是常见的，有想法就可以做，没有什么是不可以的。我这里演示的是常规的做法。
先把title-5-active.png打开，它将作为所有按钮的png图片的背景，因为大多数按钮都是放在标题栏的右边，和title-5毗邻。title-5-active.png只有6像素宽，而按钮图片需要24像素，所以需要把这个图片拼贴成24像素宽（因为有斜纹存在，所以不能使用图片的缩放，只能拼贴，这样斜纹才能保持）。在这个基础上叠放各种不同的按钮图。
要注意的是，menu按钮一般是放在标题栏的左边的，和title-1毗邻，在某些标题栏不对称且有图片拼贴的情况下，menu按钮的背景应该是和title-1衔接的。但在这个主题，因为标题栏比较简单，所以title-1和title-5是一样的。
现在，我们有了所有按钮的png的背景：
http://www.lucky8k.com/attachments/20100819_3d50f58b0d297f8e17e1J8ogr0QeKoHi.png
然后，我做了一个圆形深凹图形叠放在上面（做这个主要就是明暗效果，因为我不是在写作图教程，就不介绍具体做法了）：
http://www.lucky8k.com/attachments/20100819_6e13d48dcbe26500e460Wok4GOeFvb2V.png
现在开始做一些关闭、最大化、最小化之类的标识符叠放在圆坑图形之上，这样最终的按钮png图片就做得了。这是关闭按钮的png图片：
http://www.lucky8k.com/attachments/20100819_060355c99ae6bc99d3526fk4gpAtYBbs.png
这是最大化按钮的png：
http://www.lucky8k.com/attachments/20100819_029e6e2e7e755137248a551momEO8SM4.png
剩下7种按钮的图片我就不一一贴了。
现在初步可以看一下按钮的效果了：
http://www.lucky8k.com/attachments/20100819_bc2f25bc37b1ed476b19iuEEDBqbLHel.png
我一直认为按钮是非常难做的，因为地方太小，可供描绘的像素太少，想做好的效果按钮就必须很大，总体效果又变差了，很难。
通常，为了提高效率，我会把全部的按钮图片都作为图层放在一个图片里，存成.xcf文件，这是gimp的分层图片的格式（类似PSD），这样我只需要做一次背景，就可以通过打开开和关闭图层来呈现不同按钮图片效果并保存。另外，一些中间图层都会被很好地保存下来，如果我想改按钮就会变得相对容易。在一般的情况下，我做一个主题，按钮图片至少会整个重做一套（做完了看看不满意就重做一遍），最痛苦的一次做了四套（怎么做都觉得不好看）。
按钮的工作还没完成。上面我只做了一种状态：active。也就是平时我们看见的状态。
现在，我做pressed状态，也就是把鼠标按到按钮上时出现的图片。前面的active做完了，这个状态就比较简单了。我已经保存有这个button.xcf文件，现在我只要简单地加几个图层，就可以通过关闭图层、打开图层来保存不同的按钮图片。
我做了一个红色光晕图层，放在close按钮标识和背景层之间，保存为close-pressed.active：
http://www.lucky8k.com/attachments/20100819_d3811f392c21004b65ef5aY9F9TXd5vs.png
这样，当按钮按下时，会有红色光晕出现：
http://www.lucky8k.com/attachments/20100819_323cbafec70189336567A4Ifl176KtaI.png
我复制这个光晕图层，并把颜色改为绿色、黄色、蓝色、白色，保存下其他的pressed状态的按钮：
绿色光晕 - maximize-pressed.pngmaximize-toggled-pressed.png
黄色光晕 - hide-pressed.png
蓝色光晕 - shade-pressed.png shande-toggled-pressed.png stick-pressed.png stick-toggled-pressed.png
白色光晕 - menu-pressed.png
然后，保存好button.xcf，后面做inactive状态的按钮时还要用的。
到此为止，active窗口的图片做完了。
第五步 inactive窗口
inactive窗口通常是被active窗口压在下面的，所以，它比较不重要，要注意的是，inactive窗口通常会比active窗口颜色要灰一些，亮度要低一些，外形也要简单一些。因为active窗口永远只有一个，而inactive窗口可能会有很多，如果太复杂太亮眼就会让屏幕显得很乱。
这个主题的xpm底图我都想要黑色的，所以，所有的inactive.xpm图片都和active.xpm图片相同。
对于所有的inactive.png，事实上，我现在做主题有点偷懒了（以前比较勤劳，都会特意去做一个不一样颜色的窗口，就是把前面的第一、二、三、四步重新走一遍，包括xpm底图都重新做，做法和做active窗口是一样的）。现在，我常常只是简单地给每张active的图片蒙上一层半透明的灰色存成inactive就行了。
对于这个范例主题，虽然我不想偷懒，但我想了半天，决定还是蒙灰色，因为active窗口是黑色的，用别的颜色的inactive窗口实在是不合适，不管换什么颜色都有可能喧宾夺主，不好看。所以，还是蒙灰色算了，让inactive窗口暗淡一些就可以了。
蒙灰色很简单，打开png图片加个图层用灰色全部填充，把图层不透明调一下，像这个主题，我用灰蓝色，不透明度是30. 然后保存成同名的inactive.png就可以了。做这一步只需要注意两点：
（1）所有的png图片必须蒙同样的颜色、不透明度必须要完全相同，不然窗口就会出现不能衔接的现象。
（2）对于按钮来说，inactive窗口的按钮是没有pressed状态的（因为你用鼠标点到inactive窗口的按钮的那一瞬间，inactive窗口已经变成了active窗口），所以只要简单地把所有9个按钮的active.png蒙上灰纱就可以了。pressed.png不用管。
把所有的png图片都蒙上一层（除了按钮的pressed状态的图片），保存文件，重置主题，出来是这个效果：
http://www.lucky8k.com/attachments/20100819_65d027ade96732c716bbOFtOpLVtbQG7.png
前面的“设置”窗口是active的，比较鲜明，后面的rox窗口是inactive的，比较灰。
好了，本主题的全部图片都做完了。
第六步 参数设置
xfwm4的参数设置非常简单。一般来说，拿个默认主题的themerc文件做模板，稍微改几个参数就可以了。并非每个参数都是需要你自己去写，如果themerc里面没有定义，就会跟着默认走，所以，如果你觉得效果可以了就可以不管，我也不是每个参数都懂的，需要用到了才会去尝试。
一般有如下这些：
button_offset=0
#定义按钮离边沿的距离，单位是像素。如果设置为0，在我设置的这个窗口里，menu按钮会直接顶在最左边，而close按钮会顶在最右边。
button_spacing=0
#定义按钮之间的间隔，单位为像素。
full_width_title=false
#定义标题文字栏的宽度，ture/false. 如果这里定义为true，那么title-1和5都没有意义了，2、3、4三张图片占满，直接顶到两端的按钮。
title_horizontal_offset=0
#定义active窗口标题文字的左右位移，单位为像素。
title_vertical_offset_active=0
#定义active窗口标题文字的上下位移，单位为像素。这个参数很常用，因为在做一些特殊效果的标题栏时，有时候不希望标题文字在正中。
title_horizontal_offset_inactive=0
#定义inactive窗口标题文字的左右位移，单位为像素。
title_vertical_offset_inactive=0
#定义inactive窗口标题文字的上下位移，单位为像素。
title_shadow_active=true
#决定是否需要active窗口标题的文字阴影，true/false/frame.
false：不需要阴影
true：一般常见的阴影，也就是在文字笔画右边和下面有阴影。
frame：阴影色把文字笔画的四周都围上。
title_shadow_inactive=true
#决定是否需要inactive窗口标题的文字阴影，true/false/frame.
active_text_color=#1B96C0
#active程序窗口标题文字色。
inactive_text_color=#000000
#inactive程序窗口标题文字色。
active_text_shadow_color=#585E66
#active程序窗口标题文字阴影色。
inactive_text_shadow_color=#BDBFBE
#inactive程序窗口标题文字阴影色。
title_shadow_active=frame
# active程序窗口的标题文字阴影整个框起文字。
shadow_delta_height=0
shadow_delta_width=0
shadow_delta_x=2
shadow_delta_y=2
#上面4个参数是定义程序窗口的阴影的位移和大小的。前两个是分别定义x和y方向的阴影的宽度，后两个是位移。当然，前提是你的显卡支持cmposite（最近10年以内的主流显卡一般都支持），可以显示阴影和透明。如果统统设置为0,仍然会有阴影（如果你在“窗口管理调整”的“混合设置”里已经设置上了），会显示默认的阴影宽度，没有位移。
show_app_icon=true
#定义menu按钮上是否显示程序的图标，true/false。如果没有这个参数定义，默认是不显示图标的。
#button_layout=O|HMC
#定义按钮的排列顺序。这参数新版的xfce已经不用了，因为可以在界面由用户自己定义，这样更友好。但一些老的主题还会有这个参数，一旦这个参数定义了，用户在设置界面就不能自定义按钮了，所以，这种定义行一旦发现，一定要注释掉。类似的参数还有：
#resize_opacity=100
#move_opacity=60
#popup_opacity=90
#这三个是定义窗口不透明度的参数。如果这里定义了，界面定义就不起作用，所以，也要坚决干掉。
好了，就这么多了。这个xfwm4主题做完了。
最后，要看一下效果了。这个主题的名字是MetalNavy，但是从xfwm4主题上几乎看不到任何蓝色，因为，我通常会在做xfwm4主题的同时做一个与之相配的gtk主题，常常是两边来回做，这样能让程序窗口内外比较协调。对于这个主题，蓝色主要在gtk主题里：
http://www.lucky8k.com/data/attachment/album/201012/14/050237c96661zck9m177dc.png
大功告成。
对于能读完如此枯燥乏味的长帖的同学是应该有奖励的，所以：
http://dl.dbank.com/c0ae8w1v3a
里面有这个xfwm4和gtk主题，解压到主题目录即可。主题目录里还包括所有我做图时存下的.xcf图片分层文件，便于学习画图的同学参考。
:39) 美女版主写教程了，顶
:83) 辛苦楼主了，收藏先。 累死我了，我去晕会儿先。 需要几次、十几次地修改、重画，每改一次都需要重载主题看效果
:47) ,辛苦楼主了:83)
页:
[1]
2