|
|
本帖最后由 perryfa 于 2010-12-29 06:13 编辑
在veket默认的GTK主题中，有两个主题是使用相同的模板：Citrus-cut和Stardust（星尘）。我个人比较喜欢后者，我的大部分GTK主题都用星尘模板，有些主题做出来和原模板几乎没有什么相同的感觉。现在，我用这个模板做一个GTK主题的范例。在这个范例，我准备做一个GTK主题来配合我的icewm主题Perryfa-BNW.
图一
星尘主题比我们先前范例一所用的模板Gradient-grey要复杂一些，因此，做出来的效果也要好一些。
以一个确定的模板为基础制作一个新的主题，第一步当然建立主题目录，在目录“/usr/share/themes/”拷贝Strardust目录到一个新的名字：Perryfa-BNW. 在菜单“桌面 - Chtheme GTK主题选择”选择这个新建的GTK主题。
图二
1.概述
星尘这个主题，使用的图片多了一些，主要有下面几部分：
（1）箭头 - 10张png图片
在图二，我们可以看到一些黑色的三角箭头，这些箭头都是图片做的。图片有三组：
第一组是纯黑色箭头：arrow_down1.png, arrow_up1.png, arrow_left1.png, arrow_right1.png
这组箭头用于箭头处于激活状态的场合，也就是你可以点这些箭头去让窗口滑动条移动。
第二组是近乎透明的三角箭头：arrow_down2.png, arrow_up2.png, arrow_left2.png, arrow_right2.png
这组箭头用于箭头处于非激活状态的场合，例如你的窗口内容很少，不需要滑动条上下移动，此时的滑动条是无法移动的。对这组箭头，如果你用鼠标去点，程序是没有反应的。
第三组箭头在图二中看不见，就是上下箭头合在一起，一般用于下拉的combo框，激活和非激活各一张图片：option1.png,option2.png
这十张图片都非常简单，事实上，我通常只作2-3张，其他的翻转、旋转就都搞定了。
（2）一般按钮、滑动条和单选按钮 - 4张png图片
在图二，我们看到的写着Button、Toggle、禁用字样的按钮，滑动条，以及Radio单选按钮就是这三张图片定义的。命名为：
button1.png, button2.png, button3.png
button1用于一般状况下的按钮，以及Radio单选按钮的未被选择状态，在星尘主题中使用白色透明按钮。
button2用于已被选择、正在选择状态下的按钮，滑动条，以及Radio单选按钮已被选择状态，在星尘主题中使用浅蓝色透明按钮。
button3用于无法选择按钮，即禁用。
button1.png和button2.png是这个主题的重头戏，因为用的地方很多，非常影响界面的美观。除了图二所见，还有一些其他地方的应用，例如菜单选择条、小箭头的背景等等。
还有一张图片 - trough.png，这张图片用于滑动条的背景。
（3）多选按钮 - 4张png图片
在图二，我们可以看到两个小按钮，Check1,Check2 图片名字：
check2.png - 用于多选按钮，即图二上部的Check1.
spin1、2、3.png - 图二中的Check2就是spin1，还有两个对应的激活和无法选择状态。
（4）list_header - 2张png图片
在图二中，写着“ Theme"和“Mnue”字样的部分就是用这两张图片，一般用于窗口的标题栏，图片名字为：
list_header.png 和 list_header-light.png
前者用于一般状态，后者用于激活状态。
（5）标签页标题栏 - 2张png图片
这个图片在图二中没有显示，就是用于多标签页窗口的标题栏，像sakura、firefox这类程序都会用上。
notebook1.png, notebook2.png
前者是一般状态，后者为激活状态。
（6）obutton - 2张png图片
这两个按钮比较难找，看图：
图三
上图中红色圈起的部分就是这个obutton的激活状态。
obutton1.png, obutton2.png, 前者为激活状态，后者未非激活状态。
（7）窗口立体阴影 - 2张png图片
in.png和up.png，这两张图片在图二中是有显示的，但是一般人很难注意到，看那一排从Check1到Radio3的按钮，虽然它们使用了和窗口一样的背景色，但看上去它们是处于一个凸起的平台上的，这个凸起的平台就是用这两张图片的阴影效果实现的，这个最常见就是ROX-Filer窗口，它的功能按钮就是处于这样一个突出窗口表面的平台上的。我有时候会故意去掉这个阴影效果，使得GTK主题的窗口内容和icewm的边框连成一体，不让这个凸起破解效果。
最后是两张没啥用的图片，blank,png，图如其名，就是啥也没有的一张全透明图片。还有就是那个很难找到用处的default.png.
总共28张图片，比起icewm主题来还是少得多了。至于gtkrc，我在范例一已经介绍了很多，这里就不重复了，和范例一不同的是，这个星尘模板因为用的图片较多，所以定义图片需要的定义行也相对较多，至于文字颜色定义是差不多的。
2.制作
（1）在gtkrc定义窗口基色
这是个黑白色的主题，在icewm主题中，白色为激活窗口，黑色为非激活窗口。这个定义和工具条的定义正好相反，工具条是黑色按钮为激活按钮。这种做法是不合常规的，桌面需要协调，哪种颜色表示激活应该是统一的，不然容易让人迷糊。现在我也不记得当时在做这个icewm主题时我是怎么想的，不知道为什么一定要反过来做。似乎是因为背景用的壁纸太黑，我想让白色稍微多一点，就用白色作了工具条背景，于是激活按钮就只能是黑色的了。而且，白色背景上的黑色按钮的下陷感很强，比黑色背景上的白色按钮的凸出感更符合使用时的感觉，我们通常总是觉得按钮是应该被按“下去”的，做成凸出就有点怪异，好像摁了一个按钮，它反而跳出来了，现实生活中如果碰上这样的电器按钮，大概会吓一跳的。
所以，我决定修改icewm主题，让激活和非激活窗口掉个个儿，让黑色为激活窗口，白色为非激活窗口。这个修改很容易，就是对调一下icewm主题里的图片文件名而已。我做主题时常常会这样，一开始考虑不周，做到后面突然决定整个改变丝路，对初学者来说，这是很常见的。
虽然说是黑白主题，但实际上黑白两色都是很有水分的，其实是深灰和浅灰色。真正的纯白色很难做大块的窗口背景，不会好看，我曾经见过一个纯白色为基调的主题，给人的感觉是极其简陋，因为白色总给人未经处理的感觉。所以这个主题我会用浅灰色做窗口基色。
bg[NORMAL]= "#e1e1ee" #窗口基色，浅灰,微微偏蓝
fg[NORMAL]= "#000000" #窗口文字色，黑
（2）标题栏
标题栏对界面的影响比较大，所以先做这个。我从icewm主题里获取素材，这样做能让gtk主题和icewm主题更好的地融合，也让我们的gtk主题制作轻松很多。
把titleIT.xpm、titleAT.xpm缩放成我们要的30x17大小，list_header.png和listheader-light.png就做好了，刷新主题：
图四
上图中，当我把鼠标移到“Theme”所在的标题栏时，背景从白色变成了黑色。而gimp绘图窗口的标题栏已经变成了黑地白条。
（3）按钮制作
这是这个主题最出效果的一步，星尘主题的滑动条和按钮是它的亮点，非常晶莹剔透。可惜我们这个主题不太适合这种按钮，我们需要金属感的、薄片型的按钮和滑动条。
星尘模板的按钮和滑动条做得很有效率，我们看到的这些都是用一张小小的15x15的小图拉伸而成，而图里画的就是一个圆形图像。
直接从前面做的list_header.png和listheader-light.png里切出一个13x13的圆，把画布扩展到15x15（为了在圆边上留出一个像素的空隙，做得太挤在某些画面上效果不好）。
图五
至于滑动条背景trough.png和禁用按钮button3.png，和这个主题配合得很好，所以不改了。
（4）多选按钮
先做三张spin图。这三张图的大小是14x14，图形是圆角的方形。
还是从list_header.png和listheader-light.png里切出这个方形。对于check2.png，我没有使用打钩的方式，因为发现这个钩不容易做得精致，所以就用spin2.png做底、并从spin1.png切了个小圆贴在上面，做成这个按钮。至于 spin3.png，这个比较简单，把spin1.png调整一下亮度对比度，让它比较灰就行了。做成以后就是如下图所示，下图的右边红线框出得部位就是spin1和check2的效果：
图六
（5）标签页标题栏
这是两张14x14的小图。我还是从list_header.png取出一般窗口标签页的标题栏背景图，然后，由于我们这个主题的就是黑白的，只要把一般标签页的图做个颜色反相，就得到了激活标签标题栏的背景图：
图七
最后得到的效果，就如上图sakura窗口所示。
（6）obutton
两个按钮是29x15的图。而按钮高度在图中只有13像素。
先做obutton1.png，我先从listheader-light.png里切出一个圆角的图和obutton1.png的原图一样大，粘贴到obutton1.png里作为新图层，然后把原图的图像拎到最上层，虽然我们新加的图层看不见了，可是我们在图层窗口里选择的是新加的图层，所以，所有操作就会在新加图层上产生效果。矩形选择除原淡蓝色部分，反转选择，摁键盘上的delete键，这样，新加图层里不需要的部分就被切掉了，：
图八
从list_header.png里切出一个圆角的白色按钮，粘贴到obutton1.png里作为新图层，和上面一样清除掉不需要的部分，把模板按钮去掉，出来的图像是这样的：
图九
看上去黑白按钮接合得很不好。没关系，我给这按钮加个边框看上去就没问题了，加新图层，透明背景，矩形+圆角选择整个按钮，选择边界1像素，填充为深灰色，存为obutton1.png，刷新主题：
图十
上图中红色椭圆区域就是最后的按钮效果。
obutton2.png是标识非激活状态的，这个比较简单了，把做好的obutton1.png打开，整图降低亮度和对比度，让图像看上去灰扑扑的，一看就是不能用的样子，另存为obutton2.png就行了。
图十一
（7）窗口立体阴影
in.png和up.png。看一下这张图：
图十二
上图中我打开并放大原星尘主题里的这两张图，我在图中框出的红色和绿色区域的立体效果就是拜这两张图所赐。由于星尘模板的背景和我做的这个一样是淡灰色的，所以这两张图对我们的主题已经很适合，所以不用改了。
如果要做其他颜色背景的主题，只要按照图中的明暗效果，灌入适合你的主题的颜色就可以了。例如，如果你做绿色背景的主题，那么原深灰就灌深绿色，浅灰就灌浅绿，渐次灌入4种不同明暗的绿色就好了。
这里要提醒一点做图上的小知识。像这种黑白灰的主题，图片都是是黑白的，在gimp里打开图，点菜单“图像 - 模式”你就会看见，这些图的模式是“灰度”，这种模式的图，你就是想灌彩色也是不可能的，它不接受。如果你想以这种模式的图像作为模板，灌入你想要的颜色，那么只要在菜单里把模式点成“RGB”就可以了。
（8）箭头
上面我说过，箭头有三组，第二组是几乎透明的，所以适合所有颜色的主题，我基本不改这一组箭头，除非我想换一下箭头的形状。第一组和第三组是纯黑色的，这对我们的主题很适合，所以也不用改了。而且箭头也很好做，打开原图，把图的模式改成RGB，按颜色选择黑色，灌入你要的颜色就行了。所以，从做图角度也没什么可说的。
（9）default.png
这个图在我们这个主题做起来极其简单，打开原图（是浅蓝色渐变的圆），因为我们是黑白的主题，直接点颜色 - 去色（按亮度），就行了。极为简单地把一张RGB模式变成了灰度模式。
如果是彩色的背景例如绿色，那么可以这么做：
打开原图，添加一个新的透明图层，给这个新图层灌上你要的绿色，去图层窗口，把新加的这个绿色图层的模式改成“颜色”，一个绿色的图就做成了：
图十三
觉得不满意就换个绿色重新灌一次。这种方法适用于一切单色图的颜色改变，尤其对图形的一部分改变颜色特别好用，只要选择剪切覆盖图层的形状就行了。
（10）gtkrc定义
各种颜色的定义参数已经在上一个范例解释了，所以这里就不再重复，只是把设定写一遍。
GtkTreeView::odd_row_color = "#f1f1f1" #几乎白
GtkTreeView::even_row_color = "#E1E1EE" #窗口基色，淡灰
fg[NORMAL] = "#000000" #标题色，黑
text[NORMAL] = "#000000" #目录条目文字色，黑色
fg[NORMAL] = "#000000" #窗口文字色，黑
fg[PRELIGHT] = "#6a6a6a" #鼠标移上时前景色，深灰
fg[ACTIVE] = "#6a6a6a" #激活前景色，深灰
fg[SELECTED] = "#6a6a6a" #已被选择前景色，深灰
fg[INSENSITIVE] = "#999999" #禁选前景色，浅灰
bg[NORMAL] = "#E1E1EE" #窗口基色，浅灰
#bg[PRELIGHT] = "#000000" #鼠标移上条目的背景色,在此主题无效
bg[ACTIVE] = "#000000" #激活背景色，在此主题无效,使用图片
#bg[SELECTED] = "#000000" #已被选择项目背景色，在此主题无效
#bg[INSENSITIVE] = "#dddddd" #禁选背景色，在此主题无效
base[NORMAL] = "#ffffff" #文字编辑窗口背景色，白
base[SELECTED] = "#6a6a6a" #被选择的文字背景色，深灰
base[ACTIVE] = "#6a6a6a" #当窗口为非激活时，被选择的文字背景色，深灰
#base[PRELIGHT] = "#ffffff" #
#base[INSENSITIVE] = "#cdced9" #
text[NORMAL] = "#000000" #文字编辑窗口文字色，黑
text[SELECTED] = "#ffffff" #被选择的文字色，白
text[ACTIVE] = "#333333" #当窗口为非激活时，被选择的文字前景色，灰
#text[PRELIGHT] = "#353535"
#text[INSENSITIVE] = "#9B9B9B"
对于这种固定模板的主题，设置文字颜色有很多两难的地方。例如这里，按理说激活按钮既然是黑的，那么文字就应该是白的，但是由于同一个文字色设定也用于那些checkbox和radio按钮的文字背景，这些按钮的背景都是浅灰近白的窗口背景，如果用白色，这些按钮的文字就看不见了，所以只能使用深灰色，希望能兼顾两种背景，有时我就用彩色，但对于黑白主题，彩色就有点突兀了。
另一个问题和范例一是一样的，就是标签页标题栏的文字问题，在这个主题仍然无法解决。
任何深色元素出现在这两个模板，都会或多或少有些问题。感觉很遗憾。
最后看一下效果吧：
图十四
|
|
|手机版|Archiver|veket官方网站论坛
( 粤ICP备 11052856 )
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
显身卡
楼主
