veket官方网站论坛

veket

 找回密码
 要注册
搜索
查看: 7485|回复: 18

用gimp制作最简单的光影

[复制链接]
发表于 2010-12-3 15:43 | 显示全部楼层 |阅读模式
本帖最后由 perryfa 于 2010-12-4 14:19 编辑

昨天看到zxcyzcs制作出了第一个xfce主题,我很欣慰。在讨论中提到了光影效果的制作问题。合适的光影效果对任何一张图都是至关重要的,技巧性非常强,我自己在这方面也只会点皮毛,被zxcyzcs同学激励,我也分享一点出来给大家做个参考吧。

首先我们看这张图:

                               
登录/注册后可看大图

1.png
这是我做的一个e17的主题的程序窗口,看图中的标题栏部分,标题栏看上去是玻璃的,有厚度,这种效果完全是用光影效果画出来的。
现在,我来一步步做给大家看。

首先,我开一张空白的200x200的图片,给图片整个灌上土黄色:

                               
登录/注册后可看大图
   2.png
纯色的图片,没有任何光影效果,看上去和第一张图的玻璃感标题栏没有任何相同之处。

仔细看标题栏可以发现,图的上方和下方颜色深浅是不一样的,上面比较黑,下面比较亮,所以,现在我给这个土黄色的图层上加上一个透明图层,并且加上黑色阴影。
我用gimp中的混合工具,设置如下图:

                               
登录/注册后可看大图
   3.png
首先我把前景色设为黑色,把“渐变”设置为“前景到透明”,把“形状”设置为“Linear”,就是一般的“线性”的意思。然后到新的空白图层上去拉,从最上面拉到最下面,出来就是这样的图层(关掉之前的土黄色图层):

                               
登录/注册后可看大图
   4.png
把之前的土黄色图层点开小眼睛,就是这样的

                               
登录/注册后可看大图
   5.png
我对比了一下标题栏,感觉黑色有点太深了,所以,在图层窗口我调整了一下“不透明度”,把这个黑色渐变的图层的不透明降低,降到30左右,感觉好一些了:

                               
登录/注册后可看大图
   6.png
这个图层就完成了。

上面这张图和标题栏的图还有很大的差别。在标题栏的上方,明显有厚度的感觉,感觉这是个玻璃条凸出平面的,如果仔细看的话,你会发现,所谓的凸出其实只是有些灰白色的颜色在上面,也就是通常说的“高光”。现在我来做这个白色高光图层。
建立一个新的透明图层。
还是使用混合工具:

                               
登录/注册后可看大图
   7.png
前景色: 白色
渐变: 前景到透明
形状: 对称线性
对称线性和一般的线性不同,一般的线性的渐变该是从鼠标开始拉到结束的颜色渐变,而对称线性是从鼠标开始拉到结束颜色有渐变,同时,在鼠标开始点的另一个方向也有同样的渐变颜色出现,如果你从上到下拉,那么颜色是上下对称的,如果是左右拉,那就是左右对称。
现在我要实现颜色的上下渐变,同时不想要完全对称,怎么拉呢?这样:

                               
登录/注册后可看大图
   8.png
鼠标点接近上边沿,然后往下拉一小段,即上图的那根上下的细线,那就是我用鼠标拉出来的轨迹,我只拉一小段,这样,从前景的白色到背景的透明就在这一小段里完成了。拉这个小细线要注意一点,线一定要拉直,不能有倾斜,不然出来的效果就不是我要的了(你可以试试斜着拉线,看看会是什么样)。出来的效果如下图:

                               
登录/注册后可看大图
   9.png
因为小细线下面部分我没有拉到,所以就是透明的,而细线的上面部分,本来应该是完全和下面部分对称,但因为我在上面部分只留了很少的空间,所以看起来就是一点点,就是这一点点体现出了这块玻璃板上边沿的厚度。
我自己觉得这个白色高光有点太亮了,有突兀感,所以,把这个图层也降低一下不透明度,设成70左右,看上去就柔和一些了:

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

现在来处理图片的下面部分。从标题栏可见,图片的下面部分是比较亮的黄色,颜色比较浅。这个效果还是可以用混合工具来实现。
建立一个新的透明图层。
直接在第一张图片里取来橘色作为前景色,在混合工具里设置:
渐变: 前景到透明
形状: 对称线性
鼠标这样拉动:

                               
登录/注册后可看大图
   11.png
鼠标点接近下边沿,往上拉,依然是下面留出一小部分。为了让淡黄色看上去柔和,我把这个图层的不透明设为90.

                               
登录/注册后可看大图
   12.png
上图看起来已经像个玻璃了,最后,我又加了了一个新图层,在上下边沿各加了三个像素宽的深色边线,让玻璃的凸出感更强一些。这就是最后的图了:

                               
登录/注册后可看大图
13.png
如果觉得效果不满意,这张图还可以反复调整,因为都是分层画的,调整起来十分简单,例如黑色图层可以更透明一些,甚至干脆去掉黑色图层,又例如底部的亮光可以更宽一些等等。我在这里只是演示一个过程,并没有很注意地调整效果。事实上,我在做主题时,这张图调整了不知道多少次。作图就是这样,需要非常耐心。
这是我上面作图过程的xcf文件,想学的同学可以下载来参考,主要就是看每个图层:
lighting-effects.xcf.tar.gz (15.81 KB, 下载次数: 8)
发表于 2010-12-3 20:33 | 显示全部楼层
又有新教程啦,真好,论坛换了风格了还未适应过来,找了很久才找到
发表于 2010-12-3 23:56 | 显示全部楼层
楼主又用新主题了,楼主真是从未被超越啊,啥时都用新主题
发表于 2010-12-4 09:29 | 显示全部楼层
gimp的教程网上很缺乏啊,感谢楼主,要好好学习实验
发表于 2010-12-4 11:37 | 显示全部楼层
实现颜色的上下渐变............gimp绝对是个技术活啊
您需要登录后才可以回帖 登录 | 要注册

本版积分规则

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

GMT+8, 2024-4-20 21:23

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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