|
QQ皮肤制作全程实录(4) 为了使最终完成的QQSkin能够更好的进行垂直伸拉，我们把当前这个QQ主窗体再次建立切片，然后将切片由上而下地把高度拉低至264像素，如图34。然后再将该切片导出为BMP格式的图片，取名为“工具栏背景”。
图34
因为“蓝色畅想”这款QQSkin在色调上与“QQ2004” Skin的色调相似，所以我们依然可以在“腾讯QQ2004皮肤编辑器”中沿用“QQ2004”Skin的拉幕式模版。因此我们也就省去了在Fireworks里重新为“蓝色畅想”Skin绘制拉幕式按钮及垂直滚动条了。但在本例教程中，为了使大家能够较全面的看到“蓝色畅想”Skin的外形，才画蛇添足的画上拉幕式按钮及垂直滚动条，如图35。
图35
这样一来，“拉幕式面板”的绘制也就轻松完成了。
五、
我们点击“工具栏”图层，开始在该层中绘制这7个按钮。先用“钢笔”工具在QQ主窗体的右下角位置上绘制出如图36般的路径。
图36
对该路径使用由# 2F54AB至# FFFFFF的线性渐变填充。然后将该路径再复制一份，并在“工具栏”图层中将这一复制品重命名为“主菜单按钮背景”，一会我们将会用到它。
我们把从“qq2004 icon.psd”文件里框选出来的“QQ主菜单”图标放到“主菜单按钮背景”对象上面。再用“文字”工具以26号的“Smudger LET”字体在图标的旁边输入“menu”的字样，颜色为#F2F200，采用“强力消除锯齿”功能。然后用“缩放”工具对该文字对象旋转至一定角度，如图37。
图37
选中“主菜单按钮背景”对象，并把它拉到“工具栏”图层内的最上层来。用“部分选择”工具使该路径左边的节点向右移动1像素，而右边的节点侧向左平移1像素。然后还要把顶部的节点向下平移1像素。完成后对该路径使用由#FFFFFF至#FFFFFF的线性渐变，如图38。
图38
这了使这个主菜单按钮更具透明质感，我们用“钢笔”工具再画一个如图39般的对象。对其采用线性填充，由#FFFFFF至#FFFFFF，而透明度侧由100至0。
图39
完成主菜单的绘制后，我们把画布改成#113A80，然后将该按钮建立切片并以“QQ主菜单（触发状态）”为名导出。如图40。
图40
接下来我们再来绘制QQ主菜单在普通状态时的的图形。我们在“工具栏”的图层里将QQ主菜单的位图图标选中，然后在属性框里把它的不透明度降到50%，如图41。然后再将这一处于普通状态时的QQ主菜单按钮建立切片并导出。
图41
我们接着来画其它6个按钮。这6个按钮都是由水晶球所包裹着，所不同的是，这次的水晶球是凹陷在QQ主窗口里的。先来画一个25*25大小的圆形，使用由#575757至#FFFFFF的线性渐变，如图42。接着再画一个21*21的圆形，采用由# D7D7D7至# BABABA的椭圆形渐变填充，描边色为1像素柔化的# 000000。然后将这两个圆形进行水平与垂直对齐，如图43。
| 
