WindowBlinds主题边框制作小教程

日期:2008 年 7 月 20 日理论 & 教程
极限主题的talis朋友问起我怎么实现WindowBlinds主题的窗体,所以就写下这篇小教程,希望对初学的朋友有点帮助。

首先当然是设计,这个过程应该怎么进行因人而异,很多设计师朋友的习惯是设计完主题的所有部件然后放到一张预览图里查看效果。而我个人的习惯是预览图阶段只做一个开始菜单一个窗口和任务栏。其他主要部件都是单独做的,比如按钮的话就安装切好之后的排列做一个源文件pushbtn.tga.psd

现在以窗口为例,谈一下我的制作流程:
新建一个窗口,放上自己觉得合适的壁纸做背景,然后开始设计边框。大小其实完全无所谓,wb里绝大部分组件都是可拉伸的,对于没有特别大的渐变的组件来说尺寸只要别太小就不会有失真。

这个阶段可以换上几张不同的背景,测试一下主题在不同深浅情况下的表现,另外窗口边框包括了激活和非激活两种状态,所以这个时候也可以在同一个窗体上分别实现出来。我设计完Azenis2的边框之后差不多是这样的:
图片载入中...


基本确定之后我们可以开始切图的阶段
1.在PS中去掉背景图层,相应的也要去掉标题栏文字啊,标题栏按钮啊之类的附属组件然后存为透明的png(带透明的即可,和后面生成的实际主题文件无关)。图片左下角和右上角的黑块只是随意添加的,为了方便之后的定位。激活状态和非激活状态各存一张。
图片载入中...



2.新建一个文件slice.psd,把两个状态的图都放进来对齐,然后添上几条辅助线(辅助线当然也不是必需的,如果你的眼神和手势够精确,直接用选取也完全ok),原则上就是按照最后的切图来,把窗口和阴影都要包括进去:
图片载入中...



3.然后就可以准备导入SkinStudio了。以顶部边框为例:(A) 打开slice.psd根据辅助线选择顶部标题栏的区域然后进行裁切(编辑菜单的crop命令),(B)然后把画布尺寸的高度double一下。例如之前辅助线画好的标题栏高度是40px,现在就把画布尺寸设置成80px(当然,执行画布尺寸命令的时候应该以图像上边或者下边作为参考点)。(C)因为现在的psd里有两个图层,一个是激活状态,一个是非激活状态,所以只要把非激活状态图层向下移动40px,也就是一个标题栏的高度就可以了。
图片载入中...



现在得到的这个图片就是最后的透明窗口顶部位图了,我们存为透明的tga文件在ss里调用就可以了(覆盖主题中原来的位图也OK)。存透明tga的方法可以参见这里: 再谈WB主题的透明TGA处理

微博 知乎 Twitter Dribbble Behance Instagram LinkedIn Unsplash