[组图]QQ皮肤绘制全程实录(上)

　自QQ2003版推出之后，由于SIKN改用了支持透明色的功能，一下子就使得QQ2003版的Skin变得生动活泼起来。许多非专业的QQSkin设计爱好者也有了比以前更大的设计空间来发挥自己的想像力。因此，在这个时期中不管是专业的或非专业的QQSkin设计者所制作的QQSkin，都有更多至酷、至炫的精品。如今腾讯公司又推出了“腾讯QQ2004皮肤编辑器”，这又为制作QQSkin带来了更大的直观与便捷。这也让更多的网友自己动手设计并制作一款属于自己的个性QQSkin变得容易实现。下面就以图01中的这款名为“蓝色畅想”的QQSkin为例，为大家讲解在Fireworks中对这款QQSkin的绘制方法。而在教程的尾页也为大家提供了该QQSkin的下载。
( _, c. x/ R, ?! r一、准备工作　　在动手之前，我们很有必要先大至了解一下QQ主窗口的组成部分，如图01。

+ R! [( n+ R# U0 z$ ~) |
% Z) M% C  \5 ^9 v' X1 p
4 ~$ a) b. v6 x7 N7 ?! h图01　　可以看到，QQ的主窗口被分成了“主窗体”、“窗体按钮”、“拉幕式面板”等多个部分。因此我们在绘制这款QQSkin时为了避免图形对象太多而造成鼠标选取上的麻烦，在开始绘制前就可以先新建多个按QQSkin的组成部分命名的新图层，如图02。
: ?" K" h+ F* J3 ]


/ X. K) I+ ~/ m: |: R! s图02　　同样为了对象选取的方便，我们在“层”面板右上角的下拉菜单中，将“单层编辑”功能取消掉，使鼠标能够跨图层进行对象的选取，如图03。
  I" p% P! x/ E0 M2 B5 z

, {) Z" ^9 ^% d* Y0 f% g1 B0 s
图03　　随着QQ版本的不段更新，增加的新功能按钮也越来越多。如果重新为这些按钮绘制新图标的话，无疑会加大我们的绘图工作量。因此我们在这个QQSkin中仍然沿用默认的按钮图标。而这些图标素材可以在腾讯公司的网页中进行下载，网址是：http://219.133.40.137/qq2004icon.rar 。　　将素材下载并解压缩后，把里面的“qq2004 icon.psd”文件用Fireworks打开。然后在图层中可以看到，这里只有两个对象层。我们点击上面的一个对象层，然后“矩形选取框”工具先把第一排中的一个图标框选中，如图04。然后点击“复制”、“粘贴”就能把我们所需要的图标从中分离并复制出来，从而又不破坏“qq2004 icon.psd”原文件。
2 k  L/ \9 p4 v+ ?
1 B! m1 X- S; X* P0 _" V! c4 z! X1 e
9 O; c' L4 _4 h* [/ f/ _; b  Z4 Z7 y* Q
( r  |$ b1 L5 g4 d  m6 B图04　　用同样的方法，我把这五排图标中最上面的两排逐一选取并复制出来，如图05。

$ n: D2 X) O" n) U6 K
$ Z! p+ T1 F% `; n
  K" m8 M7 y. H图05　　然后要把这些图标剪切到用于绘制QQSkin文档的“侧边条按钮”图层和“工具栏”图层里，如图06。为了不影绘图，我们先把“侧边条按钮”、“工具条”这两个图层左边的“眼睛”图示暂时关闭。
3 {/ x7 m$ @; P- r0 r


图06　　而前面提到的“腾讯QQ2004皮肤编辑器”下载地址为：http://qqdl.tencent.com/qqskineditor1.1.exe　。当我们在绘制完QQSkin外观并将图片导出后，就可以在该软件中对QQSkin进行直观地编辑组装，直至最后生成QQSkin。
7 }: a  N$ i! U4 L  ]二、绘制“主窗体”
　　我们先从QQ主窗体画起。用“椭圆形”工具在名为“主窗体”的图层内画一个36*631大小的椭圆，然后将该椭圆再复制一份，并把复制品向右平行移动169个像素。再用“矩形”工具画一个169*631大小的矩形。然后把当前的这三个对象进行如图07般的水平对齐。
+ p3 Z0 O2 M! j
/ k# L% t0 N' T$ ~# o

0 L6 I1 e; \5 m8 b8 @　　把这三个对象同时选中后，使用“修改—组合路径—联合”命令，将其合成一个组合路径。然后用“缩放”工具将这个组合路径由上而下将其高度缩小至449像素，如图08。　　用“部分选择”工具分别点选这个组合路径位于水平中线的左右两个节点，使左边的节点向右平移5个像素，而右边的节点向左平移5个像素，如图09。
8 Q$ w% E9 a$ }( x$ D

# m1 T. `( s9 o- l5 i0 g  v) n
图09
　　完成后我们为这个组合路径由#4484E3至#9CBEF1进行线性渐变，描边色为#256CE4。如图10。

) d7 V2 _3 v' G0 m! N7 T, W3 T# P
7 @5 }  P0 }+ p: C, l4 t' m
图10
. ~' w2 M" }- g( `" z: I4 C0 h　把这个组合对象再复制一份，然后通过“修改—变形—数值变形”，在“数值变形”窗口的“缩放”列表中将复制的路径按比例缩小至95%。然后为这一复制对象使用由# FFFFFF至# BCD3F6的波纹渐变填充，描边色为# 256CE4，如图11。
$ b3 L' x; N2 b' u; }2 V
/ c" n, L/ Y4 F0 d! a
$ w  N' l1 }# _) `
图11
; T6 w/ Q. s4 u  E6 R9 x　　至此，QQ主窗体的第一部分就画好了，我们接着来画第二部分。画两个大小分别为202*73、202*99的椭圆和一个143*401大小的矩形。然后按图12般进行摆放。将这三个对象同时选中后，使用“修改—组合路径—联合”命令使其合成一个组合的路径对象。然后用“部分选择”工具和“钢笔”工具对这一组合路径进行编辑，使其最终形成如图13般的外形效果。因为QQ主窗口的最小高为507像素，所以这一对象的高度最好不要小于507像素。

5 ?; C) t7 o3 r" S

& b8 @! }6 ^  D/ l: z　　完成后我们对这一对象使用#236BE4的实心填充，描边色为#1449A3。然后将这个图形对象放在前面所绘制的主窗体第一部分的上面，如图14。

$ V4 w- l% K, c& R/ h

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

0 y$ o7 ~& e( T8 [/ K

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


: }& B% i6 K+ h
0 `4 G( O' R9 B0 k3 h1 y" _图16　　至些，QQ主窗体就绘制完成了。接下来我们要把这个主窗体通过切片进行导出。先把“主窗体”图层内的所有对象全部选中，然后通过“修改—组合”命令把这些对象合成一组。然后在这一组合对象上点击鼠标右键，从弹出菜单里选择“插入切片”，如图17。



5 N; @* p7 C: n9 \0 {1 B, i图17　　因为QQSkin默认的图片格式为BMP格式，所以我们还要在“优化”面板中为即将导出的图片进行格式选择，如图18。
( s$ q6 x9 A5 @2 |3 n! t
9 R. [3 j0 R% y9 F
, r( x+ c0 q+ {2 b2 S& p- l) ?
4 |+ r- {5 e1 X图18　　然后我们在切片上点击右键，从弹出菜单中选择“导出所选切片”命令。此时会弹出一个文件保存路径的选择窗口。我们可以专门为这次QQSkin的制作新建一个文件夹，取名为“蓝色畅想”。然后把这个切片取名为“QQ主窗体”，并保存在“蓝色畅想”文件夹内，如图19。
2 A# ?( k( G8 L  y, _! d

6 _: v. @' M; K* N/ N; a
0 R9 t3 L/ K5 |/ Y! [5 ]图19　　至此，QQ主窗体的绘制就完成了！
+ O4 A. o  E6 o) r三、绘制“窗体按钮”
　　在“层”面板中点击“窗体按钮”图层，然后用“钢笔”工具在QQ主窗体的右上角位置画一个如图20般的路径对象，然后对其使用由# 2455A6至# C1CEE6的线性渐变进行填充。
1 M6 U, i! R9 N: G1 o* G


图20
" u' l% P, X6 V; R7 _　　将这个对象进行复制，然后把复制品左边的节点向右移动1个像素，而右边的节点则向上平移1像素。然后为这个复制对象使用椭圆形的渐变填充，如图21。
/ U( S! F8 o, u: F8 b1 S
% X( j* e  x9 I. ~" t/ T% ~5 P

图21
　　完成后，把“窗体按钮”图层里当前这两个对象同时选中后进行组合，然后在该对象上建立切片并导出成BMP格式的图片。图片取名为“标题栏按钮背景”，如图22。

. h2 w/ A, g( i1 }* y  T

+ `7 z: s+ T# p& s) P- k+ _* e图22
% A* n; v' {  ?0 O9 _' w　　窗体上的三个按钮都是用水晶球的图形来表示的，因此我们只需画一个水晶球即可，其它两个可以另行复制来完成。先用“椭圆形”工具绘制一个26*26大小的圆形，对该圆采用由# 185CC3至# 306DC9的线性渐变，如图23。　　接着再画一个23*23的圆形，采用由# C6D7F0至# 185CC3的性线渐变进行填充，并将这两个圆形进行水平与垂直对齐，如图24。
/ D/ ?. y2 H5 Z

. |* P9 b- d- t) }$ `  L
7 T+ l; J1 b# ~( j　　再画一个18*12大小的椭圆，采用由#FFFFFF至#FFFFFF的线性填充，并把右边的透明度滑块设置为0。
6 {" t4 h# U9 O3 x: q3 C6 c
; R4 x: o5 P% b( T8 _! I# @8 z; `
! h2 {6 Y' Y7 Y2 z$ _8 [: f
图25
　　这样，一个水晶球就画好了，我们把这三个对象同时选中后通过“修改—组合”命令将其组合在一起，然后用“缩放”工具把这个水晶球缩小至13*13大小。接着再复制两个相同的水晶球并安放在窗口按钮的相应位置上，如图26。

2 `5 ]" W1 Q: T% Q
! S% _+ J, g. O( B
图26
* Z3 ~1 s# ]) m　　为了标明这三个按钮的相应功能，我们还要在上面画上“—”、“+”和“X”这三个符号。用“直线”工具先在“关闭”按钮上画一条5*5的无填充1像素描边斜线，描边色为全白色。如图27。



图27
　　再将该斜线复制多三条出来，通过移动及垂直翻转的方式，最终拼成一个“X”的交叉符号。然后把这四条直线同时选中后进行组合，如图28。

0 k9 A1 F7 [4 [- ^+ d% Q

图28
　　用相同的方法把“—”和“+”这两个符号出画出来，然后放在各自的水晶球按钮上，如图29。
* r7 s6 N7 I( n7 [. m


图29
　　如此一来这三个按钮又都画好了。然后我们依次为这三个水晶球建立导出切片，并按其相应的按钮功能将切片取名为“最小化按钮”、“颜色编辑按钮”和“关闭按钮”，如图30。
5 a% U) A6 _: y" l# T3 X; i

8 R7 B$ v5 v9 n' u- L
图30
　　别忘了，这三个按钮在用于QQSkin的时候是可以有触发状态的，也就是说当鼠标指向这些按钮时，按钮的状态会有所变化，实际上也就是换了一种图像。因此我们把这三个按钮中的“—”、“+”和“X”符号同时选中后，将其描边色由白色改为#053585，作为这三个按钮在被激发时的状态，如图31。


# T* x: p$ e; `  {" h
  G8 {5 X7 `  a! x+ U3 F9 c1 z图31
3 l) \! F( T* F& [/ z" O% }/ i　　然后再为这三个按钮依次建立导出切片，以BMP格式保存在“蓝色畅想”文件夹中。为了便于辨认，我们把这三个按钮依次命名为“最小化按钮（触发状态）”、“颜色编辑按钮（触发状态）”和“关闭按钮（触发状态）”，如图32。

  s& z0 p1 i3 h: J, w$ w
1 w9 ~6 p# |: m
! X+ _* K% g  T, N  t图32

+ ?  M3 ~& P- d  C0 k7 u  ?四、绘制“拉幕式面板”　　用“矩形”工具在“拉幕式面板”图层里画一个124*367大小的矩形，圆角度为10，采用由#FDFEFF至#CEDEFF的线性填充，描边色为#344FB7。如图33。


2 s6 o2 g2 p4 w+ c' ], F
1 Q3 u) f3 u) w图33　　调整该矩形的位置，使其顶部距QQ主窗体顶部约有63像素，从而为以后信息栏按钮的绘制预留一定的位置。然后在该矩形上建立导出切片，取名为“面板背景”后记得保存为BMP格式。　　为了使最终完成的QQSkin能够更好的进行垂直伸拉，我们把当前这个QQ主窗体再次建立切片，然后将切片由上而下地把高度拉低至264像素，如图34。然后再将该切片导出为BMP格式的图片，取名为“工具栏背景”。

; B# S) Y  n8 ~3 ^7 D# X

图34　　因为“蓝色畅想”这款QQSkin在色调上与“QQ2004” Skin的色调相似，所以我们依然可以在“腾讯QQ2004皮肤编辑器”中沿用“QQ2004”Skin的拉幕式模版。因此我们也就省去了在Fireworks里重新为“蓝色畅想”Skin绘制拉幕式按钮及垂直滚动条了。但在本例教程中，为了使大家能够较全面的看到“蓝色畅想”Skin的外形，才画蛇添足的画上拉幕式按钮及垂直滚动条，如图35。

5 R. q7 P9 V8 p. l" u0 u0 H4 Q
5 ~* \. S  v6 {+ K" F# C; V
4 J& r+ R( c' w' i6 ?! H图35　　这样一来，“拉幕式面板”的绘制也就轻松完成了。