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

QQ皮肤制作全程实录

收藏发布 来源:互联网 作者:中国IDC吧 更新日期:2008-10-07 点击:

   先用“椭圆形”工具在QQ主窗体的右上角画一个32*32大小的圆形,然后对其使用由#FFFFFF至#5991EC的椭圆形渐变,描边色为#0F4099。如图51。

图51

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

图52

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

图53

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

图54

   然后我们把这一状态按钮建立切片并以“状态按钮”为名进行导出。接下来我们再来绘制造状态按钮的触发状态。将椭圆形填充的圆形对象改用由#FFFFFF至8BB2F2进行填充。而原来用#053585进行实边填充的三角形,则改用#2776F8进行填充。完成后再次建立切片将该按钮的触发状态进行导出,如图55。

图55

八、预留“信息按钮”位置

   信息按钮在“腾讯QQ2004皮肤编辑器”的“QQ2004”Skin模版里也都有现成的可以沿用。所以也就不必在些另外绘制了,但为了保证我们这个QQSkin主窗体上有足够的空间来放置信息按钮,我们仍需要在放置信息按钮的位置上试着绘制信息按钮,如图56。

图56

   从图57中可以看到,我们给信息按钮所预留的位置是足够的。

九、图片的后期处理

   因为在“腾讯QQ2004皮肤编辑器”里,把(R)255、(G)0、(U)255作为默认的透明色,而与该色调相同的网页色则为# FF00FF。也就是说,完成后的QQ皮肤将# FF00FF作为透明色,所以图片的后期处理也就是把我们导出到“蓝色畅想”文件夹里的一部分BMP图片又导入到Fireworks里来,然后将一些不想在QQSkin里出现的图片区域通通用#FF00FF进行填充,如图57。

图57

   需要处理的图片绘制完成后,即可在“腾讯QQ2004皮肤编辑器”里把“蓝色畅想”文件夹里的图片有序地进行导入组装,最终输出如图01般的“蓝色畅想”QQSkin。对于“腾讯QQ2004皮肤编辑器”的使用方法,可以在腾讯网站下载相关教程,网址:http://im.qq.com/p/skineditor/file/help_qq_skin_editor.doc 。
   而QQ聊天窗口的绘制,在绘图手段上与QQ主窗口的绘制完全相同,而且要容易得多。因此大家不妨当作练习来检验一下自己的学习成果!如图58。

图58

   通过本例教材,相信大家都能绘制出属于自己的一款个性QQSkin。

   “蓝色畅想”QQSkin源文件(zip压缩格式,265K)

   “蓝色畅想”QQSkin下载(zip压缩格式,473K)



上一页 1 2 3 4下一页
[点击复制本页地址发送给 QQ/MSN 好友] [ 发布内容][ 举报][ 关闭窗口][ 返回顶部]
收藏此页到网摘/书签:
所有评论

评论列表

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