图16
至些，QQ主窗体就绘制完成了。接下来我们要把这个主窗体通过切片进行导出。先把“主窗体”图层内的所有对象全部选中，然后通过“修改—组合”命令把这些对象合成一组。然后在这一组合对象上点击鼠标右键，从弹出菜单里选择“插入切片”，如图17。
图17
因为QQSkin默认的图片格式为BMP格式，所以我们还要在“优化”面板中为即将导出的图片进行格式选择，如图18。
图18
然后我们在切片上点击右键，从弹出菜单中选择“导出所选切片”命令。此时会弹出一个文件保存路径的选择窗口。我们可以专门为这次QQSkin的制作新建一个文件夹，取名为“蓝色畅想”。然后把这个切片取名为“QQ主窗体”，并保存在“蓝色畅想”文件夹内，如图19。
图19
至此，QQ主窗体的绘制就完成了！
三、绘制“窗体按钮”
在“层”面板中点击“窗体按钮”图层，然后用“钢笔”工具在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
用“矩形”工具在“拉幕式面板”图层里画一个124*367大小的矩形，圆角度为10，采用由#FDFEFF至#CEDEFF的线性填充，描边色为#344FB7。如图33。
图33
调整该矩形的位置，使其顶部距QQ主窗体顶部约有63像素，从而为以后信息栏按钮的绘制预留一定的位置。然后在该矩形上建立导出切片，取名为“面板背景”后记得保存为BMP格式。
为了使最终完成的QQSkin能够更好的进行垂直伸拉，我们把当前这个QQ主窗体再次建立切片，然后将切片由上而下地把高度拉低至264像素，如图34。然后再将该切片导出为BMP格式的图片，取名为“工具栏背景”。
评论列表