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

QQ皮肤制作全程实录

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

图40

   接下来我们再来绘制QQ主菜单在普通状态时的的图形。我们在“工具栏”的图层里将QQ主菜单的位图图标选中,然后在属性框里把它的不透明度降到50%,如图41。然后再将这一处于普通状态时的QQ主菜单按钮建立切片并导出。

图41

   我们接着来画其它6个按钮。这6个按钮都是由水晶球所包裹着,所不同的是,这次的水晶球是凹陷在QQ主窗口里的。先来画一个25*25大小的圆形,使用由#575757至#FFFFFF的线性渐变,如图42。接着再画一个21*21的圆形,采用由# D7D7D7至# BABABA的椭圆形渐变填充,描边色为1像素柔化的# 000000。然后将这两个圆形进行水平与垂直对齐,如图43。
   我们把从“qq2004 icon.psd”文件里框选出来的“查找用户”图标放到这两个圆的上面来,如图44。

   为了使水晶按钮有反光的质感,我们在来画一个14*9的椭圆,使用由#FFFFFF至#FFFFFF的线性渐变,不透明度从100至0。如图45。然后还要在水晶球的下方画一个13*8的椭圆,同样使用#FFFFFF至#FFFFFF的线性渐变,不透明度则从0至90,羽化值为2。如图46。

   就这样,一个具有水晶质感的“查找用户”按钮就完成了。用相同的方法把其它的5个位于工具栏中的按钮也一一绘制出来,然后把它们按图47般移到QQ主窗体的下方。

图47

   再为这些按钮逐一建立导出切片,由于这里的按钮比较密集,需要注意的是,切片与切片之间不能相互重叠,否则将不能将按钮完整的进行导出。另外,在给导出的切片命名时,可以按照按钮所对应的功能来命名。而且我们这次所导出的按钮全是处于触发状态的,因此也别忘了在文件名的后面加个括号并注明“触发状态”。

图48

   接着我们再来绘制这6个按钮的普通状态。在“工具栏”图层中我们把这6个按钮的位图图标同时选中,然后在属性框中一次性的把它的的不透明度降到50%,如图49。

图49

   然后为这6个处于普通状态下的工具栏按钮建立切片后进行导出。工具栏按钮的绘制就完成了。

  在“侧边条按钮”图层里我们已经准备好了来自“qq2004 icon.psd”文件里的QQ侧边条按钮图标。而在这个“蓝色畅想”的QQSkin中,我没有对侧边条按钮像工具栏按钮那样做过多的“外包装”。因此我们只需将这些侧边条按钮的图标放置在QQ主窗体的左侧位置上,并进行垂直对齐与均匀分布后即可为其建立导出切片,如图50。

图50

   同样的,在导出这些按钮切片时要以这些按钮所对应的功能来命名,并在名移中注明“触发状态”。
   导出这些按钮后,我们再将这些图标同时选中,然后把这些图标的不透明度降至50%,并把这些图标以侧边条按钮处于未触发时的状态进行导出。这样一来,侧边条按钮的制作也就轻松完成了!

绘制“状态按钮”


   在“腾讯QQ2004皮肤编辑器”里把“在线”、“离开”、“隐身”和“离线”称为用户在使用QQ时的四种不同状态。这四种状态都可以在“状态按钮”中依据个人的QQ头像生动的表现出来。而不管你选用的是哪一个QQ头像,在状态按钮里都只有24*24大小。因此我所要绘制的这个“状态按钮”,实际上只是作为24*24这个QQ头像在不同状态时的衬托背景而已。
   先用“椭圆形”工具在QQ主窗体的右上角画一个32*32大小的圆形,然后对其使用由#FFFFFF至#5991EC的椭圆形渐变,描边色为#0F4099。如图51。

图51

   为使这个状态按钮具有水晶球的立体感,我们再绘制两个分别为29*29和36*36大小的圆形。接着把这两个圆形进行垂直和顶端对齐,然后将36*36的大圆向下移动3个像素,如图52。

图52

   将这两个圆同时选中后使用“修改—组合路径—打孔”命令。然后把新形成的路径进行无描边的白色实心填充,羽化值为1,并用“缩放”工具进行一定角度的旋转后,放到状态按钮的左上角上,如图53。

图53

   用“钢笔”工具在这这个状态按钮的左下角上绘制一个实边的白色三角形。然后将这个三角形复制一份,改用#053585填充后向左平移1个像素,如图54。

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



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

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