icewm主题制作之二 - 程序窗口制作

perryfa

icewm主题制作之二 - 程序窗口制作（1）

1。 基本知识

icewm程序窗口结构：
图一

                               
登录/注册后可看大图

上图是icewm主题程序窗口的基本结构。
（1）icewm的程序窗口有两种类型，active（激活）和inactive（非激活），也就是你正在使用的程序窗口和被压在下面暂时不能用的程序窗口。
（2）icewm主题窗口有两个部分，边框和标题栏，上图中红色部分为边框，蓝色部分为标题栏。
（3）上图每个小方框里的字符是图片的命名规则。
   frame：边框
   title：标题栏
   T：top 顶部
   B：bottom 底部
   R：right 右边
   L: left 左边
   ？：可为“A”或者“I”，分别表示Active激活和Inactive非激活窗口。
   fill:蓝色标题栏中有些项带有这个标记，表示该图片是可以变化大小的，如果你的程序窗口开得大，则这些图片就会拉宽，而没有fill字样的图片是固定大小的，你做多大icewm程序就显示多大。红色部分其实也有部分是变化的、部分是不变的，但图中没有标出来。
   text: 蓝色标题栏中有这个字样的项目，表示icewm显示程序窗口时，会有文字加入。
至于上图中白色部分，表示程序窗口的内容部分，在veket里，这部分由gtk主题来定义，例如里面的窗口背景色、文字颜色、标题栏背景、按钮、滑动条等等。

icewm程序窗口的尺寸定义：
也就是上图中，红色、蓝色部分图片的尺寸，由default.theme文件定义。

注意：程序窗口的大小是可变的，也就是说，你不可能往上贴一张美奂美仑的图片就完事，因为构成程序窗口的图片会随着用户在使用中缩放程序窗口而发生变化，或者变得很宽、很高，或者变得很窄、很矮，所以，和工具条制作一样，程序窗口制作也要考虑图片的拼接、剪裁、缩小、放大问题。

制作程序窗口的一般顺序：
我这里介绍的是我自己的做法，我不知道别人怎么做，因为我没读过任何icewm主题制作的教程或者体会之类的文章，一切的一切都是自己摸索的。
（1）首先要想想做一个什么样外形的程序窗口，这是你策划的主题风格决定的，边框是圆角还是方角，标题栏是宽还是窄，颜色怎么搭配，按钮用什么风格，这些需要事先规划一下。
说几句闲话，因为这类问题问我的人太多，我无法一一作答。美观是没有一定之规的，圆角并不一定比方角好看，亮晶晶可能不如灰扑扑有气质、有内涵，鲜艳的、柔嫩的颜色也许让人视觉兴奋或者舒服，但也有可能看上去俗不可耐。一切的一切都是风格的代言，任何一个元素都应该是风格的表达者而不是破坏者。而风格是个微妙的东西，做一个窄小的标题栏并不一定会让你的窗口显得精致，而宽大的标题栏也并不一定能显出大气来。初学者对于风格的把握可能是无能为力的，所以，不要奢望第一次就能创作出让人眼前一亮的主题来，模仿是精进的必经之路，我一开始的主题都自称“山寨版”，说白了就是模仿、抄袭、改头换面，到现在做了几十个主题了，我也还不敢说什么“创作”，我认为我不具备“创作”的美术素养。
（2）根据确定的风格，在default.theme里定义窗口尺寸参数，以及按钮排列等。
（3）制作标题栏和边框的顶上部分。一般情况下，这两个部分应该一起做，因为需要考虑整个窗口的协调。而且，需要的话，我会连GTK主题的一部分都一起做。像这个窗口：
图二

                               
登录/注册后可看大图

icewm的窗口标题栏、边框和gtk主题的标题栏是一起做的，边角部分都是做成一张大图然后切割的。窗口背景刻意做成薄薄的一片纸、没有立体感、没有边框，icewm和gtk主题之间没有任何分割的感觉，浑然一体。
（4）制作按钮及边框的左右上部边角。这是个大活，如果认真地做，光标题栏两边的按钮就需要做21张图。
（5）制作窗口边框的左右和下面部分。
（6）定义文字颜色。

2. 范例主题风格策划
我要做的这个范例，是粗犷的、黯哑的，所以，精致、靓丽的元素基本不用。
基本色调是黑色绿色，辅以灰色。
需要一些立体感，但圆柱形、球形基本不用。窗口不做圆角，方的，带铆钉。
按钮不做精致型，用简约的。
标题栏及边框尺寸比一般的主题稍大一些。

3.文本定义窗口参数

打开default.theme，在下列参数中设定：
（1）窗口尺寸
# 标题栏高度
TitleBarHeight=24
# 边框宽度
BorderSizeX=6
BorderSizeY=6
这样，整个窗口上部会有30像素高。
# 边角尺寸
关于边角的做法有两种。
从图一可见，在窗口的四角，红色的边框是L型的图片，例如左上角，frame?TL图像除了角落，还可以延伸到右边一段和下面一段。大部分我做的主题都用这种做法，例如：
图三

                               
登录/注册后可看大图

定义是这样的：
# 改变窗口大小时的边角宽度（像素）
CornerSizeX=31 # 0-64
# 改变窗口大小时的边角高度（像素）
CornerSizeY=31 # 0-64

但这次我用另一种做法。这是我使用的模板Perryfa-rusted主题的做法：
CornerSizeX=6
CornerSizeY=6
表示转角是一张6x6的图片。在窗口上显示的其实就是角落里的一个点。类似这样：
图四

                               
登录/注册后可看大图

就是上图中选择框选出来的部分。这种做法比较简单轻巧。当然，花样少些。

（2）标题栏定义
# 标题栏文字位置
TitleBarJustify=50 # 0-100
# 标题栏文字水平移动
TitleBarHorzOffset=0 # -128-128
# 标题栏文字垂直移动
TitleBarVertOffset=-2 # -128-128

文字移动参数可以是负数，水平移动为负数表示左移，垂直移动为负数表示上移。

（3）按钮定义
按钮的做法比较随意，在图一中可以看到，在窗口的标题栏有两处放按钮的地方，左边和右边。其实这个图可能有点老了，左边它只写着menuButton，事实上，左边那块地方你放什么按钮都行，放几个按钮都行，并非限于menuButton。如果你使用过MAC习惯的主题，那么你就知道，左边完全可以放三四个按钮。
一切都基于你在default.theme里的定义。
这是我做的一个主题的按钮排列方式，这个范例我打算沿用这种：
图五

                               
登录/注册后可看大图

总共是五个按钮，左边一个，右边四个。我准备做5个按钮位置，7种按钮。
文件定义：
# 主题支持的按钮 (x, m, i,r, h, s，d)
TitleButtonsSupported="sxmirhd"
# 标题栏左边按钮定义为 s=sysmenu 即系统按钮
TitleButtonsLeft="s"
# 标题栏右边按钮从右到左定义为：x, m, i, r，即关闭、最大、最小、卷起。
TitleButtonsRight="xmir"
在定义里，你看到我定义了5个按钮位置，左一右四，那为什么说是7种呢？因为，有两个按钮位置是需要放两种按钮的。
m - 最大化按钮，当你最大化窗口以后，还需要恢复对吧？所以，在这个位置，如果已经是最大化程序窗口，就呈现“恢复”按钮，如果是一般程序窗口，就呈现“最大化”按钮。
r - 卷起按钮。既然有卷起就会有放下，所以一定是一套两款按钮，一般窗口呈现“卷起”按钮，卷起后的窗口呈现“放下”按钮。

还有两个按钮，我基本不做的：
隐藏按钮：标识为“h”，图片名称为"hideA.xpm, hideI.xpm, hideO.xpm"，我只用过一次，觉得不太符合使用习惯，一直都不用。
提升/降低按钮：标识为”d“，图片名称为"depthA.xpm. depthI.xpm,depthO.xpm"，这个按钮我做出来试用过，就是提升、降低窗口在桌面上的层次。感觉不是很必要，对压在下面的窗口，我们已经习惯点一下窗口的任意一部分它就会自动跳到最上面显示，似乎没必要专门去做个按钮。
如果你觉得需要这两个功能，那么你可以点程序窗口左上方的系统菜单按钮，选择”隐藏“、”降低“、提升”、“层次”这几个选项来实现。

每个icewm按钮都有三张图片，文件名用大写的A、I、O标识，分别用于
A：Active窗口显示的按钮
I：Inactive窗口显示的按钮
O：鼠标移到按钮上时，按钮变化的图像
而且，这三张图片每张都有上下两个图像，用于操作按钮时，按钮动画显示，其实就是让按钮从显示上面的图片转移到显示下面的图片，看起来好像按钮在动了。
对于O这个功能，需要特别的参数在default.theme里去enable它：
RolloverButtonsSupported=1 # 0 / 1

defaule.theme对程序窗口的定义并不只有这些，还有一些涉及颜色，那些参数要等做完图片才能定义，不然你就看不出效果来，做了也是白做。


(待续......)

perryfa

4. 制作Active程序窗口的标题栏和上部边框
使用图片：
Active窗口标题栏：titleAJ（L、S、P、T、M、B、R、Q）.xpm。九张图片。
边框顶部使用图片：frameAT.xpm
制作标题栏和制作工具条一样，需要考虑图片的缩放、裁切问题。
一般的主题做标题栏都比较简单，用一个像素宽的图片一拉伸就可以了，做一张小图片，像titleAB.xpm，然后连接到别的图片，就搞定了。例如图五的标题栏，只有三张图片是特别做的：titleAP.xpm，titleAT.xpm，titleAM.xpm，是用来做标题框的。其他的6张就是一张图片做的连接，全一样。
但是我们这个主题稍有不同，因为我们要做纹理。这在icewm是有点麻烦的，你不可能用一张大图切成9段往上一贴，不行的，因为窗口会缩放，纹理会接不上，结果看起来是一段一段的，很难看。你也不能用一张小图片连接到任何位置，那就谈不上纹理了。
这种事反正就是多尝试，一遍一遍地切图、看效果。

标题栏背景和上部边框
标题栏背景是两张图片：titleAB.xpm和titleAS.xpm
上部边框是：frameAT.xpm
我从壁纸底部切了这么一段：
图六

                               
登录/注册后可看大图

我仔细研究了一下这壁纸的下部条，发现这一段是可以重复的，也就是说，这段图片左右两端的纹理、颜色、亮度是可以接续的，不会有一条明显的分界线出现。这就省了我自己去加工图片的时间了，通常做这种接续，我不得不把图片拷贝、翻转，让左边沿接右边沿，然后放在一起做处理，处理完了在把图片分开，把处理过的右边和左边剪贴回原图。稍微有点麻烦的。但为了这么有质感的纹理，值得。
切出来的图片再做一下处理，去除边角的杂质，缩小高度到30像素（先前我们定义的），一段素材就做好了：
图七

                               
登录/注册后可看大图

矩形选择这个图片的上部6个像素，复制、粘贴为新图像，另存为：frameAT.xpm.这就是Active程序窗口边框的上部。
选择 - 反转，选择图片的下部24个像素。复制、粘贴为新图像，另存为：titleAB.xpm，并在ROX-Filer里连接到titleAS.xpm（这俩图片是对称的一对）。
刷新主题，效果如下：
图八

                               
登录/注册后可看大图

看最下面的窗口比较清楚，接续还算自然。我把窗口缩放了一下，大到最大、小到最小，看上去都没太大纰漏。

Active程序窗口标题框
现在做标题框，或者叫托板，就是让程序窗口的标题显示的地方。共有三张图片：
titleAP.xpm，titleAT.xpm，titleAM.xpm
AP和AM分别为标题框的左右边沿，AT是主体。这个分法是很有道理的，AP和AM两张图片是不会缩放的，它固定不动，而AT是可以缩放、拼贴、剪切的，这样无论你的程序标题是长是短，标题框都能适应，整体外形看上去是一样的。
简单的主题是可以不做的（当然，任何图片都可以不做，缺失的图片icewm都会自动提你找到替代品，好看难看那你就不要计较了），直接连接titleAB到这三张图片就行了。不过我打算认真做一下。
如果只考虑这个案例，我完全可以把Perryfa-rusted主题的标题框图片拿来，风格是完全一样的，只要把颜色调深一些、亮度放暗一些，效果不会差。但是，作为演示案例，还是做一个吧。
我先把我想要的素材作为图层打开到同一个图里，有：
taskbuttonactive.xpm 就是工具条上那个绿色的按钮
taskbuttonbg.xpm 工具条上的一般任务按钮
我从taskbuttonbg.xpm里取我的背景，就是这样：
图九

                               
登录/注册后可看大图

我切了颜色最深的2个像素宽的一段，复制粘贴为新图层（上图左边那一小条）。然后把这2个像素的图层放大为26像素宽作为背景（大小无所谓，每个图层都可以随时缩小、放大的，我只是觉得大一点做起来比较舒服）。
从taskbuttonbg.xpm里用椭圆选择器切了一个黑色小铆钉，缩小为4x4像素，放在背景图里：
图十

                               
登录/注册后可看大图

缩放合适后，就可以复制多个铆钉作为新图层，调整位置合适，放上去：
图十一

                               
登录/注册后可看大图

铆钉的位置摆放要注意，要想到拼接的可能，也就是左边和右边空出来的区域，宽度之和应该和中间两个铆钉的间隔相同，要算一下。不然出来的铆钉就不匀了。
然后，从taskbuttonactive.xpm里切了便于拼接的（也就是左右边沿是可以无痕接续的）一块,宽度为26，复制粘贴为新图层，结果就是这样：
图十二

                               
登录/注册后可看大图

把这个图层放到先前做好的背景中间去（两排铆钉之间），缩小高度为13,结果就是这样：
图十三

                               
登录/注册后可看大图

看上去还行，用矩形选择框选出我要的26x24的区域，然后：
编辑 - 复制可见，编辑 - 粘贴为 - 新建图像
存盘为：titleAT.xpm
注意，一定要“复制可见”，否则gimp只会复制你选中的图层，不会把你看到的所有图层都复制下来。

在继续做标题栏左右两边框之前，先把刚才用来做titleAT.xpm的那个文件存成titleT.xcf（自己起的名字，与icewm定义的文件名无关），因为那个图里有多个我需要的图层，而且，titleAT.xpm也完全有可能需要修改（做Inactive窗口的titleIT.xpm也可能要用的），总之就是存下可变动的素材，给自己留下一个反悔的机会。通常我对比较复杂、图层较多的图都会留下xcf文件，以防万一。

先做左边的边框：titleAP.xpm
点掉不用图层的小眼睛，剩下背景和铆钉。
复制一个铆钉放在左边。
因为是做左边，而从一开始我就已经确定光源是来自左上方向，所以左边的边框应该比较亮，所以在左侧边加一条淡灰色的亮条（新图层，高度24,宽度1），在这种比较暗色的图片里，就算要加高亮也不要加纯粹的白色，那样会很突兀刺眼，甚至会失去光线的感觉。
图十四

                               
登录/注册后可看大图

把原先的绿色图层做个副本，即在图层窗口点绿色图层，鼠标右键菜单选择“复制图层”，这是因为我不想在titleAT.xpm需要用的图层上做任何修改，那样万一需要修改就没有那么随意了。让这个副本图层显示，用矩形选择一块区域清除颜色，就是这样：
图十五

                               
登录/注册后可看大图

最后在绿色图层边上也加上亮光条（新图层，高度13,宽度1）：
图十六

                               
登录/注册后可看大图

这个亮光条的制作可以采用混合工具来做。点工具箱的混合工具，选择一个亮灰色和一个深灰色做前景色和背景色，选择形状为“对称线性”，点该图层的中间偏上部位，然后拉向一个边沿（上或下），只需要拉一边，另一边就对称填充上了。如果不是中间亮两边暗，那你就去工具箱下部，点一下“渐变”右边的那个“反向”的钮，再拉一次就行了。
选择一块需要的图形，复制可见，粘贴为新图像，存为：titleAP.xpm.

最后做右边框：titleAM.xpm
还是在同一个文件，点掉两个亮光条，以及铆钉。因为右边应该是背光面，非但不能用亮光，反而要加暗色条阴影。而铆钉，暂时我不要它们显示。
把剩下两个图层，背景和绿色条。用矩形选择框选择、复制可见、粘贴为新图层。
选择新图层，点图层 - 变换 - 水平翻转，出来就是这个样子：
图十七

                               
登录/注册后可看大图

右边是原来的图层，背景和绿色条是两个图层。而左边是一个图层，是刚才复制可见并翻转过来的，我们用这个图层做右边框。
移动这个新图层和原图层重合，关掉原图层背景和绿条。重开铆钉显示，移动刚才左边最后添加的铆钉到右边合适位置，结果就是这样：
图十八

                               
登录/注册后可看大图

为什么不把铆钉和背景及绿色条一起复制呢？那样会简单很多。因为，铆钉上有光，光是有方向性的，翻转了图形，来光的方向也翻转了，这样就乱了。所以，我不得不先关闭铆钉们的显示，复制可见，然后把新图层放回原来的位置，再打开铆钉们的显示......
现在要做的只是往右边加一些阴影而已，和上面一样，只不过是暗色条，边框上加一条，绿色边沿加一条。
图十九

                               
登录/注册后可看大图

从图从矩形选择我要的部分，复制可见、粘贴为新图像，存为：titleAM.xpm
标题框的样子就是上图的模样，从图上你看不出是费了这么大劲才做成的。

(待续......)

[ 本帖最后由 perryfa 于 2009-4-30 20:54 编辑 ]

perryfa

5. 制作Active程序窗口的按钮

首先看一下我们要做哪些图。
左边角：
system按钮：menuButtonA.xpm, menuButtonO.xpm
按钮右边的边条：titleAL.xpm
按钮左边的边条：titleAJ.xpm

右边角：
关闭按钮：closA.xpm, closeO.xpm
最大化按钮：maximizeA.xpm, maximizeO.xpm
恢复按钮：restoreA.xpm, restoreO.xpm
最小化按钮：minimizeA.xpm, minimizeO.xpm
卷起按钮：rollupA.xpm, rollupO.xpm
放下按钮：rolldownA.xpm, rolldowmO.xpm
按钮右边的边条：titleAQ.xpm
按钮左边的边条：titleAR.xpm

总共18张图。 几张title打头的图在一般的主题制作中是不需要和按钮放在一起做的，它们通常是和别的title打头的图片一起做，甚至就是做个连接了事。但因为我们要做的程序窗口是有纹理的，所以就会有纹理拼接问题，所以我把它们放在一起做，这样纹理的拼接比较自然顺畅。
另外，有两张图，就是frameATL.xpm和frameATR.xpm，我在前面讲过，边角有两种做法，如果是采用那种拐角L形的，那么就应该在这里做，因为需要和按钮等图片配合起来看效果。但是因为我这次采用了另一种简单做法，图片太小了，对边角效果影响不大，所以就放在后面做，这一节已经太复杂了。

（1）左边角制作

按钮的制作，我想和标题栏一样，钉块深色铁片上去，上面有按钮，acitve窗口是绿色按钮，inactive窗口是黑色铆钉按钮。

titleAL.xpm：
从titleAM.xpm右边复制粘贴8x24的图片，另存为titleAL.xpm就行了，很简单：
图二十
[img]

                               
登录/注册后可看大图

[/img]

titleAJ.xpm：
这个就稍微麻烦一点，因为我不想让左边的铆钉条直接靠在边框上，所以要留至少一个像素的空隙，这一个像素也不能空着，必须要有东西填充，所以我从titleAB.xpm里切了一条放在最左边，再从tilteAP.xpm左边切8x24，就是这样：
图二十一

                               
登录/注册后可看大图

存成titleAJ.xpm就可以了。

menuButton按钮：

menuButtonA.xpm:
从先前存好的titleT.xcf里拷来带铆钉的铁片图像，做成24x24大小。再把画布扩展成24x48：
图二十二

                               
登录/注册后可看大图

拷贝上面这个图层，粘贴为New Layer，用拖动工具拖到下面来，这样一个按钮的背景图就做好了，这个背景将用于所有按钮，所以，是很有效率的东东哦。
这个图将会发展成很多图层，千万不要做完一个按钮就关闭，一定要存成xcf文件。
图二十三

                               
登录/注册后可看大图

现在要往上加按钮，Active窗口我加绿色按钮。
还是从壁纸里切一块（壁纸就是我的素材库了），大一点没关系，120x120的圆，逆时针旋转90度，加上边沿的阴影，即周边用径向混合填充填上淡灰色到黑色，再点滤镜 - 光源和阴影 - 光照效果，调整一下光源的方向、强度、亮度之类的，给这个圆加上一束光，这样：
图二十四

                               
登录/注册后可看大图

然后分别缩小到13x13和20x20贴到按钮里去：
图二十五

                               
登录/注册后可看大图

存为menuButtonA.xpm.

menuButtonO.xpm:
直接用menuButtonA.xpm下面的20x20大按钮，复制粘贴为新图层，放在上面：
图二十六

                               
登录/注册后可看大图

存成menuButtonO.xpm。在上图中已经可以看见整个左边角的状况了。
把这个包含了背景、按钮等等的图像存成button.xcf文件，待会儿做别的按钮一直都会用到。

（2）右边角制作
按钮右边的边条：titleAQ.xpm
按钮左边的边条：titleAR.xpm
这两张图的做法和上面的AJ、AR相同，如果不是考虑光线的问题，甚至可以直接水平翻转使用。但是，为了细微的光线也能正确地照耀，我还得一张一张做。不过很容易。
titleAR.xpm可直接从titleAJ.xpm做个连接就行了。效果不会有问题。
titleAQ.xpm，需要在titleAR.xpm右边加一条一个像素宽的隔离带，直接从titleAB.xpm上复制一条贴在右边就行了。
至此，titleA打头的图片全部做完了。

关闭按钮

背景已经有了直接打开先前存下的button.xcf，点去不用的图层，只留下背景。
现在，我们需要按钮。
理论上，按钮是最容易做的，任何你觉得不错的按钮，只要你能拷下来图片，都可以切下来作为你的主题的按钮，而且，按钮的颜色如果不是特别艳丽突兀，一般来说稍微花哨一点、和主题颜色不太协调一点看着也不太显。毕竟一般用户都有“按钮就是红红绿绿的”这样的心理预期。
不过，我通常不肯用臭大街了的什么vista按钮。这个案例，我们做个特别的，把右边4个按钮做成一体的，其实只是演示一种方法。

先找一个连成一体的按钮，可以用工具条按钮，也可以用我们刚做好的标题栏的绿色部分。我就用taskbuttonactive.xpm做吧。
打开taskbuttonactive.xpm，矩形选择复制我们要的部分，粘贴到新图像，并缩放成我们要得尺寸。我们需要多大的尺寸呢？
我用这样的算法，一共4个按钮，每个按钮是24宽，但是一头一尾两个按钮要窄一些，算它一半宽吧，那总共就是72像素宽，高度就是我们先前做标题栏已经知道的，13像素。素材就是这样了：
图二十七

                               
登录/注册后可看大图

矩形选择上图最右边的12像素宽的一条复制，到button.xcf文件里粘贴为New Layer。贴两次，上下各一个
图二十八

                               
登录/注册后可看大图

如果仔细看上图，可以发现，其实下面的按钮和上面那张有点不太一样，因为我加了一些黑色条子上去，为什么？因为下面张图是用来给你点这个按钮时的动画用的，我在周围加了一圈的黑色条子，尤其是上方加了两个像素宽，目的是为了让你点按钮时有一种按钮下陷的感觉。像这种一排按钮连成一体的做法，一定要做这种效果，不然按钮按下去一点变化都没有，感觉很不好。
另存为：closeA.xpm
用矩形框出下面加了黑条的整个按钮，复制可见、粘贴为New Layer，放在上部。这个图用于你移动鼠标上按钮时的显示，这样的做法是让你的鼠标一移过去，按钮马上下陷了。图就是这样：
图二十九

                               
登录/注册后可看大图

另存为：closeO.xpm
Active窗口的关闭按钮做完了。

从右边挨个往左边做，下一个是
最大化按钮
回到我们的绿色按钮素材图，刚才做关闭按钮已经选择了12像素宽的部分，拷贝走了，但是，12像素宽的选择区域还在，对吗？那么，现在我们直接在图上：
选择 - 反转 （选择除了那12像素宽的条子以外部分）
图像 - 剪裁到选区 （让图像和选择区一样大，没被选中的部分就被清除掉了）
这样做关闭按钮用过的最右边12个像素的图像就没有了。我们可以继续从最右边选择24个像素给最大化按钮。这个方法适用于所有你想用很多小图拼出一个整体效果的场合，绝对不会有图像用重复了、或者漏掉某一块没用上的事情发生。
图三十

                               
登录/注册后可看大图

复制，粘贴到按钮文件，先前关闭按钮用的图层可以关掉了，现在是这个样子：
图三十一

                               
登录/注册后可看大图

另存为：maximizeA.xpm
和关闭按钮一样，我也在下面部分的按钮周围加了一圈黑色，其实我是做了横竖4个黑色的条，它们分别在不同的图层，可以被随意移动，做每个按钮都用这四个条挪来挪去覆盖在图层上就行了。这就是多图层操作的好处。
miximizeO.xpm的做法和上面一样，就不多说了。

接下来是
最小化按钮
和最大化按钮的做法完全一样，也是先去切素材图片，然后拷下右边24宽的图片，然后存为minimizeA.xpm和minimizeO.xpm
图三十二

                               
登录/注册后可看大图

卷起按钮
rollupA.xpm和rollupO.xpm
图三十三

                               
登录/注册后可看大图

这些基本就是重复劳动了。

还有两组按钮没做，
放下按钮：rolldownA.xpm, rolldowmO.xpm
恢复按钮：restoreA.xpm, restoreO.xpm
放下按钮直接从卷起按钮做连接，恢复按钮直接从最大化按钮做连接，这种做法几乎是常规。

按钮们最后的效果就是这样：
图三十四

                               
登录/注册后可看大图

看上去还有很大的修改余地，绿色部分如果稍微拉宽一点，可能效果更好。

好了，最麻烦的事情已经做完了，接下来虽然还有不少事情，但都很容易了。

（待续）

[ 本帖最后由 perryfa 于 2009-4-30 03:45 编辑 ]

perryfa

6. Active 窗口程序边框制作
目前为止，关于程序边框我们只做了一张图片，就是最顶上的frameAT.xpm。
现在我们做其他的部分。
需要的图片有：
左右上角边框：frameATL.xpm, frameATR.xpm
左右边框：frameAL.xpm, frameAR.xpm
左右下角边框：frameABL.xpm, frameABR.xpm
下部边框：frameAB.xpm
总共7张图，不多，也很好做。

（1）左右边框
我们先前已经定义了边框是6个像素，所以左右边框的图最大只能是6像素宽，多了就看不见，少了就会出现透明。
注意，程序窗口的制作和工具条按钮有点不同，如果你做的任何图片出现不透明度低于50的情况，icewm程序直接判定你为全透明，如果不透明度高于50,直接显示完全的不透明。也就是说，全透明是可以的，我在M4主题里的主窗口标题栏就有一些部位是全透明的。所以，想借助程序边框做阴影，让程序窗口凸出桌面是不可能的，因为阴影是需要渐变的透明度的。
回到左右边框，通常左右边框都是用很小的图片，甚至是有用1x1的，因为边框那么几个像素，想做效果很难。
在这个范例，我想做个带小铆钉的边框。铆钉先前我已经用过了多次了，是4x4大小，所以，还有一点点余地。事实上，我一开始用6像素的边框就是算好了的，我事先把小铆钉缩放看看了效果，发现最小也只能是4x4了，所以边框最小也得有6像素。一般的边框我用4像素，精致简约的我甚至用1-2像素，如果不是为了特别的效果，我不太愿意用6像素的粗边框。
先从titleAB.xpm里复制一块30x6的的图片，粘贴为新图像，旋转图像90度，成为6x30的竖条。

左边框：frameAL.xpm
从先前的xcf文件里复制来小铆钉贴入图片成为新图层。
为了让侧边框有立体效果，我新加了两个图层，灌入深浅两种颜色（颜色都是从背景里直接取的）。因为一开始就确定了光是从左上方来的，所有图像都是按照这个预设来做的，所以，这里也应该一样，高光浅色条在左边，暗影深色条在右边：
图三十五

                               
登录/注册后可看大图

存为：frameAL.xpm

右边框：frameATR.xpm
完全不用重新做，只要从把左边框图片连接过来就行了，光影效果都是对的。

（2）四个边角
因为我选择了比较简单的边角做法，所以，四个角的图片是完全一样的，而且只要直接从左右边框里复制过来就行。
图片的尺寸是6x6,这个我们先前设定好了。
从frameAL.xpm里复制6x6大小的一块图片（包含小铆钉），粘贴为新图像：
图三十六

                               
登录/注册后可看大图

另存为frameATL.xpm。
用ROX-Filer把frameATL.xpm连接到：frameATR.xpm，frameABL.xpm，和frameABR.xpm。
搞定。

（3）底部边框
就一张图片：frameAB.xpm
通常这张图片会很小，以这个范例的边框宽度，如果不要纹理，1x6就行了。可是，我还是想要纹理，所以就从titleAB.xpm底下整个复制了一条279x6的图片，粘贴为新图像，又在上部和下部各贴了一个1像素高的浅色和深色长条做光影效果，上面的是浅色，下面的是深色，因为光是从上面来的：
图三十七

                               
登录/注册后可看大图

存为：frameAB.xpm

从上图下部可以看出， Active程序窗口的各个部分已经完整。

7. Inactive程序窗口的制作
原则上来说，制作inactive程序窗口和active一样，应该是从头做一遍的，我很多主题都是使用不同的窗口颜色来区分active和inactive窗口，其实就是做两套完整的窗口图片。不过作为教程就没有什么必要了。而且，大多数主题的inactive窗口和active几乎是一样的，绝大多数图片都是直接从相对应的active程序窗口图片做连接的。
但我还是想把这个主题做得正常一些，所以，我会对inactive窗口作少许改动，以示区别。同时也顺便介绍一下图片文件名，特别是与active窗口不一样的部分。

（1）标题栏和边框
标题栏的背景和顶部边框我不作改动了，所以，只需要直接做连接就可以了，事实上，我所使用的主题模板Perryfa-rusted已经对大部分图片做了连接，我只是检查一下就可以了，标题栏从左到右：
titleAJ.xpm，titleAL.xpm，titleAS.xpm，titleAB.xpm，titleAR.xpm，titleAQ.xpm
这六张图片分别连接到对应的：
titleIJ.xpm，titleIL.xpm，titleIS.xpm，titleIB.xpm，titleIR.xpm，titleIQ.xpm
边框完全采用连接的方式，不用改任何东西：
frameAT.xpm, frameAL.xpm, frameAR.xpm, frameATL.xpm, frameATR.xpm,frameABL.xpm, frameABR.xpm, frameAB.xpm
总共8张图片，连接到各自对应的图片：
frameIT.xpm, frameIL.xpm, frameIR.xpm, frameITL.xpm, frameITR.xpm,frameIBL.xpm, frameIBR.xpm, frameIB.xpm

剩下三张：titleAP.xpm，titleAT.xpm，titleAM.xpm （标题框）我是要改的。
打开先前存下的titleT.xcf，把所有和绿色有关的图层都关了，调整各个图层的显示与关闭，就能得到下面的结果。复制可见、粘贴为新图像、另存为相应的文件名就可以了。

titleIM.xpm:
图三十八

                               
登录/注册后可看大图

titleIP.xpm
图三十九

                               
登录/注册后可看大图

titleIT.xpm
图四十

                               
登录/注册后可看大图

（2）按钮
Inactive窗口的按钮我是要重新做的，不过也相对会比较简单。
Inactive窗口的按钮图片有这些：closeI.xpm, maximizeI.xpm, minimizeI.xpm, restoreI.xpm, rollupI.xpm, rolldownI.xpm, menuButtonI.xpm。一共7张。
与Active窗口按钮不同，Inactive窗口的按钮没有鼠标移上去会出现变化这个功能，所以，类似closeO.xpm这类图片是没有的，只有closeI.xpm。
因为先前我已经存下了button.xcf文件，现在只要打开该文件，简单调整一下图层，加一个不同的按钮、存为不同的文件就行了。一点都不麻烦。
再次打开壁纸素材图片，从壁纸中切下一小块铆钉。虽然之前我们也用过铆钉，但那个已经被压缩成4x4的小图片，而且铆钉的阴影部分也被抹掉了，因为4x4的图片能看出是铆钉已经很不错了，阴影什么的就不能指望了。但用于按钮的铆钉是可以比较大的，高度可以达到13像素，所以就需要重新做。
通常，小图片放大是绝对不提倡的，如果有大一些图片，就一定要用大图片去缩小，4x4的图片放到13x13，那是根本看不清的。
把铆钉复制到button.xcf作为一个新图层，尽量清理一下铆钉周围杂质，上面的缩成13x13,下面的略微放大一点，到18x18，挪放铆钉到合适的位置。再把button.xcf文件里的图层整理一下，只显示我们要的内容。
另存为：closeI.xpm
如图：
图四十一

                               
登录/注册后可看大图

把closeI.xpm连接到所有带“I”的按钮图像：
maximizeI.xpm, minimizeI.xpm, restoreI.xpm, rollupI.xpm,rolldownI.xpm, menuButtonI.xpm
所有的Inactive窗口的按钮就都完成了。
在这里要强调的是，icewm主题里的图片名字里的每个字母都是需要严格遵守的，大小写都不能错，写错了程序就不认了。正因为这样，我可以随便往目录里保存我要的素材图片、xcf文件，例如button.xcf，只要文件名不和默认的名字重合就不会对主题有任何影响。

8. 标题栏文字在default.theme里的定义
对于程序窗口，我们只剩下一件事情，设置一下标题栏的文字颜色。现在标题栏的图片都做好了，设置文字颜色的工作就可以做了，效果可以随时刷新主题来看。

一般来说，我会做成文字颜色较浅，阴影颜色较深，文字就会有突出表面的感觉。这个主题的Active窗口的标题框做得比较复杂，或者说比较乱，而且已经是很暗的黑绿色，所以，无论怎么设置阴影的颜色，阴影都不会明显了。
# Active程序窗口标题栏文字颜色，白色
ColorActiveTitleBarText="rgb: fa/fa/fa"
# Active程序窗口标题栏阴影色，黑色
ColorActiveTitleBarShadow="rgb:00/00/00"

在Inactive窗口，我通常会把文字做成下陷的效果，好像字是刻在标题栏上的。
做起来很简单，其实只要让文字颜色比标题框深（一般用同色的深色，纯黑色不一定有好效果，除非像我们这个主题一样，背景色已经太深了），而阴影比标题框浅（一般也不要用白色，尤其是暗色背景的标题框，白色太过刺眼效果不好），效果就能出来了。想像一下在地上挖一条沟，阳光照在沟上的感觉，沟底是暗的，沟沿是亮的。
# Inactive程序窗口标题栏文字颜色,黑色
ColorNormalTitleBarText="rgb:00/00/00"
# Inactive程序窗口标题栏阴影色，灰色
ColorNormalTitleBarShadow="rgb:92/8b/85"

还有一些其他定义，但由于我们的图片做得很彻底，都不起作用了：
# Active 程序窗口标题栏颜色
ColorActiveTitleBar="rgb:00/00/00"
# 一般程序窗口标题栏颜色
ColorNormalTitleBar="rgb:00/00/00"
# 一般程序窗口按钮色（没用）
ColorNormalTitleButton="rgb:00/00/00"
# 一般程序窗口按钮文字色
ColorNormalTitleButtonText="rgb:00/00/00"
......

最后，看一下我们的两个程序窗口吧，最复杂的部分做完了，值得庆祝一下：
图四十二

                               
登录/注册后可看大图

（完）

[ 本帖最后由 perryfa 于 2009-4-30 04:07 编辑 ]

tknj

大大幸苦了！！！终身受用！