现在位置:中国IDC吧>网页设计>Fireworks教程> 文章内容

QQ皮肤制作全程实录

收藏发布 来源:互联网 作者:中国IDC吧 更新日期:2008-10-07 点击:
自QQ2003版推出之后,由于SIKN改用了支持透明色的功能,一下子就使得QQ2003版的Skin变得生动活泼起来。许多非专业的QQSkin设计爱好者也有了比以前更大的设计空间来发挥自己的想像力。因此,在这个时期中不管是专业的或非专业的QQSkin设计者所制作的QQSkin,都有更多至酷、至炫的精品。如今腾讯公司又推出了“腾讯QQ2004皮肤编辑器”,这又为制作QQSkin带来了更大的直观与便捷。这也让更多的网友自己动手设计并制作一款属于自己的个性QQSkin变得容易实现。下面就以图01中的这款名为“蓝色畅想”的QQSkin为例,为大家讲解在Fireworks中对这款QQSkin的绘制方法。而在教程的尾页也为大家提供了该QQSkin的下载。 一、准备工作

   在动手之前,我们很有必要先大至了解一下QQ主窗口的组成部分,如图01。

图01

   可以看到,QQ的主窗口被分成了“主窗体”、“窗体按钮”、“拉幕式面板”等多个部分。因此我们在绘制这款QQSkin时为了避免图形对象太多而造成鼠标选取上的麻烦,在开始绘制前就可以先新建多个按QQSkin的组成部分命名的新图层,如图02。

图02

同样为了对象选取的方便,我们在“层”面板右上角的下拉菜单中,将“单层编辑”功能取消掉,使鼠标能够跨图层进行对象的选取,如图03。

图03

   随着QQ版本的不段更新,增加的新功能按钮也越来越多。如果重新为这些按钮绘制新图标的话,无疑会加大我们的绘图工作量。因此我们在这个QQSkin中仍然沿用默认的按钮图标。而这些图标素材可以在腾讯公司的网页中进行下载,网址是:qq2004icon.rar 。
   将素材下载并解压缩后,把里面的“qq2004 icon.psd”文件用Fireworks打开。然后在图层中可以看到,这里只有两个对象层。我们点击上面的一个对象层,然后“矩形选取框”工具先把第一排中的一个图标框选中,如图04。然后点击“复制”、“粘贴”就能把我们所需要的图标从中分离并复制出来,从而又不破坏“qq2004 icon.psd”原文件。

图04

   用同样的方法,我把这五排图标中最上面的两排逐一选取并复制出来,如图05。

图05

   然后要把这些图标剪切到用于绘制QQSkin文档的“侧边条按钮”图层和“工具栏”图层里,如图06。为了不影绘图,我们先把“侧边条按钮”、“工具条”这两个图层左边的“眼睛”图示暂时关闭。

图06

   而前面提到的“腾讯QQ2004皮肤编辑器”下载地址为:http://qqdl.tencent.com/qqskineditor1.1.exe。当我们在绘制完QQSkin外观并将图片导出后,就可以在该软件中对QQSkin进行直观地编辑组装,直至最后生成QQSkin。

二、绘制“主窗体”

   我们先从QQ主窗体画起。用“椭圆形”工具在名为“主窗体”的图层内画一个36*631大小的椭圆,然后将该椭圆再复制一份,并把复制品向右平行移动169个像素。再用“矩形”工具画一个169*631大小的矩形。然后把当前的这三个对象进行如图07般的水平对齐。

   把这三个对象同时选中后,使用“修改—组合路径—联合”命令,将其合成一个组合路径。然后用“缩放”工具将这个组合路径由上而下将其高度缩小至449像素,如图08。
   用“部分选择”工具分别点选这个组合路径位于水平中线的左右两个节点,使左边的节点向右平移5个像素,而右边的节点向左平移5个像素,如图09。

图09

   完成后我们为这个组合路径由#4484E3至#9CBEF1进行线性渐变,描边色为#256CE4。如图10。

图10

  把这个组合对象再复制一份,然后通过“修改—变形—数值变形”,在“数值变形”窗口的“缩放”列表中将复制的路径按比例缩小至95%。然后为这一复制对象使用由# FFFFFF至# BCD3F6的波纹渐变填充,描边色为# 256CE4,如图11。

图11

   至此,QQ主窗体的第一部分就画好了,我们接着来画第二部分。画两个大小分别为202*73、202*99的椭圆和一个143*401大小的矩形。然后按图12般进行摆放。将这三个对象同时选中后,使用“修改—组合路径—联合”命令使其合成一个组合的路径对象。然后用“部分选择”工具和“钢笔”工具对这一组合路径进行编辑,使其最终形成如图13般的外形效果。因为QQ主窗口的最小高为507像素,所以这一对象的高度最好不要小于507像素。

   完成后我们对这一对象使用#236BE4的实心填充,描边色为#1449A3。然后将这个图形对象放在前面所绘制的主窗体第一部分的上面,如图14。

图14

   把这一对象再复制一份,然后使用“缩放”工具在按住Alt键不放的情况下沿中心点将其高度缩小至494像素,用相同的方法再将其宽度缩小至184像素。然后用#84AFF2对其进行无描边的实心填充,羽化值为10。如图15。

图15

  最后我们还要在主窗体的左上角用19号的“Smudger LET”字体输入“QQ2004”的字样,颜色为全白色,选用“强力消除锯齿”功能。然后再将该文字对象复制一份,颜色改为# FFFF00后将其向左和向上各移动1个像素。如图16。

上一页12 3 4 下一页

收藏此页到网摘/书签:
所有评论

评论列表

用户名: 新注册) 密码: 匿名评论