GTK主题制作.docx
- 文档编号:8698033
- 上传时间:2023-02-01
- 格式:DOCX
- 页数:19
- 大小:702.57KB
GTK主题制作.docx
《GTK主题制作.docx》由会员分享,可在线阅读,更多相关《GTK主题制作.docx(19页珍藏版)》请在冰豆网上搜索。
GTK主题制作
GTK主题制作
GTK主题的样式是由引擎决定的,如果大家还记得,我们曾经使用过嫣然分享的clearlooks系列gtk主题,那个主题的引擎是自带的。
但由于系统冲突造成了问题,veket不再带有这个系列。
现在我们就剩下系统默认的gtk2.0主题了,没关系,我们照样还可以做出和我们的icewm主题配合的gtk主题来,而且制作方法非常简单,效果也不算太差。
大家用过我做的Dark系列应该有感受,如果你同时使用同名的icewm和gtk主题,程序窗口和窗口内容部分是协调的,看不出来是由不同的程序管理的。
目前我们系统里默认的有两种gtk主题样式,我先介绍简单的一种。
Gradient-grey是系统自带的主题,非常简单,非常容易制作:
图一
我们可以利用这个模板很快做出一个和我们的icewm主题配合的gtk主题来。
Perryfa-Beige就是这么做出来的:
图二
1.概述
首先,我们来看一下gtk主题目录:
/usr/share/themes/
在这个目录下已经装有一些gtk主题,目录名就是我们在主菜单“桌面-chthemeGTK主题选择”界面看到的gtk主题的名字。
“chthemeGTK主题选择”的界面做得不错,每个主题的效果,例如滑动条、按钮、标题栏的效果,在这个界面基本上能看出大概来,你无须加载主题就能有个大概的印象。
点击进入目录:
/usr/share/themes/Gradient-grey/gtk-2.0/
目录里非常简单,只有四张png图片和一个定义文件:
gtkrc
(1)图片在主题中的作用
为了让大家看得清楚,我在下图选用了一个颜色对比比较强烈的gtk主题-MAXSPEED,这个主题也是用Gradient-grey当模板改的,我打开了“桌面-chthemeGTK主题选择”,点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里的定义是这样的:
bg[NORMAL]="#6F6C63"#窗口基色,深灰
fg[NORMAL]="#000000"#窗口文字色,黑
(3)修改图片
首先要提醒一下:
修改gtk主题的图片是有风险的!
!
如果你的图片有问题、打不开,例如保存时系统或gimp有意外情况发生,那么使用该主题时会发生系统挂死的状况。
重启系统也起不来,因为系统认为你选用的就是这个有问题的gtk主题,而gtk程序会一直在试图打开你的问题图片,你的veket图形界面就彻底什么也干不了了。
我曾经有过这样一次体验,gtk主题已被选用,我在修改图片,存盘时gimp崩溃,图片出错,于是我就再也起不来系统了,我只能暂时舍弃这个2fs,用其他的2fs文件启动系统,挂载出问题的这个2fs,用好的图片替换有问题的图片,再把2fs换回来才把系统找回来了。
请一定注意。
tab1.png20x20
这张图片是用于激活状态的,在整个界面上显示得相对较少,所以,一般用比较鲜亮的颜色。
要注意的是,这个图片同时也用于程序窗口的滑动条,而且,横、竖的滑动条都用它,滑动条是会根据你所使用的窗口的内容多少发生大小变化,大到一长条、小到一个点都有可能。
所以使用有纹理的图片就要多试,因为纹理会被拉长压扁,完全面目全非。
这对我们这个主题很不利,因为Fallout主题是纹理至上的。
Fallout主题的激活状态标识就是暗绿色,这没什么可说的。
我的素材就从Fallout的icewm主题里来。
到icewm主题的/usr/share/icewm/themes/Perryfa-Fallout/里去打开titleT.xcf,这是我们先前做icewm主题留下的素材文件。
从里面找一段绿色:
图五
缩放成20x20,存成:
tab1.png
文字看不见了,不要紧,这个文字是可以自己定义的,后面我们可以改掉它。
tab2.png20x20
这个图片是会大面积出现的,所以要使用和背景比较融合的颜色,而且它会用于滑动条的背景,会在x和y轴两个方向都被大比例地拉伸,做纹理也会比较困难。
我拿icewm主题的工具条条背景图片-taskbarbg.xpm垂直翻转,压缩成20x20,看看效果如何:
图六
看上去还凑合,那些纹理虽然变形得厉害,但看着也挺有意思的。
主要是黑色文字在上面还能看得清,这个颜色是不能单独改的,必须和窗口文字颜色一样。
tab3.png20x20
这个图片简单了,反正用得不多。
让它跟背景基本上融为一体就好了。
点gimp工具箱的前景色,在跳出来的改变前景色窗口里输入我们前面定义窗口基色的颜色“6F6C63”让它成为前景色。
背景色选用灰色。
新开做一个20x20的透明图片,用混合工具填充上渐变的颜色,效果就是这样:
图七
上面“禁用”那个按钮,就是我们新做的。
default.png
虽然很难看到这个图片起作用,无论如何还是做一下:
图八
(4)定义gtkrc
现在我们可以来完成gtkrc的定义了。
背景(bg)和前景(fg)
先把Active按钮上的颜色改过来
fg[PRELIGHT]="#05D005"#鼠标移上时前景色,浅绿
fg[ACTIVE]="#05D005"#激活前景色,浅绿
图九
鼠标移上条目的背景色:
bg[PRELIGHT]="#25140A"#深棕
图十
我用鼠标移到了Radio3的位置,它的背景就变成了深棕色。
这里要注意的是,对于按钮,鼠标移上去时,背景不会显示这个颜色,而是默认使用了激活状态的图片:
tab1.png
已被选择项的前景和背景色:
fg[SELECTED]="#05D005"#已被选择项前景色,浅绿
bg[SELECTED]="#25140A"#已被选择项背景色,深棕
图十一
看rox-filer窗口已被选择的gtkrc文件的背景色和文件名颜色。
禁用项的文字色我觉得默认的就已经很好,注释掉这一行。
#fg[INSENSITIVE]=""
下面这两项也被注释掉了,因为我们使用了图片。
#bg[INSENSITIVE]="gray90"
#bg[ACTIVE]="#CFCFAC"
基层(base)和文字(text)
文字编辑窗口背景和文字色:
base[NORMAL]="#ffffff"#文字编辑窗口背景色,白
text[NORMAL]="#000000"#文字编辑窗口文字色,黑
选择状态:
base[SELECTED]="#25140A"#被选择的文字背景色,深棕
text[SELECTED]="#FFFFFF"#被选择的文字色,白
图十二
看上图文本编辑器里被选择的部分,深棕色背景,白色字。
base[ACTIVE]="#6F6C63"#当窗口为非激活时,被选择的文字背景色,深灰
text[ACTIVE]="#25140A"#当窗口为非激活时,被选择的文字色,深棕
图十三
看上图,当文本编辑器成为非激活窗口时,被选择的部分变成深灰背景,深棕色文字。
base[PRELIGHT]和text[PRELIGHT]这一对参数被我注释掉了,因为,在文本编辑器上,通常我们不习惯鼠标走到哪里、哪里就变颜色。
base[INSENSITIVE]和text[INSENSITIVE]这一对也不需要的,文本编辑窗口,有谁见过打上去的字不能碰的?
死机不算。
虽然参数定义被注释掉了,碰上意外情况也不用担心,反正还有默认的,实在需要,就让它们走默认定义吧。
目录树背景颜色定义
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"notebook"
{
engine"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标签页标题文字使用的是fg[NORMAL颜色,而fg[ACTIVE]被用于未被选择的标签页文字,这真能把人活活气死。
于是出来的效果是这样的:
图十六
在标签页标题栏,ACTIVE和非ACTIVE所使用的文字颜色和一般的定义是反的,ACTIVE标签页标题文字使用fg[NORMAL]的颜色(我们使用黑色),而fg[ACTIVE](浅绿色)却被用于未被选择的标签页标题文字。
所以,为了让标签页的标题文字能看清楚,我只能把上面这一段改一下,改成:
style"notebook"
{
engine"pixmap"{
image
{
function=EXTENSION
recolorable=TRUE
state=ACTIVE
file="tab3.png"
border={6,6,6,6}
stretch=TRUE
}
image
{
function=EXTENSION
recolorable=TRUE
file="tab2.png"
border={6,6,6,6}
stretch=TRUE
}
}
}
于是,出来的效果就变成这样了
图十七
虽然没有使用默认的激活标志(在这个主题是暗绿色),但是好歹能看清楚标签页的标题了。
当然还是不完美。
谁要是知道怎么把这个文字的颜色定义扭过来,麻烦告诉我。
对于模板主题的gtkrc里的其他定义行,保持远样,除非你对这些定义都很了解了,否则不要做任何改动,以免让你的主题不工作了。
另外,做gtkrc文件也要非常仔细,如果你在gtkrc里面有任何错误,例如某个标点符号不对或者某个颜色的数字少了一位之类,整个gtk主题就退回默认,正确的部分也不会显示了。
这一点不如icewm灵活。
好在没什么危险。
好了,一个简单的GTK主题就做完了。
最后在这里要解释一下一些例外情况。
在leafpad文本编辑器,显示都是符合gtk定义的。
在文件管理器ROX-Filer,文件所在的窗口应用背景(bg)和前景(fg)模式。
但thunar文件管理器不是,它把自己的目录和文件所在的窗口当成文本编辑器窗口,按基层(base)和文字(text)的颜色定义显示,而且,当你用鼠标点住一个目录或文件时,它呈现SELECTED状态,但你如果点一下目录(不是点住不放),它呈现ACTIVE状态,这和我们这里的gtk定义稍微有点不一样。
所以,我们对那些软件的显示也不能太较真了,这是linux,大家都很有个性呀。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- GTK 主题 制作
![提示](https://static.bdocx.com/images/bang_tan.gif)