三、绘制“窗体按钮”

　　 在“层”面板中点击“窗体按钮”图层，然后用“钢笔”工具在QQ主窗体的右上角位置画一个如图20般的路径对象，然后对其使用由# 2455A6至# C1CEE6的线性渐变进行填充。

图20

　　 将这个对象进行复制，然后把复制品左边的节点向右移动1个像素，而右边的节点则向上平移1像素。然后为这个复制对象使用椭圆形的渐变填充，如图21。

图21

　　 完成后，把“窗体按钮”图层里当前这两个对象同时选中后进行组合，然后在该对象上建立切片并导出成BMP格式的图片。图片取名为“标题栏按钮背景”，如图22。

图22

　　 窗体上的三个按钮都是用水晶球的图形来表示的，因此我们只需画一个水晶球即可，其它两个可以另行复制来完成。先用“椭圆形”工具绘制一个26*26大小的圆形，对该圆采用由# 185CC3至# 306DC9的线性渐变，如图23。
　　 接着再画一个23*23的圆形，采用由# C6D7F0至# 185CC3的性线渐变进行填充，并将这两个圆形进行水平与垂直对齐，如图24。

　　 再画一个18*12大小的椭圆，采用由#FFFFFF至#FFFFFF的线性填充，并把右边的透明度滑块设置为0。

图25

　这样，一个水晶球就画好了，我们把这三个对象同时选中后通过“修改—组合”命令将其组合在一起，然后用“缩放”工具把这个水晶球缩小至13*13大小。接着再复制两个相同的水晶球并安放在窗口按钮的相应位置上，如图26。

图26

　　 为了标明这三个按钮的相应功能，我们还要在上面画上“—”、“+”和“X”这三个符号。用“直线”工具先在“关闭”按钮上画一条5*5的无填充1像素描边斜线，描边色为全白色。如图27。

图27

　　 再将该斜线复制多三条出来，通过移动及垂直翻转的方式，最终拼成一个“X”的交叉符号。然后把这四条直线同时选中后进行组合，如图28。

图28

　　 用相同的方法把“—”和“+”这两个符号出画出来，然后放在各自的水晶球按钮上，如图29。

图29

　　 如此一来这三个按钮又都画好了。然后我们依次为这三个水晶球建立导出切片，并按其相应的按钮功能将切片取名为“最小化按钮”、“颜色编辑按钮”和“关闭按钮”，如图30。

图30

　　 别忘了，这三个按钮在用于QQSkin的时候是可以有触发状态的，也就是说当鼠标指向这些按钮时，按钮的状态会有所变化，实际上也就是换了一种图像。因此我们把这三个按钮中的“—”、“+”和“X”符号同时选中后，将其描边色由白色改为#053585，作为这三个按钮在被激发时的状态，如图31。

图31

　　 然后再为这三个按钮依次建立导出切片，以BMP格式保存在“蓝色畅想”文件夹中。为了便于辨认，我们把这三个按钮依次命名为“最小化按钮（触发状态）”、“颜色编辑按钮（触发状态）”和“关闭按钮（触发状态）”，如图32。

图32

出处：太平洋电脑网
责任编辑：蓝色

上一页 绘制主窗体 下一页 绘制拉幕式面板

◎进入论坛Photoshop、Fireworks版块参加讨论