Changing the TitleBars and Borders

The Elements of the Title Bar and Windows Borders

The title bar and window borders are another important element in the GUI. Before we start creating graphics and putting them together in SkinStudio, lets take some time to learn what exactly these elements consist of.

Vista

Title Bars. The title bar is the area at the top of a window and it contains items such as the close/minimize/maximize buttons, and the name of the application that is open.

Borders. The borders are the frames around the edge of the window. These consist of the top, bottom, right and left sides of the window.

Buttons. The buttons contained in the title bar are ones you should be quite familiar with, as they typically consist of the minimize, maximize, and close buttons that are often used.

Understanding per-pixel frames vs. UIS1 vs. UIS2

When you get into the Window Frames section of SkinStudio, you are going to see references to "UIS". So what exactly does "UIS" mean? UIS is User Interface Specification and it is an INI based skin language. UIS1 and UIS2 are both levels of skin languages and both have their own pros and cons when it comes to skinning the frames.

UIS1 is typically associated with a basic skin. UIS1 skins are faster and easier to create, but lacks the advanced features and functionality. If you are just replacing the default images in the window frames, then this would be your best option.
UIS2 is also referred to as an advanced skin. These skins much more advanced than UIS1 as these skins don't have limits on title bar and border sizes. They can also use things like shadows and alpha blending in windows. UIS2 is not as fast as a UIS1 skin, but still faster than the Windows default.
Per-pixel frames allows you to have an alpha channel which will let your frames have a shadow and be semi-transparent. UIS2 frames do not have a per-pixel option.

As we discussed earlier in the "Intro to SkinStudio" chapter, by choosing a basic skin SKS will give you the UIS1 frame options, and choosing an advanced skin will give you access to UIS2 and per-pixel frames.

Making a New Title Bar

For the skin I am creating, I am going to start creating a title bar and borders that are per-pixel. I am doing this because I want my windows to have shadows and some of it to be semi-transparent. Opening SkinStudio we will now be working in the Edit Title bar and Window frames category. From there lets start by opening the Edit per-pixel frames section in the main SkinStudio interface.

In the per-pixel frames area we will starting working under Borders. You will notice several elements in this section, and to begin making our title bar we want to work in the "Caption" category.

If you haven't already, now is the time to start creating your images in the graphics editor of your choice. As I mentioned in the Start Menu chapter, you can create and slice one image to create your title bar and borders, or you can do image by image. If you are new to making skins, I would also suggest editing the default skin images and taking a good look at them. It's a good way to see how individual images look and can definitely help you learn the process.

I once again create the image using Photoshop and I have added shadows and transparency to my image. I import the .PNG image into the Caption area using the "import file" button as we have with previous images. The title bar has two image states, one for the active window and the other for the inactive window. As always you can see a preview of your title bar in the preview windows in SkinStudio. This is also a perfect time to try out the "Test" button located just below the preview window. Pressing this will bring up an actual window where you can test out the elements you just skinned (note that WindowBlinds must be running).

More than likely you will need to adjust the image to align correctly to the rest of the skin elements. For this we go back to the Painting margins tab where, depending on your image, you can adjust the skins margins by changing the the margins value. For the image I used, I set the margins to tile the middle section and made any other adjustments as needed with the number values on the right side of the window.

You also probably noticed that there is a Glass option under each element for Vista users. This will allow you to place a "glass" image into your skin using the same image import methods as described before.

As mentioned above, the title bar also contains the text of the application that is being used. This text can also be modified using SkinStudio. The first thing we will change is the text position on the title bar. By default it's aligned to the left, but for this skin lets make the text align to the center.

Simply change the Horizontal alignment to center to change the text position. There are also settings to adjust the vertical alignment, text color, and the text font. I'm going to try several different color and font schemes to see which one I like the best for this skin. When changing fonts in a skin, making sure the text is readable is very important.

In the other settings tabs you will find the option to add a coloring mask to your skin element. You can import the mask in the same manner as other images, but make note that the coloring masks must have the exact same dimensions as the original image used.

In the "Extra Settings" tab you are presented with several options for the title bar.

Active/inactive text alpha. Here you can adjust how transparent title bar text is on active and inactive windows.
Sizing area size. Allows you to adjust the amount of the border that is sizable.
Blur effect. Gives you the option to enable or disable the blurring effect on the title bar.
OS Caption height. This setting adjust the height of the OS title bar.
Animation rate. This value allows you to adjust the animation rate on the title bar.
Window frame count. Set the number of frames.
Blur values. Adjust the blur on rounded corners in per-pixel skins.

Table of Contents