veket官方网站论坛

veket

 找回密码
 要注册
搜索
查看: 5074|回复: 8

xfwm4主题介绍及制作流程 (二)范例

[复制链接]
发表于 2010-8-19 20:39 | 显示全部楼层 |阅读模式
本帖最后由 perryfa 于 2011-8-21 15:36 编辑

第二部分 制作流程(范例)

做主题第一件事当然是构思。一般来说,总是先有了想法,然后才会起意要做个主题来实现自己的想法。这种想法,可能是因为你看见了一个中意的网页,或者打一个画面漂亮的游戏,或者仅仅是看见了一张好看的图。
借用这个范例,我把我曾经有过的一个想法来实现一下。这个想法来自以前看过的一张图,一个win下的系统检测软件的界面,印象深刻。

首先,我从系统的主题目录(/usr/share/themes/)下面随便选择一个子目录,在thunar里复制粘贴并改名,于是一个新的主题目录产生了:
/usr/share/themes/Perryfa-MetalNavy
然后,在xfce桌面设置界面选择这个新的主题,因为我什么都没有做,所以界面暂时是原来的主题的模样:

                               
登录/注册后可看大图


3.png
现在,我开始改变这个模样。

第一步 active程序窗口标题栏
标题栏通常是最重要的部分,因为它显眼(但我这个主题的重点不在这里,所以标题栏会比较简单)
我要做的这个标题栏比较简单,只需要做两张图,其他的全部采用链接。也就是说程序窗口顶上一条是一样的图片。
我选定标题栏的高度为27像素,一般来说,显示器的分辨率大的话,标题栏应该稍微高一些,以前一般都会选择30像素的高度。但因为今年发布的系统都号称要倾向于上网本,那么显示器的分辨律就会比较小,那么标题栏就不能太高,可以小到22像素。我选择的27是比较适中的(越小越难做)。
这是title-1-active.xpm,很简单,纯黑。图片大小6x27.

                               
登录/注册后可看大图


4.png
title-1-active.png就比较复杂一点,因为所有的光影效果都在这张图实现,我做的这个是比较简单的仅仅只有两个图层,一个是往黑色底色上覆盖一些灰色的点状条纹,这个图层的不透明度是70%,另一个图层负责在标题栏顶部加高光,不透明度50%。模仿某种胶木板的感觉。就是这个样子:

                               
登录/注册后可看大图


5.png
做完这两张图以后,我把剩下的2、3、4、5四对图全部链接到title-1-active,也就是说它们全都是一样,于是重新加载主题以后,就出来这个样子:

                               
登录/注册后可看大图


6.png
看上去已经开始不一样了。仔细看这个图(作图的第一要素是会看图),灰色点状斜纹使平面有了质感,可以想象摸上去是有花纹凹凸的,而非简陋的平板。而顶部的白色高光使得黑色板有了厚度的感觉。白色高光和黑色阴影的运用是作图最首要的技巧(当然,我的水平还是相当菜鸟的)。

第二步 active程序窗口的左右侧边沿和左右上角
这两个部分通常是会在一起做的,因为需要衔接在一起看效果。先做左边(或右边,随你便了)。

left-top-active.xpm,这张图比较简单,大小是15x27。这个27的高度是和标题栏一致的,而15的宽度是和下面的左边沿的宽度一致。

                               
登录/注册后可看大图
   7.png

left-top-active.png,大小当然和上图一样。
这张图就比较复杂了,因为光影效果都在这里。我无法在这个教程里细说gimp做图的技巧(那样的话这个教程就写不完了),只能简单地说,我在这里加了黑色胶木板的斜纹、顶光(因为要和标题栏图片无缝衔接),左边的不锈钢弯管(这是我要的效果),黑色胶木板左边沿的高光(和左边沿无缝衔接),总共是4个图层叠加在一起。每个图层,通常都需要几次、十几次地修改、重画,每改一次都需要重载主题看效果。

                               
登录/注册后可看大图
   8.png

left-active.xpm,大小是15x27. 之所以高度是27,是因为这个左边沿的黑色胶木板并不是完全均匀材质的,和标题栏一样,是有斜纹的,所以需要一定的高度(其实不需要27, 我只是比较懒,直接把title-1-active.xpm拿过来作为一个图层,省了重新画图的功夫)。
左边是不锈钢管,右边是黑色胶木板,因为是底图,所以比较简单,胶木板的底图就是全黑。

                               
登录/注册后可看大图
   9.png

left-active.png, 左边是不锈钢管,右边是黑色斜纹和高光两个图层(黑色斜纹图层也是直接把title-1-active.png拿来的)。

                               
登录/注册后可看大图
   10.png

经过不知道多少次的修改,终于把大致效果画好了,就是这个样子:

                               
登录/注册后可看大图


11.png

接下来的事情就比较好办了。因为程序窗口大多是对称的,所以右边沿和右上角只需要翻转左边的图就可以了。关于翻转,这里有个讲究,我假设屏幕顶上中部有光源,这样左右两边的光影效果就是对称的,这个假设其实是为了偷懒,我以前做的主题,曾经是把光源想象在左边或右边的,这样翻转就不可以,因为左右边的光影效果是不对称的。
把上面四张图在gimp里实行水平翻转,保存为:
right-top-active.xpm/png
right-active.xpm/png
重载主题,就变成这个样子:

                               
登录/注册后可看大图


12.png

第三步 active程序窗口的左右下角和底部
在视觉上,底部和左右下角比较不重要,因为人们很少会去注意它们。
我先做底部,这样做角的时候就比较容易衔接,可以直接把底部的图作为图层放在左右下角的图里稍作修整即可。

bottom-active.xpm,还是一张纯黑的底图(不贴了),大小是6x16,之所以需要6的宽度,是因为斜纹需要,而16的高度,是因为做左右角的图时,不锈钢弯管的转角需要较多的像素来表现。而左右角的空间和底部的高矮是有关系的。
bottom-active.png,底部光线比较暗,所以加了一点点阴影,斜纹还必须保持,这张图也不贴了,因为光源在顶部,底部应该比较暗,灰色条纹相对暗淡,已经几乎很难看清纹理了。

bottom-left-active.xpm,大小是15x16. 15的宽度和左边沿相同,而16的高度和底部相同。这张图还是两部分组成,胶木板的底图是纯黑,左边加上一个不锈钢弯管:

                               
登录/注册后可看大图
   13.png

bottom-left-active.png, 这张图也费了不少功夫,因为上要和左边沿衔接,右下要和底部衔接,加上光影的效果的转换(从边沿的亮到底部的暗),总共做了6个图层才勉强让上下衔接看上去不太突兀了。

                               
登录/注册后可看大图
   14.png

现在只要把上面两张图水平翻转就得到了右下角的图两张图:bottom-right-active.xpm和bottom-right-active.png。

现在,整个窗口终于看上去完整了

                               
登录/注册后可看大图


15.png

第四步 active程序窗口的按钮
从上图可见,其实我用来做模板的主题的按钮对本主题来说还算是比较协调的。可以不重新做。不过,考虑到这是在做范例,无论如何都得示范一下。而且,原主题缺了很多按钮,卷起/放下、钉住/松开、还有最大化后的恢复按钮,这些都没做。作为主题来说,不管别人用不用,按钮总是要做全的。用不用某个按钮的主动权交给用户。

首先,为了简单起见,我设定所有的按钮图片都是24像素宽,而高度必须和标题栏图片的高度一致,也就是一开始设定的27像素。按钮的大小是可以自己定义的,按钮太小,用户点击不便,按钮太大,会比较难看,显得粗鲁。有时候我会把按钮图片做成不一样的大小,也就是关闭按钮最宽,最大化最小,最小化中等。

因为按钮和标题栏是在同一排,所以按钮图片的背景和标题栏通常是一样的,在这个主题,背景图都是纯黑。所以,我先做了一张纯黑的24x27的图,命名为:close-active.xpm.
因为所有的按钮背景都是一样的颜色,一样的大小,所以,我就把其他按钮的active-xpm图片都链接到这个close-active.xpm,就是这些:
maximize-acitive.xpm, hide-active.xpm, shade-active.xpm, stick-active.xpm, menu-active.xpm
而对于状态按钮的背景图片,则链接到它们各自的主按钮背景,因为无论按钮是什么状态,背景都是一样的。也就是:
close-active.xpm 链接到 close-pressed.xpm
maximize-acitive.xpm 链接到 maximize-pressed.xpm, maximize-toggled-active.xpm 和 maximize-toggled-pressed.xpm
hide-active.xpm 链接到 hide-pressed.xpm
shade-acitive.xpm 链接到 shade-pressed.xpm, shade-toggled-active.xpm 和 shade-toggled-pressed.xpm
stick-acitive.xpm 链接到 stick-pressed.xpm, stick-toggled-active.xpm 和 stick-toggled-pressed.xpm
menu-active.xpm  链接到 menu-active.xpm

现在开始做png图片。
一般的做法,无论是什么按钮(不管是圆的方的),除了按钮本身,其余的边角部分都是默认和标题栏看上去一样的,那样整个标题栏会有一个整体的感觉。当然,做成异形的也是常见的,有想法就可以做,没有什么是不可以的。我这里演示的是常规的做法。

先把title-5-active.png打开,它将作为所有按钮的png图片的背景,因为大多数按钮都是放在标题栏的右边,和title-5毗邻。title-5-active.png只有6像素宽,而按钮图片需要24像素,所以需要把这个图片拼贴成24像素宽(因为有斜纹存在,所以不能使用图片的缩放,只能拼贴,这样斜纹才能保持)。在这个基础上叠放各种不同的按钮图。
要注意的是,menu按钮一般是放在标题栏的左边的,和title-1毗邻,在某些标题栏不对称且有图片拼贴的情况下,menu按钮的背景应该是和title-1衔接的。但在这个主题,因为标题栏比较简单,所以title-1和title-5是一样的。
现在,我们有了所有按钮的png的背景:

                               
登录/注册后可看大图
   16.png
然后,我做了一个圆形深凹图形叠放在上面(做这个主要就是明暗效果,因为我不是在写作图教程,就不介绍具体做法了):

                               
登录/注册后可看大图
   17.png
现在开始做一些关闭、最大化、最小化之类的标识符叠放在圆坑图形之上,这样最终的按钮png图片就做得了。这是关闭按钮的png图片:

                               
登录/注册后可看大图
   18.png
这是最大化按钮的png:

                               
登录/注册后可看大图
   19.png
剩下7种按钮的图片我就不一一贴了。

现在初步可以看一下按钮的效果了:

                               
登录/注册后可看大图


20.png
我一直认为按钮是非常难做的,因为地方太小,可供描绘的像素太少,想做好的效果按钮就必须很大,总体效果又变差了,很难。

通常,为了提高效率,我会把全部的按钮图片都作为图层放在一个图片里,存成.xcf文件,这是gimp的分层图片的格式(类似PSD),这样我只需要做一次背景,就可以通过打开开和关闭图层来呈现不同按钮图片效果并保存。另外,一些中间图层都会被很好地保存下来,如果我想改按钮就会变得相对容易。在一般的情况下,我做一个主题,按钮图片至少会整个重做一套(做完了看看不满意就重做一遍),最痛苦的一次做了四套(怎么做都觉得不好看)。

按钮的工作还没完成。上面我只做了一种状态:active。也就是平时我们看见的状态。
现在,我做pressed状态,也就是把鼠标按到按钮上时出现的图片。前面的active做完了,这个状态就比较简单了。我已经保存有这个button.xcf文件,现在我只要简单地加几个图层,就可以通过关闭图层、打开图层来保存不同的按钮图片。
我做了一个红色光晕图层,放在close按钮标识和背景层之间,保存为close-pressed.active:

                               
登录/注册后可看大图
   21.png
这样,当按钮按下时,会有红色光晕出现:

                               
登录/注册后可看大图
   22.png

我复制这个光晕图层,并把颜色改为绿色、黄色、蓝色、白色,保存下其他的pressed状态的按钮:
绿色光晕 - maximize-pressed.png  maximize-toggled-pressed.png
黄色光晕 - hide-pressed.png
蓝色光晕 - shade-pressed.png shande-toggled-pressed.png stick-pressed.png stick-toggled-pressed.png
白色光晕 - menu-pressed.png

然后,保存好button.xcf,后面做inactive状态的按钮时还要用的。

到此为止,active窗口的图片做完了。

第五步 inactive窗口

inactive窗口通常是被active窗口压在下面的,所以,它比较不重要,要注意的是,inactive窗口通常会比active窗口颜色要灰一些,亮度要低一些,外形也要简单一些。因为active窗口永远只有一个,而inactive窗口可能会有很多,如果太复杂太亮眼就会让屏幕显得很乱。

这个主题的xpm底图我都想要黑色的,所以,所有的inactive.xpm图片都和active.xpm图片相同。
对于所有的inactive.png,事实上,我现在做主题有点偷懒了(以前比较勤劳,都会特意去做一个不一样颜色的窗口,就是把前面的第一、二、三、四步重新走一遍,包括xpm底图都重新做,做法和做active窗口是一样的)。现在,我常常只是简单地给每张active的图片蒙上一层半透明的灰色存成inactive就行了。
对于这个范例主题,虽然我不想偷懒,但我想了半天,决定还是蒙灰色,因为active窗口是黑色的,用别的颜色的inactive窗口实在是不合适,不管换什么颜色都有可能喧宾夺主,不好看。所以,还是蒙灰色算了,让inactive窗口暗淡一些就可以了。

蒙灰色很简单,打开png图片加个图层用灰色全部填充,把图层不透明调一下,像这个主题,我用灰蓝色,不透明度是30. 然后保存成同名的inactive.png就可以了。做这一步只需要注意两点:
(1)所有的png图片必须蒙同样的颜色、不透明度必须要完全相同,不然窗口就会出现不能衔接的现象。
(2)对于按钮来说,inactive窗口的按钮是没有pressed状态的(因为你用鼠标点到inactive窗口的按钮的那一瞬间,inactive窗口已经变成了active窗口),所以只要简单地把所有9个按钮的active.png蒙上灰纱就可以了。pressed.png不用管。

把所有的png图片都蒙上一层(除了按钮的pressed状态的图片),保存文件,重置主题,出来是这个效果:

                               
登录/注册后可看大图


23.png
前面的“设置”窗口是active的,比较鲜明,后面的rox窗口是inactive的,比较灰。

好了,本主题的全部图片都做完了。

第六步 参数设置
xfwm4的参数设置非常简单。一般来说,拿个默认主题的themerc文件做模板,稍微改几个参数就可以了。并非每个参数都是需要你自己去写,如果themerc里面没有定义,就会跟着默认走,所以,如果你觉得效果可以了就可以不管,我也不是每个参数都懂的,需要用到了才会去尝试。
一般有如下这些:

button_offset=0   
#定义按钮离边沿的距离,单位是像素。如果设置为0,在我设置的这个窗口里,menu按钮会直接顶在最左边,而close按钮会顶在最右边。

button_spacing=0
#定义按钮之间的间隔,单位为像素。

full_width_title=false
#定义标题文字栏的宽度,ture/false. 如果这里定义为true,那么title-1和5都没有意义了,2、3、4三张图片占满,直接顶到两端的按钮。

title_horizontal_offset=0
#定义active窗口标题文字的左右位移,单位为像素。

title_vertical_offset_active=0
#定义active窗口标题文字的上下位移,单位为像素。这个参数很常用,因为在做一些特殊效果的标题栏时,有时候不希望标题文字在正中。

title_horizontal_offset_inactive=0
#定义inactive窗口标题文字的左右位移,单位为像素。

title_vertical_offset_inactive=0
#定义inactive窗口标题文字的上下位移,单位为像素。

title_shadow_active=true
#决定是否需要active窗口标题的文字阴影,true/false/frame.
false:不需要阴影
true:一般常见的阴影,也就是在文字笔画右边和下面有阴影。
frame:阴影色把文字笔画的四周都围上。

title_shadow_inactive=true
#决定是否需要inactive窗口标题的文字阴影,true/false/frame.

active_text_color=#1B96C0
#active程序窗口标题文字色。

inactive_text_color=#000000
#inactive程序窗口标题文字色。

active_text_shadow_color=#585E66
#active程序窗口标题文字阴影色。

inactive_text_shadow_color=#BDBFBE
#inactive程序窗口标题文字阴影色。

title_shadow_active=frame
# active程序窗口的标题文字阴影整个框起文字。

shadow_delta_height=0
shadow_delta_width=0
shadow_delta_x=2
shadow_delta_y=2
#上面4个参数是定义程序窗口的阴影的位移和大小的。前两个是分别定义x和y方向的阴影的宽度,后两个是位移。当然,前提是你的显卡支持cmposite(最近10年以内的主流显卡一般都支持),可以显示阴影和透明。如果统统设置为0,仍然会有阴影(如果你在“窗口管理调整”的“混合设置”里已经设置上了),会显示默认的阴影宽度,没有位移。

show_app_icon=true
#定义menu按钮上是否显示程序的图标,true/false。如果没有这个参数定义,默认是不显示图标的。

#button_layout=O|HMC
#定义按钮的排列顺序。这参数新版的xfce已经不用了,因为可以在界面由用户自己定义,这样更友好。但一些老的主题还会有这个参数,一旦这个参数定义了,用户在设置界面就不能自定义按钮了,所以,这种定义行一旦发现,一定要注释掉。类似的参数还有:
#resize_opacity=100
#move_opacity=60
#popup_opacity=90
#这三个是定义窗口不透明度的参数。如果这里定义了,界面定义就不起作用,所以,也要坚决干掉。

好了,就这么多了。这个xfwm4主题做完了。
最后,要看一下效果了。这个主题的名字是MetalNavy,但是从xfwm4主题上几乎看不到任何蓝色,因为,我通常会在做xfwm4主题的同时做一个与之相配的gtk主题,常常是两边来回做,这样能让程序窗口内外比较协调。对于这个主题,蓝色主要在gtk主题里:

                               
登录/注册后可看大图


24.png

大功告成。

对于能读完如此枯燥乏味的长帖的同学是应该有奖励的,所以:
http://dl.dbank.com/c0ae8w1v3a
里面有这个xfwm4和gtk主题,解压到主题目录即可。主题目录里还包括所有我做图时存下的.xcf图片分层文件,便于学习画图的同学参考。
发表于 2010-8-19 21:00 | 显示全部楼层
:39) 美女版主写教程了,顶
:83)
发表于 2010-8-19 21:02 | 显示全部楼层
辛苦楼主了,收藏先。
 楼主| 发表于 2010-8-19 21:18 | 显示全部楼层
累死我了,我去晕会儿先。
发表于 2010-8-19 22:17 | 显示全部楼层
需要几次、十几次地修改、重画,每改一次都需要重载主题看效果
:47) ,辛苦楼主了:83)
您需要登录后才可以回帖 登录 | 要注册

本版积分规则

QQ|手机版|Archiver|veket官方网站论坛 ( 粤ICP备 11052856 )

GMT+8, 2024-7-13 06:30

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表