您的位置: 首页 > 技术文档 > 图形图像 > QQ皮肤制作全程实录
Photoshop 图层样式作双色字 回到列表 用PS给自己的作品加上隐形水印
 QQ皮肤制作全程实录

作者:大眼网虫 时间: 2004-09-15 文档类型:转载 来自:太平洋电脑网

第 1 页 准备工作
第 2 页 绘制主窗体
第 3 页 绘制窗体按钮
第 4 页 绘制拉幕式面板
第 5 页 绘制工具栏按钮
第 6 页 排列侧边条按钮、状态按钮
第 7 页 后期处理

自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。

出处:太平洋电脑网
责任编辑:蓝色

上一页 下一页 绘制主窗体

◎进入论坛PhotoshopFireworks版块参加讨论

作者文章
学用Fireworks中的特效
在Fireworks中绘制QQ聊天表情
QQ皮肤制作全程实录
Fireworks 绘制时尚手机
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
悟道web标准:前端性能优化
纯中文域名".中国"今日提交申请
世界之窗3.0皮肤设计大赛结果公布
使用jQuery制作滑动动画效果的层
如何设计网页横幅
Plump 图标设计
Subrat Nayak图标设计
百度知道推出文档分享服务
CSS Sprites(CSS雪碧):要还是不要?
UIRSS三周年纪念日推出V2公测版
栏目最新 栏目最新列表
Firefox的Jetpack扩展案例分析
阿里妈妈UED谈CSS Sprites技术
Photoshop中设计绿色时尚Web网站
操作Dom节点实现间歇滚动新闻
浏览器15年历史回顾
如何创建Firefox的Jetpack扩展
全透视:CSS Z-index 属性
用PS 3D工具绘制甜麦圈包装袋
悟道Web标准:让W3C标准兼容终端
悟道WEB标准:统一思想,遵循标准
>> 分页 首页 前页 后页 尾页 页次:1/71个记录/页 转到 页 共7个记录

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

本文总共有 12 条评论,现在显示最新的 5 条。评分:- llllllllllllllllllll + 评分人数: 2 ,平均分: 5.00


wangshaowei Publish at 2005-6-12 2:10:10
请问一下啊,我刚玩这个。。
我弄完之后。。为什么图片出来是一个长方型的?
而且图片外面那些。都是白色的(图片本身不是长方形)
哪位高手,能告诉我怎么去除那些白色的?
(我弄的那些图是用CD画的,然后在导进制作软件)
btaichong Publish at 2005-4-25 19:41:35
sunbaocn~你这个怎么这样,就是不会才想学的嘛~你不就是懂那么点吗,用的着这么拽吗
sunbaocn2 Publish at 2004-9-19 17:37:03 评分5
还不错!看不懂的人不要乱说!这个教程写的还不错,你看不懂是你水平不够!!!软件都没完全掌握就来学做软件UI!真是笑死人! 另外我想说的是其实真正做UI还是PS要好一些,FW毕竟是矢量软件出身的!!可能作者FW用的比较熟吧哈,但这个教程我用PS来做会简单的多!
kenbyyu Publish at 2004-9-18 14:36:55
都不知道在讲什么 步骤一点都连不上 我都看不懂
不够详细 对于我这种刚接触这样的东西的人真的没办法
希望能讲清楚点 可以吗
我也很想学啊
要说清楚用什么软件或什么工具才好啊
stonecn Publish at 2004-9-16 9:13:15
跟卫生巾一样。

查看全部评论

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
《Web标准设计》
闪魂-FlashCS4完美入门与案例精粹
Waver_h's华丽世界
Illustrator CS3质感绘画表现技法
《Flash短片轻松学》
《用户体验要素》
《JavaScript语言精粹》
作品集 更多内容

公寓类地产站 公寓类地产站 房地产教学案例 服装网站BASIC E 浪漫宣言女装 服装人像摄影 房地产教学案例 飞机稿