教你怎样用SkinMagicBuilder制作皮肤.doc

教你怎样用SkinMagicBuilder制作皮肤椐我所知，设计软件皮肤好像从来不是程序员擅长干的工作。不过我也调查过，很多程序员朋友对皮肤的制作还是满有兴趣的。在这个部分，我专门用我制作的一个软件皮肤为例，从头到尾的给你讲解一遍。其中包括皮肤的画法，皮肤的定制和皮肤的嵌入。如果你有兴趣，那么就跟着我来做一个皮肤试试吧！ 工预善其事，必先利其器。我们先谈谈制作皮肤需要的工具吧。首先我使用的编程语言是VC，所以皮肤的嵌入软件，自然也选定是专门制作给VC的了。我使用的这个软件叫做SkinMagic，有很多朋友通过各种途径得到过这个软件。不过这个软件是个共享软件，而且每一个注册码对应一个软件皮肤，收费高达89美元（我曾经买过几个，吐血！），但是确实非常好使。其实就我所知，很多共享软件的作者都使用这个软件（而且也曾经跟我一样吐过血）。用它作为皮肤的嵌入软件的原因当然是非常地容易制作啦。（现在已经有破解版本了）有了这个工具之后我们还要面有PhotoShop（以下简称PS）来进行皮肤主体的勾画。我还要说的是颜色搭配。在这个例子中，因为我很喜欢橙色，所以自然选择橙色作为主体颜色，那么什么颜色能和橙色放在一起比较漂亮？这是问题的关键，我很幸运，著名的NIKE公司的LOGO为我很好的解释了这个原理。不难看出灰色，黑色，还有白色都是和橙色很好的搭配在一起，所以我们就选择这几个颜色作为皮肤的制作颜色！ 好了，开始实战！ 第一步，轮廓与着色首先，打开你的PS，新建一个文件，宽度为495，高度为406，分辨率为72。然后点击图层菜单，新建图层背景。接着在工具栏里点击油漆桶工具，选择颜色为R=255,B=0,G=255。用油漆桶工具填充背景。我们这样做的目的是填充一个固定的背景色，你看过电影的特技拍摄吧，后面放了一幅大蓝布，然后演员在那里摆POSE，最后再用电脑合成。一个道理，我们也是这样，只不过我们放的是一块大粉布，哈哈。下面，我们要绘制一个窗体。在工具栏里点住矩形工具，会看到出现一个下拉菜单，选择圆角矩形工具。在大粉布上画上这个圆角矩形。取名就叫默认的形状1。再次使用圆角矩形工具，在刚才的矩形前画一个小一点的矩形，这次我们要拖动鼠标的同时按住减号，然后你会发现我们得到一个窗口外框子。接着，我们点击图层窗口，右键选择“形状1”，点选“混和选项”，分别在“斜面和浮雕”，“颜色叠加”，和“描边”上打勾。其中“斜面和浮雕”的参数“大小”为21，“软化”为10。“颜色叠加”的颜色为：R=241, G=112,B=18；“描边”的颜色和刚才的一样，“大小”为1，于是，得到了我们要的窗口外框！ 接下来我们选择工具栏的矩形工具（这次不是圆角矩形了！）画一个长方形，这个长方形要比外框小，比内框大。并将新建的这个图层拖到咱们刚才的圆角矩形的下面，取名也就叫“形状2”。还用上面提到的方法，打开“形状2”的“混和选项”，在“内阴影”和“颜色叠加”上打勾。其中“内阴影”的参数“距离”为16，“大小”为5，而“颜色叠加” 的颜色为R=102,G=102,B=102，你瞧我们的窗口做好了！ 好了，把它保存为Orange.psd，然后再转化成BMP格式，我们的窗口皮肤素材就已经做好了！嘿嘿。第二步，制作SkinMagic格式皮肤！ 首先，按我刚才说的，到刚才那个网址链接去下载一个SkinMagic，然后解压到你的电脑里。我们使用的是一个叫做“SkinMagicBuilder”的工具软件。它在解压后的SkinMagic的SkinMagicBuilder目录下，是个可执行文件。打开这个工具软件后，我们在Object 菜单里选择“Load Image”把刚才存的那个BMP文件装载进来。下一步，我们要把这个窗口做活，所谓“做活”就是使这个皮肤能用于任何窗口。这个过程可能有点麻烦。还是点击Object 菜单，选择“Window”的“Frame Window”。在SkinMagic的右侧属性框，把Name改为“Dialog”。然后我们注意到右边的Act iveFrame下有九个属性，翻译成中文他们是“左上方，中上方，右上方，左边，中间，右边，左下方，中下方，右下方”。我们先点击“TopLeft”，在Image Files里选择我们的Orange.bmp。然后你看到，我们画的窗口已经在这个窗口里了。最后你在中间大窗口的左上方看到有一个可以拉动的红点，把它拉开，覆盖在我们的窗口图片的左上方。接下来我们按照和刚才同样的方法，把其他八个部分都做好，具体的各个方面参数你可见下表所示。填好之后，在Tools菜单里选择“Test”可以测试你制作的皮肤的效果。一个非常非常简单的窗口皮肤已经制作好了。我们把这个文件起名为orange.smf保存起来。第三步，在VC中使用皮肤首先我想声明，并不是非要有SkinMagic VC才能添加皮肤，本身VC就有皮肤的调用函数的，比如每一个控件都有一个相关消息映射叫做“DrawItem”，在这里可以对指定的控件装上皮肤。只不过这是非常麻烦的过程，我不推荐。但是如果没有更好的办法，那样也是可以的。比如当你只想给某个按钮加上个皮肤的时候，倒是可以考虑。其他情况下，我们最好采用第三方工具。好了，言归正传。我们继续皮肤制作的最后一步，我们先在VC里按照MFC AppWizard建立一个基于Dialog的应用程序，取名为Sample。完全按照向导的默认值就可以了。接着我们把刚才保存好的Orange.smf以资源的方式添加到项目中去，资源类型写：“SKIN”，资源名称为：“IDR_SKIN”，注意写的时候一定要加上双引号哦！ 然后我们再到那个SkinMagic包里拷贝些东西，他们分别是：SkinMagicLib.h、SkinMagicLib.lib、DETOURS.lib 把这三个文件拷贝到你的Sample应用程序的路径下，然后再在VC的Project目录下选择“Add To Project” 菜单的“Files.”。把这三个文件添加到工程中。 下一步，我们打开Stdafx.h文件，在里面添加上一句： #include SkinMagicLib.h 接着，在CSampleApp 类里添加一个函数，取名为“InitSkin”。在函数里写入： void CSampleApp:InitSkin() /加载皮肤VERIFY(1=InitSkinMagicLib(AfxGetInstanceHandle(), Sample, NULL,NULL ) ); VERIFY (1=LoadSkinFromResource ( AfxGetInstanceHandle() , IDR_SKIN ,SKIN) ); VERIFY( 1 = SetDialogSkin( Dialog ) ); 最后在CSampleApp类的InitInstance函数里添加上： InitSkin(); 按Ctrl+F5,你瞧，皮肤上上去了！哈哈， 厉害了你！并不是很难吧。上面我们做的只不过是最简单最简单的上肤了。其实，仔细想想：按钮，菜单，文本框，标签，菜单，Combo等等一大堆的控件都需要上肤的。不过SkinMagic倒是都提供了，我们的做法也和上窗口皮肤大同小异，这里我就不再多说废话了。凭我的经验来讲，一般制作一个完整的皮肤，从PS描绘（有时还需要CorelDraw画）到最后皮肤放到窗口上大约需要3天吧，主要的问题就是要选好搭配的颜色。如果你说你一点美术灵感都没有，那我请你和我一样，找一个非常不错的广告图研究研究；如果你还说一点灵感也没有找到，那只能说明你实在懒得可以。对原作者内容进行了改动，为了方便学习，我这是收录其中的精华如何使用：下载SkinMagic的开发包，我用的开发包需要下面几样东西：SkinMagicLib.lib，DETOURS.lib两个库文件；.smf文件（皮肤文件）；还有个SKinMagicLib.h文件；这些就足够了（SkinMagicLib.lib 1199kB 的据说经处理不会显示Powered by SkinMagic，但我这里用着会产生问题，不得已还是用了998kB的）新建工程后，将SkinMagic包中的SkinMagicLib.h、SkinMagicLib.lib、DETOURS.lib拷贝到所在文件夹下，点击Project-Add To Project-Files,包含到工程中。(SkinMagicLib.h、SkinMagicLib.lib 可以直接放在工程文件中，DETOURS.lib和.smf皮肤文件可以放在res文件夹中)在Resource View中点击Import 菜单引入几个Skin二进制文件放在相同的“SKINMAGIC”文件夹下，分别给起一个名字（见源程序）。(4) 在stdafx.h中加入#include SkinMagicLib.h #include / MFC support for Windows Common Controls#endif / _AFX_NO_AFXCMN_SUPPORT#include SkinMagicLib.h/AFX_INSERT_LOCATION（5）打开以你工程名字命名的CPP文件，在里面的InitInstance()函数里，单文档在 if (!ProcessShellCommand(cmdInfo) return FALSE;这一句的后面加上更换皮肤的关键代码：/*换肤代码*/ VERIFY( 1 = InitSkinMagicLib( AfxGetInstanceHandle(), NULL , NULL, NULL ) ); /初始化类库VERIFY( 1 = LoadSkinFromResource( AfxGetInstanceHandle(), KROMO ,SKINMAGIC) );/从资源中加载皮肤 VERIFY( 1 = SetWindowSkin( m_pMainWnd-m_hWnd , MainFrame ); /对话框这句可不也可以放着 VERIFY( 1 = SetDialogSkin( Dialog ) );/m_pMainWnd-ShowWindow(SW_SHOW);/m_pMainWnd-UpdateWindow();/*/其中，第二句的作用是更换皮肤资源；（本来还有另外一种换肤的途径，直接从文件读取，不需要引导资源，更加简洁，但是这样子直接运行exe文件会出现问题，百思不得其解，只有舍弃）（5）让你的程序更进一步，在菜单栏中添加更换皮肤项目，只需要在它的相应函数中写入： VERIFY( 1 = LoadSkinFromResource( AfxGetInstanceHandle(), KROMO ,SKINMAGIC)，就可以实现换肤的功能了，当然这里IDR_Devior需要换成你想更换皮肤资源的ID；（6）我在实际运行的时候发现了一个问题，编译时只能选择MFC共享的DLL，如果用动态的库链接则会出现问题，好像是说库与库之间命名冲突之类，可能是SkinMagicLib库的问题，我找了很多SkinMagicLib的库，试了很多遍都没有办法解决，只有在编译时注意一下，选择MFC共享的DLL；（7） 在MainFrame中加入换皮肤菜单，及相应的函数，在函数中加载皮肤。void CMainFrame:OnDevior() LoadSkinFromResource( AfxGetInstanceHandle(), DEVIOR ,SKINMAGIC) ; 参考资料：/document/viewdoc/?id=752/shelvenn/archive/2008/01/16/1041