七步空间-PCHDC

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://12-09.blogbus.com/logs/30121407.html

1. 前言

    + 什么是皮肤？
    + 什么是WindowBlinds？
    + 什么是SkinStudio？
    + Windows图形界面的基本组成部分 2.  SkinStudio 概览
    + 选择皮肤类型
    + SkinStudio的主要功能模块 3. 制作开始菜单和任务栏
    + 开始菜单和任务栏所包含的元素
    + 开始菜单所包含的元素
    + 制作开始菜单
    + 将图片导入 SkinStudio 4.创建任务栏的图片

    + 水平任务栏
    + 系统托盘
    + 组相似菜单
    + 垂直任务栏

========================
以下为E文原版，先提供目录

5.  screating a new  Start Menu

    + Creating a Start Menu
    + Start Menu Logoff Images
    + Start Menu Popup Windows


6.  Saving  Your Creation

    + Saving Your Work


7.   Changing the TitleBars and Borders

    + The Elements of  the Title Bar and Windows Borders
    + Understanding per-pixel frames vs. UIS1 vs. UIS2
    + *** a New  Title Bar


8. creating Title Bar Buttons
    + Creating and Importing  Buttons
    + UIS1 and  UIS2 TitleBars/Buttons
    + Minimized and ToolWindows Window
    + Creating Borders


9.   Skinning Windows Buttons and Other Controls
    + Buttons and Controls
    + Combobox Controls
    + HeaderBar Controls
    + Menus and Menu Bars
    + ProgressBar Controls
    + Scrollbars
    + Spin Controls
    + Statusbar Controls
    + Tab Controls
    + *** Controls
    + Trackbar Controls
    + Treeview +/-  Controls


10.  Windows  XP Specific Elements
    + Windows XP Shell
    + Logoff and  Shutdown Screens
    + *** Icons in Explorer and Internet Explorer 6
    + Control Panel  Shell Styles
    + Shell Style  Icons and Pictures
    + XP File Animations


11.  Vista  Specific Elements

    + Vista Specific Elements
    + Explorer/IE Shell  Parts
    + Internet Explorer 7
    + Task Dialog Controls
    + Vista Explorer Parts
    + Additional Vista  Parts


12.  Fonts and  Coloring

    + Changing Skin Fonts
    + Changing Skin Colors


13.  Tips and  Tricks

    + Creating and Managing  Sub-Styles
    + Backgrounds
    + Re-Coloring Skins
    + Theme Part Details
    + Start Menu Animation  Builder
    + Animation Compression
    + Misc. Tips & Tricks


14.  Conclusion and  Resources

    + Conclusion
    + Stardock Resources

 

=================================

前言 什么是皮肤？

皮肤的概念是指可以自定义某个表面的外观，比如有些手机、电脑机箱可以更换外壳，有些计算机软件可以更换外观。而大家所熟悉的Windows操作系统当然也可以更换视觉外观，一般来说我们把改变Windows外观的主题叫做“视觉风格(Visual Styles)”。这里我们就把他简称为皮肤

Windows皮肤都是由很多一张张小图片组成的，看一下你的任务栏就可以猜测图片的数量是比较可观的，但是我们只要把这些图片全都替换掉就可以彻底改变Windows的外观了。

做皮肤的过程就是始于把需要替换的小图都做出来，然后告诉程序他们是用来替换哪些原始位图的。




什么是WindowBlinds？
WindowBlinds是用来自定义Windows图形用户界面的一款软件

WindowBlinds（以下简称WB）发布于1999年。那时的主流系统是Windows 95/98和Windows NT 4.0。最早的时候WB只能改变窗口标题栏的外观，后来才逐渐加入了可自定义的按钮、滚动条、单选框等等各种Windows常用控件。

Windows XP中加入了加强版的开始菜单，而资源管理器中也多出了“常用任务面板”。这些元素也很快被WB所支持。

如今，WB已经可以改变几乎Windows的所有元素的外观，而且支持的操作系统版本也涵盖了Windows 2000、Windows Vista等。

可以想象的是，创造一套WB支持的皮肤是非常复杂的一件事，所以Stardock推出了一套WB皮肤的开发软件——SkinStudio（以下简称SS）




什么是SkinStudio？

SkinStudio是用来创建WB皮肤的软件，她的出现大大简化了皮肤制作的过程。

这篇教程的目的就是向你解释如何用SS从头开始制作一套WB皮肤。SS 第6版是完全重写的一套软件，所以这篇教程主要适合SS6及之后的版本。SS6和以前版本最大的改进就是加强了软件的易用性，让新手也可以顺利地创建属于他们自己的皮肤。


Windows图形界面的基本组成部分

   1. 开始菜单(Start Menu) 点击“开始”按钮后出现的程序快速访问面板
   2. 任务栏(Taskbar) 显示你当前所运行程序和“开始”按钮的地方，另外他也包括了系统托盘
   3. 窗口边框(Window Borders) 你所操作的每一个窗口都有他自己的边框。一般来说，边框顶部的标题栏（SS和WB其实支持将标题栏放置在窗口的底部或者如何角落）包含了窗口名字和最小化/最大化/关闭按钮
   4. 控制元素(Controls) 包括按钮、单选框、单选框、滚动条、菜单、工具栏等等在使用程序时需要操作的各类交互元素

SS虽然可以更改几乎每个GUI元素的外观，但是制作皮肤时也完全可以忽略一些东西，这些部分SS和WB会自动使用系统默认外观。

 

SkinStudio 概览 打开SS之后可以选择编辑现成的某个WB皮肤也可以创建新皮肤。如果选择后者就相当于从Windows默认外观的基础上开始制作主题。

SS启动界面



如果选择创建新皮肤，SS会问你所需要创建的皮肤类型，基础的或者高级的



选择皮肤类型

两个选项如下：

   1. WindowBlinds基本皮肤 技术上我们称为UIS 1皮肤。仅包括了基本的Windows GUI元素，所能自定义的元素比较有限但是加载较快。
   2. WindowBlinds高级皮肤 窗口边框尺寸没有限制，也可以使用带Alpha通道的半透明图片。速度也许没有基本皮肤快，但是支持的特效多很多而且速度仍然比Windows默认主题快。

SkinStudio的主要功能模块

选择皮肤类型之后就可以看到皮肤的预览，左侧面板即是你可以更改的一些元素。



主要功能模块有：

• 整体预览（Full Preview） 大概地显示一下你现在所编辑的主题
• 编辑控制元素 （Edit Controls）按钮，标签页，进度条，滚动条等等
• 编辑开始菜单和任务栏（Edit Start Menu and Taskbar） 改变开始菜单和任务栏的外观
• 编辑资源管理器/IE外观（Edit Explorer / IE Shell Parts） Windows Xp资源管理器和IE7的tab，以及Vista下的资源管理器。
• 编辑Windows XP文件动画（Edit XP File Animations） 当你在复制、移动、下载等情况下弹出的对话框内的动画
• 编辑窗口边框（Edit Titlebars and Window Frames） Windows GUI最基本到组成部分，包括了最小化/最大化/关闭按钮、标题栏文字（Caption）以及窗口图标。如果使用了Per-Pixel的边框，你可以给窗口增加半透明效果，这也意味着可以直接实现窗口阴影。
• 更改皮肤颜色设置（Change Skin Colors） 所有程序文字和线框颜色
• 更改皮肤字体设置（Change Skin Fonts） Windows 图形界面中的文字字体
• XP特有元素（XP Specific Sections） 注销、关机对话框，控制面板和常用任务面板（一般出现在资源管理器的左侧）
• 桌面背景（Backgrounds） WindowBlinds可以在皮肤中附带桌面壁纸，也可以改变资源管理器的背景位图。
• 主题元素汇总（Theme Part Details） 这里是所有常用元素，可以快速地找到一些需要重点修改的部分。

现在你对SS已经有了一个大概的了解，下节开始一点点向您展示如何制作皮肤。

 

制作开始菜单和任务栏 开始菜单和任务栏所包含的元素

任务栏（Taskbar）是一套系统皮肤最重要的组成部分，因为这是我们和Windows最常进行交互的地方。制作任务栏时有许多元素需要涉及，所以先让我们有个大概的了解



   1. 任务栏（Taskbar） 任务栏一般情况下出现在桌面的底部，容纳了开始菜单和系统托盘等元素。

   2. 开始按钮（Start button） 点击之后即可访问开始菜单（start menu）。在SS中，开始按钮也可以做成动画的效果

   3. 任务栏按钮（Taskbar buttons） 他们显示的是当前正在运行的程序。

   4. 系统托盘（System tray） 系统托盘也被称为通知栏（notification bar)。托盘当中显示了一些最小化了的程序以及状态提示等图标。系统托盘中可以skin的元素有时钟文字和展开/收缩按钮等

   5. 快速启动栏（Quick Launch bar） 包含了启动程序的快捷方式

   6. 尺寸调整栏（Resizing bar） 尺寸调整栏只在XP下显示，当任务栏没有被锁定的时候就可以通过拖动尺寸调整栏来调整任务栏的大小。

   7. 拖动条（Rebar gripper） 拖动条是用来调整快速启动栏大小的。
      
   8. 开始菜单（Start menu） 开始菜单中显示了已经安装的程序和其他快捷方式，下面会详细介绍。


开始菜单所包含的元素

从皮肤制作的角度来看，很多人在搞去一直抱怨在制作开始菜单的过程中会遇到问题。所以这部份也是SS6想要极力改善制作过程的。



   1.  顶部（Top Part）  在程序列表之上的开始菜单顶端部分。大家可以应用一下Molten（WB预装皮肤之一）看看SS和WB可以把开始菜单的效果实现到何种程度。

   2. 底部（Bottom Bar） XP下这部份包含了注销和关闭按钮，而在Vista下还有一个搜索框。

   3. 注销/关机按钮（Logoff/Shutdown Buttons）

   4. 弹出菜单（Popup Menus）   仅限于XP，就是点击了所有程序之后弹出的包含了所有已安装程序的菜单。

   5. 程序列表（Programs List）   位于开始菜单的左侧，包含了程序的快捷方式，分割条，“所有程序”按钮和箭头。

   6. 快速访问列表（Places list）.  位于开始菜单的右侧，包含了一些快捷方式比如我的文档、我的图片等等。



制作开始按钮

现在来实践一下做皮肤，让我们从Windows GUI中最醒目的元素之一开始：“开始按钮”（start button）

下图中可以看到，一般的开始按钮拥有5种状态。在开始按钮的某个特定状态下，图片中的一个部分就会显示出来。Skinstudio能根据对应元素的实际状态数目来自动将图片平均切分，比如下面这个开始按钮的位图依次为：

   1. 普通（Normal）
   2. 按下（Pressed）
   3. 不可用（Disabled）
   4. 悬浮（Mouse Over）
   5. 默认（Focus & Default）

共5个状态。

你可以使用如何图像编辑软件来编辑主题的图片，这里我以Adobe Photoshop为例。这里出现的所有元素都是比较基本的状态，只是为了方便初学者理解，实际上你完全可以做得更有创意。WB支持的图片格式主要有TGA和BMP，当然，你也可以导入PNG图片（SS会自动把PNG转换成TGA）

五个状态我们这里使用了不同程度的发光效果加以区别。你也许注意到了，这些开始按钮看上去都被裁掉了一部分，那是因为这里我把这套主题的开始按钮设计成类似Vista的效果，即开始按钮的高度超出了任务栏。超出的部分我们无法直接做到开始按钮的图片里面，而是要用到SS的另一个功能“外发光”来实现。

我们需要注意把这五个状态的次序不能搞错。同时你也可以使用SS6新加入的边框编辑器（frame builder）来导入单个状态的图片。

开始按钮图片：




将图片导入SkinStudio

图片做好之后我们需要将其放进SS中，在主界面中选择“编辑开始菜单和任务栏”（Edit Startmenu and Taskbar），然后选择“编辑水平任务栏”（Edit horizontal taskbar）。在随后打开的窗口中可以在底部简单编辑区域。开始按钮由两部分组成：“按钮”（button）和“外发光”（glow）。默认状态下外发光效果并未打开。



点击箭头按钮（如下图）之后就可以选择导入图片的方式。如果图片的排列等已经全都做好，则可以使用“快速导入文件”（Quick import file）选项。而点击“编辑”（Edit）则可以用事先设定的外部程序直接对图片进行编辑（如果你对皮肤有了一些了解或者只对图片进行一些简单修改，建议使用这个）。



选择“导入”（Import）会打开一个高级的导入对话框



边框编辑器（Frame Builder）是皮肤制作过程中一个很有用的工具，选择“创建子边框”（create sub-frames）或者直接在SS的菜单栏下拉菜单中都可以打开他。



边框编辑器主要用来帮助我们调整不同状态的顺序并且合并成一张图片。如果你已经有了合并好的图片，边框编辑器也可以帮助你调整里面不同状态的顺序。在保存之前，你也可以选择不同状态排列的方式，水平或者垂直的。

如果你订购了Pro版的SS，你就可以在边框编辑器里拥有“颜色调整”选项（re-coloring）。利用这个功能，你可以调整整张图片的颜色，也可以只调整单独某个状态的颜色。



开始按钮做好之后我们开始处理外发光部分。现在这个样式的开始按钮会高出任务栏几个像素，所以只有使用外发光效果才能让他显得完整。图片我事先已经做好，并且导入了SS，但是我们仍然需要一些设置来让他和原来的按钮结合起来不错位。在“附加设定  I ”标签（Extra settings）中调整坐标来让他放置在正确的位置。



SS6另外一个新功能就是“层”（Layers）。这个功能是我们可以在基底图片上添加额外的若干层图片，可以想象这是一个非常强大的功能，比如我们可以在一个平铺的图片上叠一层拉伸的图片。



当开始按钮的图片和设置都完成之后，你可以在下拉菜单中选择各个状态预览效果。而在另外一个下拉菜单中，你可以选择预览画面的背景颜色，这样就可以测试各个部分在深浅不同背景下的实际表现情况。

 

创建任务栏的图片 水平任务栏

接下来我们开始制作水平任务栏，先准备任务栏的背景图片。

任务栏背景图片有两个状态，顶部任务栏和底部任务栏。下图中的任务栏高度是30像素，已经包含了两种状态，并且保存为了PNG格式。



使用之前介绍的方法，我们把图片导入进SS中。图片一旦导入，就能在SS的预览窗口中看到更新过的效果图。需要对任务栏做进一步的参数调整，我们看一下SS界面中的各个标签页，首先是“额外设置”（Extra settings）标签页。在这里，我们可以打开任务栏的半透明和模糊效果。



接下来是重设大小边条（Resizing Bar，仅限于XP)。也就是在当任务栏没有锁定时出现在任务栏边缘的小条，拖动时可以改变任务栏宽度。在SkinStuidio中可以发现凡是XP特有的元素就会在元素名称旁边有个WindowsXP的logo。再接下来就是任务栏闪烁按钮（Flashing button）。这是一个单帧的元素，一般可以把普通状态的任务栏图片拿来直接修改生成。



在水平任务栏中还有两部分，分别是快速启动栏按钮（quick launch icon button）和工具栏握把（Rebar gripper）。快速启动栏按钮有6个状态，和所有其他元素一样，想要查看详细的状态排列顺序可以点击帮助标签页。



系统托盘

工具栏握把和快速启动栏按钮之后我们就差不多完成了水平任务栏的主体。接下来是系统托盘，系统托盘的首要元素是背景图片，很经常地，我们也可以用一整张透明的图片来作为系统托盘的背景，这样系统托盘会被完全透过而直接显示任务栏的背景图片



“系统托盘展开按钮”（system tray arrow expander）就是系统图片边上的那个小箭头按钮，点击之后非活动的系统托盘图标就会显示/隐藏。这个组件拥有6个状态，分别是显示/隐藏时的普通，鼠标悬浮和按下状态。



时钟字体（Clock text）。这是系统托盘的另一个部分，我们不需要创建图片只需要设置一下显示时钟的字体和文字颜色



在“字体编辑”（Edit Fonts）窗口里除了可以改变或者添加字体设置，还能把某些字体预置进当前的WB主题中，这样当这个主题被应用之后就会自动把指定的字体安装到系统目录中。我们可以通过这样的设置在主题中使用自定义的，非系统默认字体。具体做法就是在字体编辑窗口当中按“导入字体文件”（included font files），然后指定文件名，当然，我们首先需要把这个字体的文件复制到当前主题的目录下面。WB6主题的默认文件夹是 X:\Documents and Settings\All Users\Documents\Stardock\主题名\

字体编辑的另一个按钮是编辑Vsita字体（Modify Vista parts fonts），顾名思义，你可以通过这里调整Vista某些特定地方的字体设置。






组相似菜单


这是水平任务栏的最后一部分了，组相似菜单（Group Similar Menu）由背景和菜单选项背景组成，背景有一个状态，选项有4个状态



现在水平任务栏基本完成了，我们可以在编辑窗口点击应用（Apply）来测试一下主题，事实上我们鼓励在制作过程中多进行测试，可以测试一下各个状态下主题的实际效果，包括悬浮、按下等状态。



垂直任务栏

现在来看垂直任务栏，大部分组件类似，但是垂直任务栏和水平任务栏共用一个开始按钮，而任务栏按钮有时候也能用同一张图片，所以主要是对系统托盘和任务栏背景图片进行设计和制作。

垂直任务栏的背景图片也分两个状态，包括任务栏在左侧时和在右侧时的情况。导入图片之后我发现一点问题：任务栏的是被平铺（tile）而不是拉伸（stretch）。



点击“九宫格设置”标签页（Painting Margins tab）可以设置一下任务栏背景图片的边缘界限（margins）。在下拉框里我们可以设置任务栏的渲染模式，基础的选项是平铺（tile middle section）和拉伸（stretch middle section）其他的一些选项可以帮助我们使用更高级的模式，比如水平方向平铺而垂直方向拉伸等等。选择正确的模式能够让图片显得更加平滑没有缺陷。九宫格设置标签页中也有预览区域，可以直接拖到图片的右下角来查看不同尺寸时的表现情况。

垂直任务栏的其他元素包括：

   1. 重设大小边条（Resizing Bar，仅限于XP)
   2. 任务栏按钮（Buttons）
   3. 快速启动栏按钮（Quicklaunch icon button  ）
   4. 工具栏握把（Rebar gripper）
   5. 系统托盘（Tray section）
   6. 系统托盘展开按钮（system tray arrow expander）

这些元素的设置和水平任务栏基本上都是大同小异的。