如何在Photoshop里面修改控件的皮肤样式（青岛-小豆豆）.docxVIP

在Photoshop里面给控件设计皮肤样式青岛-小豆豆又来献丑了如何给控件设计皮肤，估计很多人想知道，那么今天小豆豆教你如何在Photoshop里面给控件设计皮肤样式。我用xe7里面的一个style样式（MetropolisUIBlue.style）为例子，教大家如何通过xe7自带样式的png格式图片修改里面具体控件的皮肤。废话不多说，下面就跟着我一步步做吧。新建一个Muti-Device Application；建立一个空白的工程。二、在窗体上添加tabcontrol控件和switch控件，因为我们要以这两个控件做示范，别忘了还有stylebook控件。三、双击stylebook，为stylebook导入一个平台自带的控件样式MetropolisUIBlue.style，文件在目录：{你的XE7安装目录}\Redist\styles\Fmx下在（窗体）属性stylebook里面选择stylebook1。四、让我们看看他的样式五、下面我们要开始设计他的样式让他的tabcontrol控件和switch控件样式发生变化。打开Bitmap Style Designer.六、导入我们要更改的style皮肤样式模板文件MetropolisUIBlue.vsf，注意：文件扩展名不同于前面的样式文件，是vsf。（文件位于目录：{你的XE7安装目录}\Redist\styles\vcl，），在左边的目录树Images节点下，可以看到样式的png图片，然后导出它的png图片，保存。七、在Photoshop里面打开我们刚才导出的png图片进行编辑。本图是导出后的png格式我想switch的控件显示的皮肤效果的两种不同态。下面我们一起来实现它。如图八、在Photoshop里面找到switch的皮肤的位置然后用参考线标出来，用圆角矩形工具绘制。这是原来的皮肤选择圆角矩形工具进行绘制绘制的皮肤，中间圆角，两边是圆。九、然后我们选中png图层，用矩形选中工具将原来的图像信息delete掉我们发现圆超出了参考线，这样控件会显示不全，所以我们需要设置它的坐标，这个后面会讲到。十、下面编辑tabcontrol的皮肤十、将图片另存为MetropolisUIBlue-SWITCH.png(起名字很重要，这样你就知道这个图片的坐标基于谁的母版做的，这样我们只需要更新图片就好了不用自己给每个控件找坐标)十一、打开Bitmap Style Designer。为什么要打开它？因为它有默认设置好的坐标，我们就不需要重新定义坐标了。，十二、点击update，选择我们刚存好的MetropolisUIBlue-SWITCH.png图片。然后进入object找到switch，点击switch，给它的图片重新定义坐标。（因刚才我们画的圆形超出了参考线）超出部分会显示不全。调整的时候用左右鼠标键调整好。调整完点击Apply。十三、调整好可以另存为了，（注意这里特别重要，因为这里有个大bug,一定按照我的图片上画的红色箭头移动你的鼠标去点击另存为，如果你的鼠标在保存过程中鼠标箭头滑过红色矩形的范围，那么你刚才的调整都白费力气，不信你试试）哦，必威体育精装版消息，XE8这个bug修复了我的版本是XE7up1保存的时候存两中格式，所以要存两遍，MetropolisUIBlue-SWITCH.vsf和MetropolisUIBlue-SWITCH.style。并保存到不同的文件夹中（这不需要我教你了吧？）十四、请看最后我们的要的效果有么有实现呢？Oh ~~~ YES,I did it !如果喜欢和我一起交流Delphi的的皮肤控件设计，欢迎加入群Delphi皮肤设计交流群191400719如果在为不知道如何给控件加皮肤而烦恼，可以购买OrangeUI控件欢迎加群OrangeUI技术支持10900297