软件的时尚外衣：软件美之外观美——皮肤制作
就我所知，设计软件皮肤好像从来不是程序员擅长干的工作。不过我也调查过，很多程序员朋友对皮肤的制作还是满有兴趣的。在这个部分，我专门用我制作的一个软件皮肤为例，从头到尾的给你讲解一遍。其中包括皮肤的画法，皮肤的定制和皮肤的嵌入。如果你有兴
趣，那么就跟着我来做一个皮肤试试吧！
工预善其事，必先利其器。我们先谈谈制作皮肤需要的工具吧。首先我使用的编程语言是VC＋＋，所以皮肤的嵌入软件，自然也选定是专门制作给VC＋＋的了。我使用的这个软件叫做SkinMagic，有很多朋友通过各种途径得到过这个软件。不过这个软件是个共享软件，而且每一个注册码对应一个软件皮肤，收费高达89美元（我曾经买过几个，吐血！），但是确实非常好使。其实就我所知，很多共享软件的作者都使用这个软件（而且也曾经跟我一样吐过血～）。用它作为皮肤的嵌入软件的原因当然是非常地容易制作啦。不过值得庆幸的是这个SkinMagic1.0以前的Beta版本是免费的，这样我们也是可以用的，你可以到http://www.mono cers.com/jon/SkinMagicSDK_beta.rar去下载。
有了这个工具之后我们还要面有PhotoShop7（以下简称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包里拷贝些东西，他们分别是：
把这三个文件拷贝到你的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天吧，主要的问题就是要选好搭配的颜色。如果你说你一点美术灵感都没有，那我请你和我一样，找一个非常不错的广告图研究研究；如果你还说一点灵感也没有找到，那只能说明你实在懒得可以。^_^
我知道，我们都懒得麻烦，所以我把我在这个例子中做的软件和皮肤都上传到了网上，你可以到：http://
www.monocers.com/jon/TestSkin.rar去下载这个例子的全部代码和图片。
结束语
也许你觉得，很多东西我并没有说的那么让你满意，但是我想如果你看完这篇文章就开始觉得要去好好的整理一下你的软件了，那么这就是一个好的开端。其实一个好的软件设计者也应同时是一个不算太差的美工；原因很简单，就算你不打算制作皮肤，你至少也得能够告诉人家你需要的风格同时又能看出来人家做的是不是很美观。我曾经给一个朋友做过皮肤，他总觉得我作的不好（这个我倒没什么），后来他干脆自己做了一个，结果过了两天，他又来找我了，因为他自己也不知道到底什么叫做好看，什么叫做不好看。
就像我们在不同的场合要注意不同的着装一样，我们的软件也需要穿“漂亮的衣服"，出门前也要“打扮”。我希望你能养成每一次下载了别人的软件都去欣赏欣赏它的外观的习惯。不管是外观也好，窗口布局也好，帮助文档也好，都去简单地欣赏一下，时间长了，你就会发现你渐渐地入门了，随着这种能力的提高，你就慢慢的掌握了如何给你的软件打扮了。我是在我的一个朋友的建议下写这篇文章的，因为他的软件在我们俩的包装后得到了成倍的下载数量，所以我也想把我这些仅有的经验跟你分享，希望你因为我的文章能够有所帮助，如果真的能给你带来些什么，我将非常荣幸。收藏 http://www.qqread.com/data-structure/s712991010.html
更多内容请看常用软件加密宝典、杀毒软件专栏、软件插件专题，或进入讨论组讨论。
就我所知，设计软件皮肤好像从来不是程序员擅长干的工作。不过我也调查过，很多程序员朋友对皮肤的制作还是满有兴趣的。在这个部分，我专门用我制作的一个软件皮肤为例，从头到尾的给你讲解一遍。其中包括皮肤的画法，皮肤的定制和皮肤的嵌入。如果你有兴
趣，那么就跟着我来做一个皮肤试试吧！
工预善其事，必先利其器。我们先谈谈制作皮肤需要的工具吧。首先我使用的编程语言是VC＋＋，所以皮肤的嵌入软件，自然也选定是专门制作给VC＋＋的了。我使用的这个软件叫做SkinMagic，有很多朋友通过各种途径得到过这个软件。不过这个软件是个共享软件，而且每一个注册码对应一个软件皮肤，收费高达89美元（我曾经买过几个，吐血！），但是确实非常好使。其实就我所知，很多共享软件的作者都使用这个软件（而且也曾经跟我一样吐过血～）。用它作为皮肤的嵌入软件的原因当然是非常地容易制作啦。不过值得庆幸的是这个SkinMagic1.0以前的Beta版本是免费的，这样我们也是可以用的，你可以到http://www.mono cers.com/jon/SkinMagicSDK_beta.rar去下载。
有了这个工具之后我们还要面有PhotoShop7（以下简称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包里拷贝些东西，他们分别是：
把这三个文件拷贝到你的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天吧，主要的问题就是要选好搭配的颜色。如果你说你一点美术灵感都没有，那我请你和我一样，找一个非常不错的广告图研究研究；如果你还说一点灵感也没有找到，那只能说明你实在懒得可以。^_^
我知道，我们都懒得麻烦，所以我把我在这个例子中做的软件和皮肤都上传到了网上，你可以到：http://
www.monocers.com/jon/TestSkin.rar去下载这个例子的全部代码和图片。
结束语
也许你觉得，很多东西我并没有说的那么让你满意，但是我想如果你看完这篇文章就开始觉得要去好好的整理一下你的软件了，那么这就是一个好的开端。其实一个好的软件设计者也应同时是一个不算太差的美工；原因很简单，就算你不打算制作皮肤，你至少也得能够告诉人家你需要的风格同时又能看出来人家做的是不是很美观。我曾经给一个朋友做过皮肤，他总觉得我作的不好（这个我倒没什么），后来他干脆自己做了一个，结果过了两天，他又来找我了，因为他自己也不知道到底什么叫做好看，什么叫做不好看。
就像我们在不同的场合要注意不同的着装一样，我们的软件也需要穿“漂亮的衣服"，出门前也要“打扮”。我希望你能养成每一次下载了别人的软件都去欣赏欣赏它的外观的习惯。不管是外观也好，窗口布局也好，帮助文档也好，都去简单地欣赏一下，时间长了，你就会发现你渐渐地入门了，随着这种能力的提高，你就慢慢的掌握了如何给你的软件打扮了。我是在我的一个朋友的建议下写这篇文章的，因为他的软件在我们俩的包装后得到了成倍的下载数量，所以我也想把我这些仅有的经验跟你分享，希望你因为我的文章能够有所帮助，如果真的能给你带来些什么，我将非常荣幸。收藏 http://www.qqread.com/data-structure/s712991010.html
更多内容请看常用软件加密宝典、杀毒软件专栏、软件插件专题，或进入讨论组讨论。
相关图文阅读
频道图文推荐
健 康 咨 询
时 尚 咨 询
相关专题
- 最新数据结构(试题）习题解答 (10493次浏览)
- 《数据结构》试题下载2004 (6688次浏览)
- 数据结构自测试题(节选章节) (5507次浏览)
- Linux系统的硬件驱动程序编写原理 (4647次浏览)
- 搭建Ruby on Rails开发环境 (4333次浏览)
- 2000年试题集锦（下半年）数据结构试题 (4069次浏览)
- Solaris 10 安装及SVC管理及X及Vmware及其 (3781次浏览)
- 网游外挂编写完全攻略 (3754次浏览)
- 《数据结构》教学大纲--入门必看 (3607次浏览)
- UML业务建模实例分析 (2941次浏览)
