GTK主题制作.doc

GTK主题的样式是由引擎决定的，如果大家还记得，我们曾经使用过嫣然分享的clearlooks系列gtk主题，那个主题的引擎是自带的。但由于系统冲突造成了问题，veket不再带有这个系列。现在我们就剩下系统默认的gtk2.0主题了，没关系，我们照样还可以做出和我们的icewm主题配合的gtk主题来，而且制作方法非常简单，效果也不算太差。大家用过我做的Dark系列应该有感受，如果你同时使用同名的icewm和gtk主题，程序窗口和窗口内容部分是协调的，看不出来是由不同的程序管理的。目前我们系统里默认的有两种gtk主题样式，我先介绍简单的一种。Gradient-grey是系统自带的主题，非常简单，非常容易制作：图一我们可以利用这个模板很快做出一个和我们的icewm主题配合的gtk主题来。Perryfa-Beige就是这么做出来的：图二1. 概述首先，我们来看一下gtk主题目录：/usr/share/themes/在这个目录下已经装有一些gtk主题，目录名就是我们在主菜单“桌面 - chtheme GTK主题选择”界面看到的gtk主题的名字。“chtheme GTK主题选择”的界面做得不错，每个主题的效果，例如滑动条、按钮、标题栏的效果，在这个界面基本上能看出大概来，你无须加载主题就能有个大概的印象。点击进入目录：/usr/share/themes/Gradient-grey/gtk-2.0/目录里非常简单，只有四张png图片和一个定义文件：gtkrc（1）图片在主题中的作用为了让大家看得清楚，我在下图选用了一个颜色对比比较强烈的gtk主题- MAXSPEED，这个主题也是用Gradient-grey当模板改的，我打开了“桌面 - chtheme GTK主题选择”，点MAXSPEED主题，不需要应用，整个窗口就显示MAXSPEED主题的外观，我用gimp打开了MAXSPEED主题里的tab1、2、3三张图片：图三从上图可以看出：tab1.png：用于已选择按钮，滑动条前景。还有在上图看不见需要到界面上去试的，鼠标移上按钮时按钮的变色，鼠标移到下拉条时的变色（图中写着“Theme”的）。还有，多标签的页Active标签，如默认的firefox（firefox主题比较简单，所以窗口内容就被gtk接管）的标签页，sakura多标签页时的激活标签等。基本上，这个图片定义Active激活状态。tab2.png：用于未被选择按钮，滑动条背景，下拉条背景。以及在这图上看不见的，多标签的页一般标签，程序菜单下拉时的选择条等。tab3.png：用于无法被选择的按钮，即图中的“禁用”按钮。在目录中还有个default.png，从gtkrc文件看，应该是用于除上面三种按钮之外的按钮，到目前为止，我只在Sylpheed里面发现过它的一点点作用，在某个按钮边上出现一圈边框。（2）gtkrc定义gtkrc这个文件是用来定义图片应用，以及各种背景、前景和文字的颜色的。颜色是要应用到元素上去的，gtk主题的元素有两对：背景(bg）和前景（fg），基层（base）和文字（text）。背景和前景应用于窗口功能部分，而基层和文字一般应用于文本编辑界面。gtk对于每一个元素的颜色定义有五种状态：激活（ACTIVE），非激活（NORMAL），鼠标移过去时的变色（PRELIGHT)，已被选择（SELECTED），不可选择（INSENSITIVE）。2. 制作我使用先前icewm主题教程做出来的主题为范例，因为那个主题现在还没有gtk主题去配它。模板使用MAXSPEED，因为它的颜色对比比较强烈，改完了效果比较明显。而它本来就是Gradient-grey改的，所以文件结构以及参数项和Gradient-grey一模一样。（1）制作主题目录在/usr/share/themes/目录里复制MAXSPEED到另一个名字，我这里用“Perryfa-Fallout-1”，因为它是用来和“Perryfa-Fallout”icewm主题搭配的。（2）在gtkrc定义窗口基色 gtkrc里面有很多颜色定义，但是有很多都是显示在图片上的，所以只有做好了图片才能定义，不然就看不清楚效果。颜色这个东西很难伺候，同样的颜色在不同的背景里，人眼看到的效果是不一样的，所以，颜色不放到背景里是很难定义准确的。也正因为如此，我通常都是先定义窗口基色，然后才去做图片，这样对图片颜色的感觉会比较准确。换句话说，就是要根据窗口的层次来一层一层定义，先定义最下面的窗口基色，然后定义上面的按钮，再定义按钮上的文字。 定义窗口基色需要考虑很多牵连因素，深色背景一般比较难做，因为深色背景就需要浅色文字搭配，而有些软件做得比较傻，它会自己定义窗口背景，例如白色，然后采用主题使用的文字颜色。这样就很麻烦，软件定义的窗口背景常常是浅色，在使用浅色文字的主题时，文字就看不清。所以，大部分gtk主题都很讨巧，直接做成背景浅色、文字深色，这样就比较百搭。可是我就是不喜欢浅色gtk主题，因为我喜欢用深色icewm主题，而浅色gtk主题总是和icewm主题特别地生分，不像一家子。 这个范例主题必然又是深色背景。因为整个窗口的基调就是黯哑深邃的。 我打开gcolor2，在桌面上选了一种偏棕的灰色。选这个颜色首要原因是它和Fallout主题是协调的，第二个原因是，它不算太黑，我仍然可以使用黑色作为窗口的文字色，这样，就避免了某些傻软件的文字看不清的问题。作为窗口文字的主色，其实我一直都喜欢用感觉中庸的黑色，用别的颜色总有小家子气轻浮佻达的感觉，但有时候是不得不用彩色，因为窗口底色太黑了。图四 在gtkrc里的定义是这样的： bgNORMAL= #6F6C63 #窗口基色，深灰 fgNORMAL= #000000 #窗口文字色，黑（3）修改图片首先要提醒一下：修改gtk主题的图片是有风险的！如果你的图片有问题、打不开，例如保存时系统或gimp有意外情况发生，那么使用该主题时会发生系统挂死的状况。重启系统也起不来，因为系统认为你选用的就是这个有问题的gtk主题，而gtk程序会一直在试图打开你的问题图片，你的veket图形界面就彻底什么也干不了了。我曾经有过这样一次体验，gtk主题已被选用，我在修改图片，存盘时gimp崩溃，图片出错，于是我就再也起不来系统了，我只能暂时舍弃这个2fs，用其他的2fs文件启动系统，挂载出问题的这个2fs，用好的图片替换有问题的图片，再把2fs换回来才把系统找回来了。请一定注意。tab1.png 20x20这张图片是用于激活状态的，在整个界面上显示得相对较少，所以，一般用比较鲜亮的颜色。要注意的是，这个图片同时也用于程序窗口的滑动条，而且，横、竖的滑动条都用它，滑动条是会根据你所使用的窗口的内容多少发生大小变化，大到一长条、小到一个点都有可能。所以使用有纹理的图片就要多试，因为纹理会被拉长压扁，完全面目全非。这对我们这个主题很不利，因为Fallout主题是纹理至上的。Fallout主题的激活状态标识就是暗绿色，这没什么可说的。我的素材就从Fallout的icewm主题里来。到icewm主题的/usr/share/icewm/themes/Perryfa-Fallout/里去打开titleT.xcf，这是我们先前做icewm主题留下的素材文件。从里面找一段绿色：图五缩放成20x20，存成：tab1.png文字看不见了，不要紧，这个文字是可以自己定义的，后面我们可以改掉它。tab2.png 20x20这个图片是会大面积出现的，所以要使用和背景比较融合的颜色，而且它会用于滑动条的背景，会在x和y轴两个方向都被大比例地拉伸，做纹理也会比较困难。我拿icewm主题的工具条条背景图片 - taskbarbg.xpm垂直翻转，压缩成20x20，看看效果如何：图六看上去还凑合，那些纹理虽然变形得厉害，但看着也挺有意思的。主要是黑色文字在上面还能看得清，这个颜色是不能单独改的，必须和窗口文字颜色一样。tab3.png 20x20这个图片简单了，反正用得不多。让它跟背景基本上融为一体就好了。点gimp工具箱的前景色，在跳出来的改变前景色窗口里输入我们前面定义窗口基色的颜色“6F6C63”让它成为前景色。背景色选用灰色。新开做一个20x20的透明图片，用混合工具填充上渐变的颜色，效果就是这样：图七上面“禁用”那个按钮，就是我们新做的。default.png虽然很难看到这个图片起作用，无论如何还是做一下：图八（4）定义gtkrc现在我们可以来完成gtkrc的定义了。背景(bg）和前景（fg）先把Active按钮上的颜色改过来 fgPRELIGHT = #05D005 #鼠标移上时前景色，浅绿 fgACTIVE = #05D005 #激活前景色，浅绿图九鼠标移上条目的背景色： bgPRELIGHT = #25140A #深棕图十我用鼠标移到了Radio3的位置，它的背景就变成了深棕色。这里要注意的是，对于按钮，鼠标移上去时，背景不会显示这个颜色，而是默认使用了激活状态的图片：tab1.png已被选择项的前景和背景色：fgSELECTED = #05D005 #已被选择项前景色，浅绿bgSELECTED = #25140A #已被选择项背景色，深棕图十一看rox-filer窗口已被选择的gtkrc文件的背景色和文件名颜色。禁用项的文字色我觉得默认的就已经很好，注释掉这一行。#fgINSENSITIVE = 下面这两项也被注释掉了，因为我们使用了图片。#bgINSENSITIVE = gray90 #bgACTIVE = #CFCFAC 基层（base）和文字（text）文字编辑窗口背景和文字色： baseNORMAL = #ffffff #文字编辑窗口背景色，白 textNORMAL = #000000 #文字编辑窗口文字色，黑选择状态： baseSELECTED= #25140A #被选择的文字背景色，深棕 textSELECTED= #FFFFFF #被选择的文字色，白图十二看上图文本编辑器里被选择的部分，深棕色背景，白色字。 baseACTIVE = #6F6C63 #当窗口为非激活时，被选择的文字背景色，深灰 textACTIVE = #25140A #当窗口为非激活时，被选择的文字色，深棕图十三看上图，当文本编辑器成为非激活窗口时，被选择的部分变成深灰背景，深棕色文字。basePRELIGHT和textPRELIGHT这一对参数被我注释掉了，因为，在文本编辑器上，通常我们不习惯鼠标走到哪里、哪里就变颜色。baseINSENSITIVE和textINSENSITIVE这一对也不需要的，文本编辑窗口，有谁见过打上去的字不能碰的？死机不算。虽然参数定义被注释掉了，碰上意外情况也不用担心，反正还有默认的，实在需要，就让它们走默认定义吧。目录树背景颜色定义GtkTreeView:odd_row_color = #6F6C63 #目录奇数行背景色GtkTreeView:even_row_color = #B6CEB6 #目录偶数行背景色我用了程序窗口背景的偏棕的灰色，和一种偏灰的淡绿。图十四程序菜单选择项更改这个主题模板默认是采用一般按钮的图片（tab2.png）来做下拉菜单的选择条的。如图六和图九所示。我觉得这种选择不好，和icewm主题的主菜单选择条不配合，所以就改成暗绿条，也就是tab1.png:style menuitem engine pixmap image function = BOX recolorable = TRUE file = tab1.png border = 6,6,6,6 stretch = TRUE 上面“file=tab1.png”就是我改的，默认是tab2.png。这样，下拉菜单就变成这样了：图十五标签页标题栏背景更改原模板主题有一个定义非常奇怪，看下面这一段：style notebookengine pixmap image function = EXTENSION recolorable = TRUE state = ACTIVE file = tab2.png border = 6,6,6,6 stretch = TRUE image function = EXTENSION recolorable = TRUE file = tab1.png border = 6,6,6,6 stretch = TRUE 乍一看感觉比较奇怪，因为ACTIVE项使用了tab2.png.一开始我们就知道，按钮的ACTIVE项是用tab1.png定义的，这里反过来了。更为奇怪的的是，ACTIVE和非ACTIVE的标签页的标题所使用的文字颜色是反的，ACTIVE标签页标题文字使用的是fgNORMAL颜色，而fgACTIVE被用于未被选择的标签页文字，这真能把人活活气死。于是出来的效果是这样的：图十六在标签页标题栏，ACTIVE和非ACTIVE所使用的文字颜色和一般的定义是反的，ACTIVE标签页标题文字使用fgNORMAL的颜色（我们使用黑色），而fgACTIVE（浅绿色）却被用于未被选择的标签页标题文字。所以，为了让标签页的标题文字能看清楚，我只能把上面这一段改一下，改成：style notebookengine pixmap image function = EXTENSION recolorable = TRUE state = ACTIVE file = tab3.png border = 6,6,6,6 stretch = TRUE image function = E