|
|
我们先从最简单的开始做起 - 工具条。
首先，我们先了解一下在veket默认界面顶上的那个东西在icewm里面的名词和定义。
这个条我自己一般叫它工具条，有时候也叫任务条，toolbar or taskbar，其实这两个叫法都是对的。
在icewm里，顶条的左边部分（包含主菜单按钮、各种程序快捷方式小按钮、虚拟窗口按钮）合称toolbar工具条，因为它们提供了工具的功能。
右边部分，包含你打开的每个程序的按钮，和一些小窗口，统称taskbar任务条。也有些介绍文章里，称中间部分为taskbar，而右边那些时间、网络状态等等被命名为状态条，status bar，不过这种定义似乎不是官方的。
把名字搞正确对做主题很重要，搞清楚了名字，你对icewm主题里的定义文件中的参数、各种图片的用处，基本上就能猜个八九不离十了，例如taskbuttonbg.xpm，一看就是“任务按钮背景”的意思。
1. 做主题的准备工作
第一步当然是构思主题风格，颜色搭配等等，对于我要做的这个案例，我已经在这个帖子里（http://www.lucky8k.com/thread-64581-2-1.html）描述过了，原本想留着这个构思给tknj，但看起来他比较忙没时间，我就先做一个，同一个构思做多个主题也挺有意思的，这叫系列，哈。
第二步是找个模板，你当然可以从零做起，一张图一张图地做，做完了再看效果，不过我觉得这样太闷了，尤其对初学者，容易失去兴趣，而且有个模板便于你参考，例如图片格式、高宽等等。
我选用了风格靠近的Perryfa-rusted铁锈风格主题做模板。到目录/usr/share/icewm/themes/里面，把Perryfa-rusted目录整个拷贝成另一个名字，例如Perryfa-Fallout。
简单介绍一下主题目录：
主题目录都在：/usr/share/icewm/themes/下面，目录名就是你在菜单里看到的主题名。
进入某个具体的主题目录，例如Perryfa-rusted，你会看到在根目录下有很多.xpm格式的图片，这些图片是用于程序窗口和主菜单背景的，今天我们暂时还用不上，我们要做的是工具条。在根目录下唯一今天我们会用上的，是一个文本文件”default.theme“，我们需要修改这个文件里的一些设定来改变主题外观。
通常在主题目录下还有两个子目录：icons和taskbar，有些主题没有icons目录，例如这个rusted主题就没有。子目录并不是必须的，如果没有，icewm程序会使用默认的替代。
除了文本文件”default.theme"是在主题根目录，今天我们做工具条的所有图片都放在子目录”taskbar“里。接下来的教程中，如果我提到图片名、文件名，就不再提供路径了。
主题所使用的所有图片都是.xpm格式，即所谓的”像素图“。
现在，我们应用这个新的主题Perryfa-Fallout，桌面就是这个样子，什么都还没改呢。
图一
2.定义主题风格
icewm设计了一些固定的主题风格，例如gtk、pixmap、metal、nice、flat等等，每一种风格据说是不一样的，不过我琢磨了很多主题，发现工具条样式基本就是两种，metal和flat。
所谓metal，就是不管你做了什么样的按钮，程序都会自动给你加上一个按钮边框，像这样：
图二
边框的颜色是你自己可以定义的。
而flat，就是平的，你做了什么样的按钮图，程序就呈现什么，不会另加任何东西。
图三
我通常选择flat，原因是我不喜欢程序自作主张给我加任何东西，如果需要边框，我自己可以在按钮图片里画出来，画成什么样随我的心意，例如，我会画成这样：
图四
看上去按钮不是平的，是立体的，但选用的是flat风格，立体效果都是我自己画出来的。
所以，这个主题我也选用flat风格。
用文本编辑器打开default.theme文件，在文件的一开始有外观设定：
Look=flat
这就定义好了。如果要定义成其他风格，例如metal，那就直接把等号后面的flat改成metal就是了，我用的模板主题Perryfa-rusted就是采用metal风格的。
3.工具条背景
定义工具条背景的图片是：taskbarbg.xpm
Perryfa-rusted主题的工具条背景如图一所见。
它的工具条背景是一张24x28的xpm图片，而整个工具条都是用这个宽度为24像素的图片拼出来的。这样做的好处是图片小，启动很快。坏处是
（1） 我们目前的icewm不会缩放图片，所以，固定28像素高的图片不能自动适应你在prefoverride文件里定义的工具条高度，如果工具条高度设得比较矮，图片将被切掉一部分，工具条外观受损。如果高度设得比较高，图片不够大，就会在工具条下面出现一个奇怪的白条、绿条之类的，这一点，我们在升级2.1.1时都体验过了，当时我还特意写了个帖子解释的。
（2） 这样做出来的工具条背景没有整体效果，从左到右都是均匀一致的。
第二种做工具条背景的方法是，用一张甚至只有一个像素宽的图片来定义工具条背景，让程序去拉伸这张图片变成一个长条，我的M4主题就是这么做的，工具条背景是这样的：
图五
icewm程序默认是对图片实行拼接、剪切的，也就是说，无论高度或者宽度，只要你的图片不符合需要显示部位的尺寸，假设图片小了，4个像素宽的图片要拉出1024那么宽的工具条，那么程序就帮你重复重复地粘贴图片。假设图片尺寸大了，例如图片是30像素的高度，而你设定的工具条高度没那么高，那么程序就自动切掉一部分图片。
要想让icewm程序不切、不拼，保持住你画的图片的整体外观，只允许程序拉伸缩放，那就得在default.them文件里特别定义。
模板主题的文件里是这么定义的：
# List of gradient images in the current theme
Gradients="desktop.xpm icewm.xpm titleAT.xpm toolbuttonbg.xpm menubg.xpm menusel.xpm"
任何一张图片，你想不让它拼切，只准拉伸缩放，那就在上面句子的引号之间把图片的文件名打进去就行了。图片名之间用空格隔开。
这种做法的好处是，图片小，你做的Y轴方向的效果不会被切掉，坏处是，x轴方向无法产生任何纹理，因为图片被拉伸了，图片上任何的点在x轴方向都被拉伸成了横线。
第三种做法最简单了，直接做一张1024x30（我的屏幕就这么宽，你可以按照你的屏幕宽度来做）的图片，然后在文件里定义它只准拉伸缩放，像这样：
# List of gradient images in the current theme
Gradients="desktop.xpm icewm.xpm titleAT.xpm toolbuttonbg.xpm menubg.xpm menusel.xpm tasksbarbg.xpm"
我在引号里加入了taskbarbg.xpm。
这样做的好处是可以做出最漂亮的工具条效果，可以用渐变的颜色或光线，可以做最复杂细致的纹理，甚至可以让工具条直接就和壁纸融为一体，例如我做的这个主题的工具条背景：
图六
这个做法的好处是显而易见的，坏处也很明显，图片太大，启动慢了。
对于我们现在这个案例，我想做的工具条有这样的特点：
（1） x轴方向有纹理。所以，不能用拉伸缩放的方式，那样纹理就乱了。
（2） 整个工具条左右部分并无太大不同，而在高度上，就算是被切掉一点，也不会太影响整体效果。所以，可以用重复拼贴，但不能是太小的图片拼接。
所以，我用gimp打开原壁纸，从上面切了一块：
图七
方法是：
（1）用gimp打开壁纸图片;
（2）用矩形选择工具到壁纸上选择一块我需要的图片;
（3）点菜单：编辑 - 复制 （如果是多图层的图片，就点“复制可见”）;
（4）点菜单：编辑 - 粘贴为 - 新建图像
（5）点菜单：文件 - 另存为。 （提醒：必须是taskbarbg.xpm这个文件名，而且必须位于主题目录下面的 taskbar目录里）
用来拼接的图片是有讲究的，左右末端的颜色亮度必须基本一致，这样拼出来的工具条才不会有一截一截的突兀感，我也是反复切、反复看效果，做了好几次才基本满意。
然后，去菜单里重新点一下这个Perryfa-Fallout主题，主题就被更新了。
看到的工具条就是这样：
图八
原图的顶条中间是有个凸起的，我觉得用在工具条背景上意义不是很大，它肯定是会被各种任务按钮给掩盖的，而且，如果要保留这个凸起，就不得不用上面所说的第三种方式做工具条，做大图片，我觉得有点得不偿失。所以舍弃了这个凸起，但是，这个凸起还可以有别的用处，往下看。
4. 一般任务按钮，最小化任务按钮
每当我们打开一个程序窗口，工具条上会出现一个按钮。在icewm里，按钮分三种：
（1）一般任务按钮：这种按钮用于你已经打开了某个程序窗口，但是这个程序目前不是active的，也就是程序窗口被另一些程序窗口压在屏幕下面。
这种按钮用图片“taskbuttonbg.xpm”来定义。
（2）最小化任务按钮：这种按钮用于，你已经打开了某个程序窗口，但是你点了窗口上的最小化，现在屏幕上已经没有这个程序窗口了。
这种按钮用图片“taskbuttonminimized.xpm”来定义。
（3）active任务按钮（抱歉，我不知道用中文怎么说，“激活”？好像有点怪）：这种按钮永远都只能显示一个，因为你正在使用的程序窗口只能是一个。
这种按钮用图片“taskbuttonactive.xpm”来定义。
一般来说，active按钮只会显示一个，所以可以用比较特别、比较炫目甚至比较花的图片，而一般任务按钮和最小化任务按钮会有多个，通常我会用和背景比较融合的图片，不那么显眼、不那么炫目，有时候我甚至直接采用taskbarbg.xpm图片，因为太多的炫目元素是违背最基本的美观原则的。
从我个人的应用习惯来说，一般任务和最小化任务，其实是无所谓区分的，反正都是我暂时没使用的程序，所以，我通常会对这两种按钮使用一样的图片，这样整个工具条看上去比较舒服，不会太乱太花。
有一点要非常注意，一般任务按钮和最小化任务按钮通常会占有任务条最大的显示空间，所以，制作上应该比active按钮更为精心讲究。
好了，现在可以开始做按钮了。
还是打开原壁纸，在上面用矩形选择框出一个我需要的部位，复制粘贴为新图像。
图九
用工具箱里的放大镜放大这个切出来的图片，稍微处理一下，我把它切成了一个30x75的图片：
图十
另存为：taskbuttonbg.xpm
用ROX-Filer文件管理器（不要用thunar）到目录里，对这个图片做个相对连接，连接到taskbuttonminimized.xpm，这样最小化任务按钮也有了。
因为这是个完整的按钮形状，我不想被程序剪切或拼贴，所以，我就在default.theme文件里定义了这个图片，同时被定义的还有taskbuttonminimized.xpm。
就是这样：
Gradients="desktop.xpm icewm.xpm toolbuttonbg.xpm menubg.xpm menusel.xpm taskbuttonbg.xpm taskbuttonminimized.xpm"
好了刷新一下主题，出来是这个效果。
图十一
不知道你们感觉如果，我不太满意，觉得这个凸出有点过于凶残的感觉，凸出太狠。好吧，先留着，再做一个。（有时候一张图我会做上五六遍）
还是打开壁纸，再切一个：
图十二
点：图像 - 变换 - 顺时针旋转90度。成了这样：
图十三
事实上，我后来又操作了一次：图像 - 变换 - 水平翻转。因为我自己习惯光源来自左上角，而这个图，光源来自右上角，所以翻转它。
这张图是108x20的，有点太矮了，按钮我习惯做24-26高（不是我的习惯，是大多数主题都这高度）。好吧，反正本来我就想做点别的效果，原图不够高正好给我余地。
点 图像 - 画布大小。把画布高度改成26, 宽度不变。然后让原图居中，这样：
图十四
上下有一些透明区域，因为画布大而图片小。
因为icewm在工具栏中是完全不支持透明的（和程序窗口不同），也就是说，如果按钮的图片中有透明的部分，它不会自动把工具条背景的内容体现出来（这一点可真是笨），透明区域会给你呈现一种非常可怕的桃红色，所以，一定要有内容去填充这些区域。
点 文件 - 打开为多图层。选择taskbarbg.xpm图片并打开它。
这个图片原本就是工具条的背景，我让它成为按钮的背景，非常顺理成章。在图层窗口把这个新加的图层拎到最下面，因为它是背景，不能喧宾夺主的。
这个图片较大，就略为缩放一下高度，让它也成为26像素高，宽度先不管，因为我接下来还需要增加图片的宽度。
图十五
我想让按钮凸出表面，所以用drop shadow做一下。
在图层窗口确保按钮图层被选择。去除图像上一切可能的选择.
点Drop Shadow，选择XY位移为3, 模糊半径15. 注意：drop shadow默认的阴影图层的不透明度是80,因为我们这里的背景比较暗，所以，我把它调为100,不然阴影几乎感觉不到。
点 图像 - 画布适配图层
加了阴影图层以后，图像变大了，用矩形框选出我需要的部分，大小是112x26，点图像 - 剪裁到选区，图像就变成了我要的大小了：
图十六
好了，把先前做的那个taskbuttonbg.xpm改个名字（先不删），把新做的这个存为taskbuttonbg.xpm。刷新主题，出来的效果是这样的：
图十七
我觉得效果比先前那个好一些。留着这个吧。
5.Active任务按钮
这个图片是：taskbuttonactive.xpm
各种注意事项先前已经都说了，到这里我们就直接做好了。
我先前就打算用壁纸上绿色那一块来作active的按钮，所以，现在就直接从壁纸上切了，矩形选择我要的图像，复制粘贴为新图像，旋转图像90度：
图十八
从壁纸上切的，当然图像相当大，要压缩成一个小按钮，是否能保持原来的纹理我不敢说，不过没关系，我们可以先试试。
图像 - 缩放图像。图像的高度缩为26,宽度自适应。存为taskbuttonactive.xpm，修改default.theme文件：
Gradients="desktop.xpm icewm.xpm titleAT.xpm toolbuttonbg.xpm menubg.xpm menusel.xpm taskbuttonbg.xpm taskbuttonminimized.xpm taskbuttonactive.xpm"
刷新主题，工具条显示：
图十九
看上去还不错，省了很多功夫，呵呵，赚到了。只是，看上去和隔壁的按钮不是太融合的感觉，有点突兀。继续改。
为了和一般任务按钮协调，我准备从一般任务按钮图片的下部切4个像素高的一块，贴到这个active按钮的下部。
打开一般任务按钮图片，矩形选择最下面4个像素高的区域，复制，到active按钮图片上，粘贴为New Layer。
图二十
默认粘贴在图像的左上方，用工具箱里的移动工具把新贴的图层拉到最下面。
点 图层 - 缩放图层。让新贴图层的宽度和图像一致（就是拉伸一下）。
图二十一
存盘，刷新主题。现在工具条呈现：
图二十二
我觉得看上去好一点了。先这样吧。
6. 工具按钮
原模板主题的工具按钮（toolbuttonbg.xpm）是直接从taskbuttonbg.xpm做的连接，其实不做这个连接程序也会默认使用一般任务按钮的图片的。因为一般任务按钮的图片较大，所以，呈现在工具按钮上就是被切掉了大部分。
在这里，我想让工具按钮直接显示工具条背景，看看效果如何。
打开taskbarbg.xpm，直接从里面切出一块宽度为26像素的区域粘贴成新图像，存为toolbuttonbg.xpm：
图二十三
注意不要选花纹过分复杂的区域，那样各个按钮连起来以后一截一截的感觉会非常强烈，不好看。
刷新以后，工具按钮看上去是这样的：
图二十四
7. 主菜单按钮和最小化全部窗口按钮
现在要做的是工具条最左边的两个按钮。
主菜单按钮：icewm.xpm
最小化全部窗口按钮：desktop.xpm
都是放在主题目录下，taskbar子目录里。
主菜单按钮本来没什么特别，但是我们要往上打“veket”这几个字，所以就稍微有点工作要做。
要注意的是，工具条只有20多个像素高，表现力非常有限，所以不太可能把做得很复杂的美术字放上去，那样会很模糊，不好看。所以，我一般都做得很简单，能看清楚字就行了。
从baskbarbg.xpm切来60像素宽的一条，打上veket几个字，做上drop shadow，就是这样了：
图二十五
打字以及做阴影，我在美术字那个教程里写有了，这里就不再赘言。
注意几点：
（1）veket那几个字母，颜色应该从主题里取，不然整个主题的颜色会显得杂乱，不管图片做得多好，颜色一多就会显得土。当然，五彩缤纷也可以很好看，但需要极强功力，对颜色的把握不是看几个教程能练出来的，那属于素养的范畴。所以，我还是建议用比较常规的配色，不会太惊艳，但也不会难看。（我的rusted主题原先是没有veket那几个字的，大约是风清扬们集成的时候帮我加上了字，结果打的是红字，我看着难受坏了）。做主题，一般来说颜色最好就是两种，不超过三种，而且色调要协调，类似红配蓝的对冲色千万不能用，我们还不是大师，对吗？像这个主题，我打开从active按钮那张图，从里面取来了绿色，打成绿字，这样整个工具条的颜色是协调的。
（2）做阴影时，因为字很小，所以阴影不可做得太大，看不清的，xy都设为1,模糊半径2,就够了，阴影图层的不透明度调为100.
接下来做show desktop按钮。
还是先从taskbarbg.xpm切一块过来，大约26像素宽就足够了。
我从我的M4主题里去拿一个小图贴上应该就没问题了。
图二十六
矩形选择，复制，粘贴为New Layer。
对这个小图还需要一点点修整，用橡皮或者套索选择之类的工具去清除一些不需要的部分，清除完了以后就是这个样子：
图二十七
存盘为：desktop.xpm
这两个按钮在default.theme里已经定义为不能拼切了。
现在的工具条，是这样的：
图二十八
8.虚拟桌面切换按钮
按钮就剩下两个没做了，就是写着1、2的那两个小按钮。
图像文件名：workspacebuttonbg.xpm, workspacebuttonactive.xpm
从上图看，它们已经默认使用了一般任务按钮和active任务按钮，但看起来不那么好，因为一般任务按钮和active任务按钮的图片比较宽，所以在这个workspace按钮只显示了一小部分，大部分被切掉了。还是应该重新做一下。
这两个按钮很小，不宜做得很花哨。从一般任务按钮和active任务按钮里切就可以了。
workspacebuttonbg.xpm
图二十九
workspacebuttonactive.xpm
图三十
把这两个图像文件名写入default.xpm
Gradients="desktop.xpm icewm.xpm titleAT.xpm toolbuttonbg.xpm menubg.xpm menusel.xpm taskbuttonbg.xpm taskbuttonminimized.xpm taskbuttonactive.xpm workspacebuttonbg.xpm workspacebuttonactive.xpm"
刷新主题可见：
图三十一
（秃笔扛踢牛......）
[ 本帖最后由 perryfa 于 2010-1-8 22:23 编辑 ] |
|
|手机版|Archiver|veket官方网站论坛
( 粤ICP备 11052856 )
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
显身卡
楼主
