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

相关下载：　　“蓝色畅想”QQSkin源文件(zip压缩格式，265K)　　“蓝色畅想”QQSkin下载(zip压缩格式，473K)
五、绘制“工具栏按钮”　　我们点击“工具栏”图层，开始在该层中绘制这7个按钮。先用“钢笔”工具在QQ主窗体的右下角位置上绘制出如图36般的路径。

; s  G1 T4 {& ]/ D. M. V
( C9 I% s+ j  `" p4 y% Y2 |( W
: ]/ y) \0 V9 y: X& Y3 n# {图36　　对该路径使用由# 2F54AB至# FFFFFF的线性渐变填充。然后将该路径再复制一份，并在“工具栏”图层中将这一复制品重命名为“主菜单按钮背景”，一会我们将会用到它。　　我们把从“qq2004 icon.psd”文件里框选出来的“QQ主菜单”图标放到“主菜单按钮背景”对象上面。再用“文字”工具以26号的“Smudger LET”字体在图标的旁边输入“menu”的字样，颜色为#F2F200，采用“强力消除锯齿”功能。然后用“缩放”工具对该文字对象旋转至一定角度，如图37。
) M. V- d! j+ Q- n( \# }; a1 C

) `8 F0 i- k8 Y1 R( u
0 \: S! M2 A% t9 B; ~# m图37　　选中“主菜单按钮背景”对象，并把它拉到“工具栏”图层内的最上层来。用“部分选择”工具使该路径左边的节点向右移动1像素，而右边的节点侧向左平移1像素。然后还要把顶部的节点向下平移1像素。完成后对该路径使用由#FFFFFF至#FFFFFF的线性渐变，如图38。
2 V" g) O) z; m  M8 s. u5 P. X7 w


图38　　这了使这个主菜单按钮更具透明质感，我们用“钢笔”工具再画一个如图39般的对象。对其采用线性填充，由#FFFFFF至#FFFFFF，而透明度侧由100至0。



图39　完成主菜单的绘制后，我们把画布改成#113A80，然后将该按钮建立切片并以“QQ主菜单（触发状态）”为名导出。如图40。
( u. k& H( p8 b) F


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


$ F3 P0 H) |1 ]# W( V3 B5 O
图41　　我们接着来画其它6个按钮。这6个按钮都是由水晶球所包裹着，所不同的是，这次的水晶球是凹陷在QQ主窗口里的。先来画一个25*25大小的圆形，使用由#575757至#FFFFFF的线性渐变，如图42。接着再画一个21*21的圆形，采用由# D7D7D7至# BABABA的椭圆形渐变填充，描边色为1像素柔化的# 000000。然后将这两个圆形进行水平与垂直对齐，如图43。　　我们把从“qq2004 icon.psd”文件里框选出来的“查找用户”图标放到这两个圆的上面来，如图44。
0 D# f) O6 G5 d' _7 p
  C. Q. y0 R) t) Z. |, j5 \# M
　　为了使水晶按钮有反光的质感，我们在来画一个14*9的椭圆，使用由#FFFFFF至#FFFFFF的线性渐变，不透明度从100至0。如图45。然后还要在水晶球的下方画一个13*8的椭圆，同样使用#FFFFFF至#FFFFFF的线性渐变，不透明度则从0至90，羽化值为2。如图46。

) `9 Z- W4 }0 a4 `$ M
+ d6 Z) P/ \7 S7 q1 C  |* L　　就这样，一个具有水晶质感的“查找用户”按钮就完成了。用相同的方法把其它的5个位于工具栏中的按钮也一一绘制出来，然后把它们按图47般移到QQ主窗体的下方。



2 ?/ t3 Q/ e$ x, o5 V' n图47　　再为这些按钮逐一建立导出切片，由于这里的按钮比较密集，需要注意的是，切片与切片之间不能相互重叠，否则将不能将按钮完整的进行导出。另外，在给导出的切片命名时，可以按照按钮所对应的功能来命名。而且我们这次所导出的按钮全是处于触发状态的，因此也别忘了在文件名的后面加个括号并注明“触发状态”。
3 d2 I/ }6 u6 }; I8 z/ e+ v
% m0 j8 k5 i8 p0 Z) I) d5 n  ^, e
: N2 `' a3 x5 x
" o. N$ \  {# i图48　　接着我们再来绘制这6个按钮的普通状态。在“工具栏”图层中我们把这6个按钮的位图图标同时选中，然后在属性框中一次性的把它的的不透明度降到50%，如图49。
0 |. Y: T# N8 ?& }( m& k1 }- p
6 l  z5 B* P* ~8 @' z
2 |2 C: ~; M6 z3 Y+ }+ H& W) i, l1 a
4 P7 a; H; t; J- S5 R4 k9 V* W图49　　然后为这6个处于普通状态下的工具栏按钮建立切片后进行导出。工具栏按钮的绘制就完成了。
六、排列“侧边条按钮”　　在“侧边条按钮”图层里我们已经准备好了来自“qq2004 icon.psd”文件里的QQ侧边条按钮图标。而在这个“蓝色畅想”的QQSkin中，我没有对侧边条按钮像工具栏按钮那样做过多的“外包装”。因此我们只需将这些侧边条按钮的图标放置在QQ主窗体的左侧位置上，并进行垂直对齐与均匀分布后即可为其建立导出切片，如图50。

+ T4 m2 `8 G1 f' v
% W) A5 |% C& U! B) Y
图50　　同样的，在导出这些按钮切片时要以这些按钮所对应的功能来命名，并在名移中注明“触发状态”。　　导出这些按钮后，我们再将这些图标同时选中，然后把这些图标的不透明度降至50%，并把这些图标以侧边条按钮处于未触发时的状态进行导出。这样一来，侧边条按钮的制作也就轻松完成了！
% q# ^1 e3 X& F" E七、绘制“状态按钮”
　　在“腾讯QQ2004皮肤编辑器”里把“在线”、“离开”、“隐身”和“离线”称为用户在使用QQ时的四种不同状态。这四种状态都可以在“状态按钮”中依据个人的QQ头像生动的表现出来。而不管你选用的是哪一个QQ头像，在状态按钮里都只有24*24大小。因此我所要绘制的这个“状态按钮”，实际上只是作为24*24这个QQ头像在不同状态时的衬托背景而已。　　先用“椭圆形”工具在QQ主窗体的右上角画一个32*32大小的圆形，然后对其使用由#FFFFFF至#5991EC的椭圆形渐变，描边色为#0F4099。如图51。
7 X& d2 B, x0 r, g


/ t* J6 C1 ~& [9 n. [; s- _图51
7 S' [$ g6 l5 i6 B+ y8 Y, n　　为使这个状态按钮具有水晶球的立体感，我们再绘制两个分别为29*29和36*36大小的圆形。接着把这两个圆形进行垂直和顶端对齐，然后将36*36的大圆向下移动3个像素，如图52。


5 r: D1 I+ \( g4 ^3 ^% u& X( O
图52
　　将这两个圆同时选中后使用“修改—组合路径—打孔”命令。然后把新形成的路径进行无描边的白色实心填充，羽化值为1，并用“缩放”工具进行一定角度的旋转后，放到状态按钮的左上角上，如图53。
% X" l! M) r+ U2 v6 s0 ?
6 p. B8 T; B; G2 q; S
: f) p' K# Y5 ?  H2 X7 I% R) i
图53
　　用“钢笔”工具在这这个状态按钮的左下角上绘制一个实边的白色三角形。然后将这个三角形复制一份，改用#053585填充后向左平移1个像素，如图54。
$ w* M+ k/ P  J
& q" V6 Z# ~. S1 V, u, {
9 v$ r* x, M; _; o
4 m& @6 u" y% {7 y$ w图54
　　然后我们把这一状态按钮建立切片并以“状态按钮”为名进行导出。接下来我们再来绘制造状态按钮的触发状态。将椭圆形填充的圆形对象改用由#FFFFFF至8BB2F2进行填充。而原来用#053585进行实边填充的三角形，则改用#2776F8进行填充。完成后再次建立切片将该按钮的触发状态进行导出，如图55。
4 W; S( r# w$ f
+ U9 q; K2 {9 Z4 z
( u3 w: K+ V- _7 d) z
图55

: f$ e) i# U3 L3 K7 m3 O八、预留“信息按钮”位置　　信息按钮在“腾讯QQ2004皮肤编辑器”的“QQ2004”Skin模版里也都有现成的可以沿用。所以也就不必在些另外绘制了，但为了保证我们这个QQSkin主窗体上有足够的空间来放置信息按钮，我们仍需要在放置信息按钮的位置上试着绘制信息按钮，如图56。
) f) J9 X8 q/ e+ k6 ~! g
# s. H7 @! L) S) R+ ^' f

( T9 x% Q2 Q. h% D% s! d- l图56　　从图57中可以看到，我们给信息按钮所预留的位置是足够的。
: T' d  ]% B# o0 K: B) k( J九、图片的后其处理　　因为在“腾讯QQ2004皮肤编辑器”里，把（R）255、（G）0、（U）255作为默认的透明色，而与该色调相同的网页色则为# FF00FF。也就是说，完成后的QQ皮肤将# FF00FF作为透明色，所以图片的后期处理也就是把我们导出到“蓝色畅想”文件夹里的一部分BMP图片又导入到Fireworks里来，然后将一些不想在QQSkin里出现的图片区域通通用#FF00FF进行填充，如图57。

* M: {3 z' _4 x9 G5 j  c5 g
& `6 B. w' X1 H) N% R, h2 g
* f' o  V! z4 @  s8 p图57　　需要处理的图片绘制完成后，即可在“腾讯QQ2004皮肤编辑器”里把“蓝色畅想”文件夹里的图片有序地进行导入组装，最终输出如图01般的“蓝色畅想”QQSkin。对于“腾讯QQ2004皮肤编辑器”的使用方法，可以在腾讯网站下载相关教程，网址：http://im.qq.com/p/skineditor/file/help_qq_skin_editor.doc 。　　而QQ聊天窗口的绘制，在绘图手段上与QQ主窗口的绘制完全相同，而且要容易得多。因此大家不妨当作练习来检验一下自己的学习成果！如图58。
; ^6 g( s, ^, V* D1 |
+ S0 L$ R! {5 s8 {, X! F9 f/ F

9 Y9 y1 h0 G% z7 x  Y, k: o. I" r图58　　通过本例教材，相信大家都能绘制出属于自己的一款个性QQSkin。　　“蓝色畅想”QQSkin源文件(zip压缩格式，265K)　　“蓝色畅想”QQSkin下载(zip压缩格式，473K)