Linux中国 Linux中国门户站!
设为主页 设为主页
收藏本站 收藏本站
 
当前位置 :首页 ->网站设计 ->Fireworks ->正文

QQ皮肤制作全程实录

来源:Linuxdby.com 作者:Webmaster 时间:2007-04-27 点击: [收藏] [投稿]

图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格式的图片,取名为“工具栏背景”。

图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。

 如果您对本文有任何疑问或者建议,请到讨论区发表您的意见: >> 论坛入口 <<



上一篇:Firewoks 营造残破纹理   下一篇:制作一款打字效果的LOGO

文章评论】 【收藏本文】 【推荐好友】 【打印本文】 【我要投稿】 【论坛讨论
更多相关文章
Power by linux-cn.com 粤ICP备05006655号