实战QQ2004个性皮肤制作（二）

四、制作面板皮肤

　　1、新建皮肤

　　运行QQ皮肤编辑器，自动打开新建皮肤对话框。在此选择模板，为新皮肤命名，确定存盘目录(如图八)。

图八

　　2、预览图

　　皮肤发布到网络上之后。我们需要制作一张预览图，当网友浏览了这张图片后可以决定是否下载此皮肤。预览图顾名思义就是皮肤在使用过程中的效果图，由QQ面板效果图和聊天窗口较果图组成。制作一个460×290像素的预览图，然后点导入，把图片加入皮肤文件包中(如图九)。

图九

　　3、主窗口

　　主窗口也就是QQ面板的底图。点元件列表中的主窗口。我们把事先用photoshop处理好的图片，插入进来(如图十)。和上文相同，点导入按钮就可以插入。我们知道，图片文件都是方形的，如果想制作非方形的图片，就需要使用支持透明效果的格式，把不必要的部分透明化。比较常用的是GIF格式。但是，在此我们不能使用这种方式。需要透明的地方，要使用特定的色彩覆盖，这样QQ在运行时可以把设定的色彩透明化。这样就可以实现圆角图，不规则图等等效果。默认的透明色为:R:255 G:0 B:255。背景图预览中可以看到四条虚线，这些线可以用鼠标拖动。如果，我们使用QQ时，拉伸了QQ面板，被四种虚线框中的部分将被拉伸。如果，你的背景图，使有的是173×507像素，那么其它参数不必改动。参数的意义很容易理解不再赘述。

图十

　4、窗体

　　窗体用不用底图，依设计而定，两者只会产生视觉效果的不同。点元件列表中的窗体下的标题栏按钮背景。如果不用背景，勾选“不显示这张图片”。如果选用就导入制作好的图。如图十一所示

图十一

　　窗体上有三个按钮。这三个按钮要分别制作。做过网页的朋友都知道：按钮都有三种状态，及普通、光标经过、按下按钮，而且三种状态的视觉效果不同。所以，我们需要制作九张按钮图片。如果你使用是图标，则制作三个图标就行了，不过这样就不会产生三种变化了。点元件列表中的窗体下的关闭，如图十二所示，分别导入三个图片。

图十二

　　其它两个按钮，方法相同。最后效果如图十三

图十三

　5、面板

　　面板部分要使用一个背景图，虽然这个图可以不用，不过对于大多数皮肤来说都是需要的。点元件列表下的面板下的背景，导入背景图，如图十四。背景图预览中可以看到四条虚线，这些线可以用鼠标拖动。作用和主窗口的相同。

图十四

　　这时你还看不能看到明显的变化，这是因为，背景图前面还有一张分组的背景。点元件列表下的面板下的好友面板，导入制作好的背景图，效果如图十五

图十五

　　好友分组按钮也是需要制作三种状态。滚动条只是一张图片。我们可以发现，它包含了十三张小图，分别为上、下按钮的三种状态，滚动条两端和中部的三种状态，以及滚动条的背景图。这些小图片，按一定的规则排列在一些。如果你觉得制作这张图很麻烦，那么你可以把你制作好的图片，粘在模版中的那张图片中的相应位置。注意尺寸。效果如图十六

图十六

　　6、工具栏

　　工具栏由一张背景图和七个按钮组成。小黑在此不再设置背景图片，而是使用主窗口的背景。点元件列表中的工具栏，选中不显示这张图片。按钮使用默认的即可。用鼠标选中这七个按钮，拖动鼠标移动到适当的位置，也可以用键盘上的方向键来移动。其实图中的所有元素都可以这样移动。最后效果如图十七

图十七

7、侧边条

　　侧边条上有八个按钮。小黑用的是默认图标，当然原来的图是不能直接用的。小黑用photoshop抠出彩色的图标后，再通过调色，制作出按钮的不同状态，并最终制作出备用文件。点元件列表中的侧边条，导入完所有按钮后效果如图十八

图十八

　　突然发现好友列表上的字用黑色比较好。于是小黑改了下颜色。在右侧的工作区直接点好友列表上的按钮，进入好友面板的属性设置。在字体颜色下输入黑色的代码，及R:0 G:0 B:0，效果如图十九

图十九

　　8、状态

　　状态需要使用一个按钮和一个状态图标。图标不用改，因为，图标就是我自已的QQ头像图标。按钮小黑使用的没有动态效果的按钮，及把按钮的状态设置成相同的图片既可。点元件列表下的状态下的按钮，导入制作好的图片，效果如图二十

图二十

　　9、信息

　　点元件列表中的信息，信息基本不用改。只要设置一下字体的色彩，即可。QQ小秘书，这个按钮不必要，把它删掉。再把QQ邮件移动到适当的位置。效果如图二十一

图二十一