|Changing the TitleBars and Borders||7|
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.
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.
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.
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.
|Table of Contents|