怎么做 啊？
教教我行百？
9494
教教我吧
我很乖的
没有做好
难道素传说中的高高手?目 录
朋友，你是否惊喜于QQ2004皮肤漂亮了许多，是否在心底已经开始对QQ皮肤的制作情有独钟、跃跃欲试了？在腾讯发布了“QQ皮肤编辑器”之后，我们就可以更加轻松自如、随心所欲的开始我们的梦想创作了，怎么样，让我们赶紧开始QQ皮肤制作的探索之旅吧。
QQ皮肤诞生的全过程中，大致分为三步曲：制作皮肤效果图、对应“QQ皮肤编辑器”中各部分对效果图进行切分、使用“QQ皮肤编辑器”完成新皮肤。
第二步和第三步都与“QQ皮肤编辑器”的使用有着密不可分的关系，下面让我们以一个皮肤制作的过程来看看如何把“QQ皮肤编辑器”用的更加得心应手吧！
下载安装“QQ皮肤编辑器”后，桌面会出现这个快捷方式
图1 “QQ皮肤编辑器”的主界面
在这里选择“新建”就可以开始新皮肤的制作了，在图2新建皮肤的窗口中，我们需要为自己创作的皮肤命名、设定这个皮肤的保存路径（既可以使用默认路径也可以通过“浏览”自己指定其他保存路径），以及在目前已有的皮肤中找一个和自己即将创作的皮肤最为相似的作为模板。
图2 新建皮肤的窗口
说明：
图3
1、 我们将设定新皮肤的名称为：中国龙；选择保存路径为：E:\Documents and Settings\cathy\桌面\QQ皮肤\；通过浏览选择参考皮肤为：标准模板 — QQ2004。确定后，我在路径E:\Documents and Settings\cathy\桌面\QQ皮肤\下可以看到已经生成了一个名为“中国龙”的文件夹，该文件夹里已经含有制作皮肤的部分基本要素
图4
2、 如图2所示，参考皮肤这里可以通过下拉框进行选择，因为只有含有.qsd格式文件的皮肤才能作为“QQ皮肤编辑器”的模板，所以可能大家会发现这里并没有出现我们在QQ中安装的全部皮肤，下拉框这里是只默认显示QQ安装路径下含有.qsd格式文件的皮肤，如果大家保存在其他路径的皮肤也含有.qsd格式文件，则可以通过“浏览”来选择该皮肤作为模板，进行使用。
已经开始制作，但还未全部完成的皮肤可以通过以下方式打开：双击桌面快捷方式
过去QQ皮肤制作好之后，如果想使用到QQ上，还需要将新皮肤的全部文件保存到以这个皮肤命名的文件夹里，再放到QQ安装路径下名为NewSkins的文件夹中。这样才可以在QQ系统菜单中选择“更换皮肤”、该新皮肤的名称来实现新皮肤的使用。
为方便大家在完成QQ皮肤制作之后可以更便捷的实现新皮肤的使用，皮肤编辑器中用“生成”按钮来实现了上面的一系列操作。
现在，大家完成制作皮肤后只需要选择“生成”，则会如下图所示，自动完成将新皮肤文件放到QQ安装路径下NewSkins的文件夹中过程，这样打开QQ系统菜单中选择“更换皮肤”就可以看到我们新制作的皮肤“聆听花开”已经可以选用。
皮肤“预览”是比皮肤“生成”更方便的一项操作，“预览”功能包括了两步操作：先是相当于执行了皮肤“生成”工作；既而，在已经打开QQ的情况下，接下来会自动为QQ更换为当前新生成的这个皮肤。
为了方便大家把自己制作好的皮肤作品上传到网页上和其他Q友分享，皮肤编辑器还提供了皮肤“打包”的功能，如下图，可以自动生成 .cab 格式的压缩包，包含了上传皮肤时所需要的全部文件。
在我们完成新皮肤的名称、保存路径为、选定标准模板等设置确认后即打开下面的界面如图5。在这里，需要填写皮肤的一些基本信息：作者姓名、电子邮件、素材来源、说明等，赋予这个皮肤一定的背景。
另外，在这里还需要导入我们为这个皮肤制作的预览图，这步操作可以通过“导入”或者“清除”来完成，一般建议这里如图4分别导入皮肤主面板和IM窗口这两个效果图，这样方便其他用户在浏览这个皮肤时，决定是否下载安装该皮肤。
图5填写该皮肤的基本信息
比如，如图6我们在自己的QQ中选择“菜单”—“更换皮肤”—“皮肤管理器”，在图7皮肤管理器中选择任意皮肤如“粉红2004”等，就可以看到皮肤主面板和IM窗口这两个效果图。
图6
图7显示皮肤主面板和IM窗口两个效果图
为了便于后面皮肤制作的介绍，我们首先来了解下皮肤编辑器的几个主要区域如图8，下面为大家介绍个部分区域在皮肤制作中的的作用。
1、 工具栏：包含制作皮肤的各项常用操作
2、 元件工具栏：帮助皮肤中各元素调整确定位置和尺寸，包括上、下、左、右端对齐，垂直、水平居中，高度、宽度、大小相等等
3、 元件列表栏：在此将QQ皮肤分成各个组成部分，方便我们在完成皮肤的效果图后以此为依据进行切图和用切好的图制作新皮肤。
4、 属性设置栏：在此对应元件列表中各项皮肤组成，进行属性的设置。
5、 效果图栏：将自己实现的皮肤效果图通过鼠标右键菜单中的“载入图片”加载进来，从而可以在制作皮肤的过程中方便进行参照。
图8
下面我们导入预览图和效果图就可以开始制作了，导入图片限定是.bmp格式。效果图可以通过以下两中方式导入：
1、 如图9在菜单中选择“效果图”—“载入图片”
2、 如图10，在效果图栏中的区域，鼠标右键菜单选择“载入图片”
对于载入的图片如果不满意，还可以选择清除，重新载入。
图9
图10
如图11，为我们载入的皮肤中国龙的效果图和预览图。
图11
在开始主窗口制作前，为方便后面皮肤制作，我们先来介绍下皮肤编辑器中的各个区域的主用作用。
选择元件列表栏中的“主窗口”如图12。我们的主要工作是在“属性设置”区域完成对图片的各项设置，包括大小范围、背景、拉伸方式等。
图12
在介绍如何设置“主窗口”的属性之前，我们首先来看下图12中黄色方块的“查看区域”的一些操作。
“查看区域”的主要作用是：通过我们选定的模板（如这次我们选择的是QQ2004）来告诉我们目前我们正在设置属性的这个图片（如现在就是“主窗口”）在整个皮肤中所处的位置。
通过工具栏中的“查看”，我们还可以进一步控制“查看区域”的显示，使我们在皮肤制作中更加一目了然，如图13，在查看的下拉菜单中，可以选择“显示全部”、“显示当前区域”、“显示当前元件”和“显示图片”等，我们可以在设计中根据具体需要进行调整。
图12
设定了查看为“显示当前区域”后，可以看到我们选为模板的已经QQ2004的主窗口已经出现在显示区域中，如图13：
图13
主窗口属性的设置如图14，主要分做大小、透过色、背景图拉伸和预览等四部分。
图14
一般皮肤制作的过程是先将主窗口的背景图“导入”进来，然后在对大小尺寸、透过色、背景图拉伸等进行设置和调整。
下面我们首先导入已经切好的“中国龙”的主窗口的背景图，如图15：
图15
大小：在大小中首先定义的宽度和高度是在打开QQ后，默认的皮肤大小；最大最小宽度和高度指的是我们在对皮肤进行拉伸时对大小限定的范围。
透过色：透过色就是显示成透明的颜色，一般我们在处理不规则图片时会用到。一般可以选择一个在皮肤中不会用到的任意颜色都可以。这样以后凡是希望不显示出来的区域都可以被填充这个被定义成透过色的颜色。
取色：在透过色的设置中还可以通过取色来选取某个颜色作为透过色，选择“取色”按钮后，鼠标光标变为笔的形式，可以用它来选择界面中的任何位置的颜色。
背景图拉伸：在对皮肤进行拉伸时，皮肤的背景图势必要相应的拉伸。
1、 拉伸大小的定义：一般是通过左侧、右侧多少范围内不拉伸来确定横向的拉伸范围，再以上端、下端多少范围内不拉伸来确定纵向的拉伸范围
2、 拉伸方式：分为直接拉伸和平铺两种。直接拉伸就是对可以拉伸的区域进行均匀拉伸的一种效果。平铺就是在拉伸时对可以拉伸的区域进行不断的重复拼接，以此实现拉伸的一种效果
◆ 一般对于不规则的皮肤图片或者是有花纹的皮肤图片，为保证拉伸后不变形，拉伸范围的选取都需尽可能避开这些位置，而选在规则图片处进行拉伸。为了皮肤在拉伸时不变形，建议在设计主窗口图片时，在横向和纵象上都注意留出相应的便于直接拉伸或者平铺拉伸的部分。如图15中我们看到“中国龙”皮肤的主窗口背景图片右侧为规则区域，所以选定这部分进行拉伸。
◆ 如果希望确定该皮肤为不可拉伸的话，可以直接在“大小“处确定最大、小高度和宽度于默认的高度和宽度相同即可。
◆ “透过色”不仅还可以通过“选择”和“取色”完成，如果希望选择界面中或者图片中的某个颜色作为“透过色”，可以选择“取色”，看到鼠标变成“笔”的形状后，在进一步选择自己希望作为“透过色”的区域即可，这样该颜色的“R”“G”“B”值就会自动出现。
窗体部分包括标题栏按钮背景和关闭、颜色改变、最小化按钮等部分，标题栏按钮就是QQ右上角控制QQ关闭和最小化的部分如图16，我们可以对这部分的背景和关闭及最小化按钮等进行设计。
图16
标题栏按钮背景由位置和大小、左右拉伸、上下拉伸、透过色、拉伸方式和预览等几部分组成，如图17：
图17
位置和大小：确定标题栏按钮背景图片的大小和位置，还可以设定这里不放置背景图片。
左右拉伸： 当皮肤被左右拉伸时，确定该背景图片的相对位置如何变化及宽度是否随之改变。
如宽度设定随着窗口变化而变化则同整个窗口一起被拉伸，否则为宽度不变。
上下拉伸：原理与左右拉伸相同。
如图18，我们导入皮肤“中国龙”的标题栏按钮背景图片：
图18
关闭按钮的属性设置如图19，下面我们对图中红色标注的几块进行说明。
图19
位置和大小：
在调整关闭按钮的图片的位置和大小时不仅可以通过在属性里面通过数字进行设置，还可以直接用鼠标在图19中的“查看区域”中对该图片进行大小和位置的调整。
在调整中，还可以选择“根据Bitmap图片大小调整”，这样“查看区域”中图片的大小将重新被恢复成图片最初的大小。
鼠标光标：
在这里还可以设置导入图片，这样当鼠标放到该按钮位置时鼠标原来的箭头将显示成该图片样式。
BMP图片：
普通状态为按钮无任何操作时的状态，激活状态为鼠标放置在按钮上时按钮显示的状态；按下状态为鼠标在按钮上按下时按钮显示的状态；无效状态为该按钮不可用时显示的状态。
如图20为我们完成“中国龙”皮肤关闭按钮的设置：
图20
最小化按钮的制作同关闭按钮的制作相同，不再详细说明。
QQ 2004 beta版开始支持QQ皮肤颜色和透明度的自由编辑。我们可以随心所欲地选择编辑自己喜欢的心情颜色！
颜色编辑按钮的制作部分可参见2．4．2 关闭按钮制作。
面板部分包括背景和好友面板的制作，在皮肤中这两张图虽然是重叠在一起的，但是在QQ皮肤的设计中这两部分通常是分开设计的，下面我们逐一介绍。
图片背景的制作主要是对导入图片的位置、大小、拉伸范围和拉伸方式的设定。具体情况如图21，在这里也可以选择不显示背景图片，而采用主窗体对应的部分作为该背景。
图21
如图22为我们完成的皮肤“中国龙”的背景图片的设定：
图22
好友面板主要由背景图片、“QQ好友”等分组的图片、分组字体颜色和右侧滚动条等几部分组成。如图23：
图23
字体颜色：指“QQ好友”、“手机好友”、“群/校友录”、“最近联系人”等分组上面的字体颜色。
通常状态：分组正常显示的状态
活动状态：鼠标选择分组时显示的状态
滚动条：滚动条中各图片对应皮肤中的部分见下图24中对应的颜色区域即可。每列中从上至下对应的三个分别为“通常状态”、“活动状态”和“按下状态”。
说明：
图24中每个小按钮的尺寸是有一定限制的，建议以高15宽15为好。
图24
如图25，为皮肤“中国龙”制作好好友面板后的效果：
图25
皮肤工具栏指的是如下图26、27所示的部分，包括短信、QQ游戏、TT浏览器、聊天室、系统菜单、信息管理消息和查找用户等部分。
这部分皮肤的制作，就是工具栏背景、上面的短信、QQ游戏、TT浏览器、聊天室、系统菜单、信息管理消息和查找用户等设置图片，具体设置的方法可参见前面的2．4 皮肤窗体制作和2．5 皮肤面板制作类似。
图26 图27
如图28，为皮肤“中国龙”完成工具栏制作后的效果：
图28
侧边条如图29、30，具体指QQ上的8个面板：好友面板、互动空间、企业好友面板、咨询面板、自定义面板和音乐中心及网络硬盘。
这部分的制作，主要是好友面板、互动空间、企业好友面板、咨询面板、自定义面板和音乐中心及网络硬盘等面板在普通、激活、按下、选中等状态的图片设置，具体设置的方法可参见前面的2．4 皮肤窗体制作和2．5 皮肤面板制作类似。
图29 图30
如图31，为皮肤“中国龙”完成侧边条制作后的效果：
图31
状态部分如图32、33，具体指QQ上显示用户自己头像的区域，分状态按钮和状态图标两部分。
图32 图33
状态按钮主要是用户头像显示区域的背景图片，这部分制作主要是普通、激活、按下等状态时的各个图片的导入和图片的位置、大小等设置，如图34：
图34
状态图标指的是QQ面板中显示的用户头像部分。这里的制作主要是指头像具体位置的确定，如图35：
图35
如图36，为皮肤“中国龙”完成状态制作后的效果：
图36
信息部分如图37、38，包括QQ上用户的QQ号码、QQ小秘书、QQ邮箱等三部分。下面我们逐一介绍。
图37 图38
部分的制作主要是用户QQ号码具体位置、大小、字体颜色的确定，如图39，另外还可以在此设置是否在QQ号码后面显示用户的在线状况：
图39
这部分的制作主要是QQ小秘书图片的导入和对具体位置、大小及后面具体数字的字体颜色的确定，如图40：
图40
这部分的制作主要是QQ邮箱图片的导入和对具体位置、大小及后面具体数字的字体颜色的确定，如图41：
图41
如图42，为皮肤“中国龙”完成信息制作后的效果，由于当时的QQ版本还没有小秘书，所以在该皮肤中没有出现。
图42
自定义图片部分如图43，在这部分提供了一些图片的导入，主要是帮助大家在制作皮肤时如果设计的是一些不规则皮肤或者在皮肤上一些地方还额外需要放置显示一些图片时，可以在这里进行设置制作，提供图片的位置、大小、拉伸方式等的设置。
如果没有在自己设计的皮肤中没有额外放置图片的需求，在这里只需全部设置成“不显示这张图片”即可。
图43
这部分的制作主要是对QQ菜单中的普通背景、文本、左边条、菜单分割条凹凸部分的颜色，选中菜单的背景、单线条的高亮阴影、菜单文本的颜色，还有失效菜单立体高亮、文本的颜色的设置，如图44，另外还包括了如图45的菜单左侧图片的导入。
图44
图45
关于菜单中众多组成部分颜色的设置有一些技巧：
1、 由于菜单中各部分颜色的设置包括了普通背景、文本、左边条、菜单分割条凹凸部分，选中菜单的背景、单线条的高亮阴影、菜单文本，还有失效菜单立体高亮、文本等众多部分，要想明确记住比较麻烦，可以通过在皮肤编辑器中改变一个部分的颜色设置，然后注意查看在QQ菜单中颜色变化的部分来具体确定各个名称的对应部分。
如图46，我们来确定普通菜单背景色指的具体部分：通过“选择”把颜色设置为“橙色”如图47，通过对比，我们明确了普通菜单背景指的是什么区域。
图46
图47
2、 在明确了“普通菜单”指的是什么区域后，我们还需要按照预先设计好的效果图为他设置颜色，通过“取色”可以很方便的实现这个过程。选择“取色”后用鼠标选择效果图中的对应部分，则该颜色就自动显示出来。
此外，可以大家会发现，在QQ中不仅仅系统菜单一个，如图48、49还包括状态菜单和好友右键菜单等，其实这部分菜单在皮肤编辑器中是默认采用了如图50中菜单的设置，所以无须另外设置。
图48 图49
图50
如图51，为皮肤“中国龙”的菜单制作后的效果：
图51
聊天窗口部分的制作包括基本信息、边框、大小工具栏、侧边条、好友信息栏、按钮组等部分的设置。如图52：
图52
基本信息部的皮肤制作分主要是聊天窗口中的背景和各区域边框的颜色设置如图53。基本信息中具体每部分和聊天窗口中的每个部分的对应关系和颜色的具体设置可参见
前面2．11．1 QQ菜单制作的技巧这部分。
图53
如图54，为皮肤“中国龙”完成聊天窗口基本信息制作后的效果：
图54
边框皮肤制作主要是指聊天窗口的边框所的各个组成部分图片的导入，包括左右、上下边框以及聊天窗口右侧最大、最小、还原三个按钮在通常、按下和活动三个状态下图片，另外需要设置在边框上显示信息的字体颜色，最大、最小、还原三个按钮的位置和边框弧度的设置。
边框弧度：指聊天窗口的边框的四角的弧度。数值范围可以在0-50之间进行选择，原理上是选取数值越大对应到边框上的弧度也越大。
如图55，其他部分的具体设置方法可参见2.4.1 图片—标题栏按钮背景制作部分。
图55
如图56，为皮肤“中国龙”完成聊天窗口边框制作后的效果：
图56
大工具栏是指聊天窗口的上边框下包括了“视频”、“传文件”、“短信”、“游戏”、“窗口”的区域，如图57：.
图57
大工具栏部分的皮肤制作主要包括这部分区域高度、位置的数值设定，背景图、字体颜色的选取，“视频”、“传文件”、“短信”、“游戏”、“窗口”等按钮每个图片的导入，以及“视频”等按钮在活动、按下时背景及背景边框颜色的设置。
如图58中的位置、大小设定部分：
高度：指该部分的背景高度
上下左右的空白：指该部分的背景相对聊天窗口中各边框的距离。
图58
如图59，为皮肤“中国龙”完成聊天窗口大工具栏制作后的效果：
图59
小工具栏如图60中的红色方框区域，具体包括“字体颜色和格式”、“表情”、“群社区”“发送图片”等10个按钮。
小工具栏部分的皮肤制作主要包括这部分区域背景图导入、背景色选取、和“字体颜色和格式”、“表情”、“群社区”“发送图片”等10个按钮图片的导入，以及这些等按钮在活动、按下时背景及背景边框颜色的设置，另外还包括这10个按钮间分隔条的边框、背静颜色的选取。
具体设置的方法可参见上面的2．12．3大工具栏制作。
图60
如图61，为皮肤“中国龙”完成聊天窗口小工具栏制作后的效果：
图61
侧边条如图61，主要由图中的红色、绿色和兰色区域的几部分组成。
下面分别介绍属性设置里各项具体代表的部分：
子窗口：指图61中绿色线条所指区域，可以设置这部分的颜色
边框：指整个“侧边条”最外边上下左右的边框
按钮字体：指图61中兰色线条区域中的字体，可以分别设置在通常和活动时的字体颜色
标题按钮：指图61中兰色线条区域的按钮，需要分别导入在隐藏和展开两中方式下各按钮在通常、活动、按下时的图片
菜单按钮：指图61中红色线条区域的按钮，如图62，它可以帮助我们打开菜单
腾讯服务项目字体：指图61中绿色线条所指区域中文字，如“发送QQ贺卡”和“邮件”等，可以在这里为这部分文字设置通常和活动两种状态是的颜色
具体的颜色设置和图片导入方法可以参考之前的介绍。
图61
如图62，为皮肤“中国龙”完成聊天窗口侧边条制作后的效果：
图62
好友信息栏如图63，制作过程主要就是背景图片高度和好友信息字体在普通和活动良种状态时的颜色设定。
图63
如图64，为皮肤“中国龙”完成聊天窗口好友信息栏制作后的效果：
图64
按钮组如图65，制作过程主要就是对“聊天记录”、“消息模式”、“关闭”、“发送”等按钮在通常、活动、按下和选中四个状态下的图片的导入。
图65
如图66，为皮肤“中国龙”完成聊天窗口按钮组制作后的效果：
下面我们来看看完成了皮肤“中国龙”聊天窗口全部元素制作后的效果，只需要在工具栏中的“显示”下拉菜单中选择“显示全部”即可，图67。
图67
在“中国龙”皮肤的制作完成后，我们登陆QQ之后，可以选择“预览”来查看这套新皮肤的完成效果：
刚刚做的哈
错误好聪明
像我.....根本就没报希望
ZZZZZzzz...
困了
晕……
我一整天才做了俩啊……
我也要学
。。。。。。
自学就可以……
| 欢迎光临 (http://tonghuar.com/) | Powered by Discuz! X3 |