The basics of your Windows GUI

When you break Windows down into its GUI components what do you have? You have:

• The title bar
• The title bar buttons
• The borders of the window
• The push buttons
• The radio buttons and check boxes
• The scrollbar arrows
• The scrollbar background
• The scrollbar thumb
• The menu bar
• The menus
• Toolbar buttons
• The Start bar
• The Start menu
• The properties dialog tabs
• Misc. GUI elements

If you need more details on these components and what they do, then check out the Windows GUI reference.

When your skin, you can go little by little adding each element as you find the time to do so. When you make a skin, you essentially make the graphics to represent those things and then edit the text file that tells WindowBlinds where to put those graphics. So our next task is to talk about how to make those graphics.

Making the Graphics to Skin the GUI

Most WindowBlinds skins are made up Bitmap (BMP) graphics files. The latest versions of WindowBlinds also support the use of TGA files. You can use any graphics package to develop your skins, as long as it is capable of exporting the appropriate file.

Windows which are skinned by WindowBlinds don’t have to be completely rectangular; in fact they can be almost any shape you can imagine. The same is true for the buttons and controls you create. Bitmap files that you save however, must be rectangular, so how do you indicate areas that need to be transparent?

The solution is actually very simple. WindowBlinds has been designed to interpret the presence of a set color (magenta) as a request for transparency.

Any time WindowBlinds encounters this precise shade in a graphic it defines that area as being transparent. This does of course mean that you cannot use precisely this color in a skin, but even the smallest change in hue
(e.g. R:254, G:0, B:255) will be visible. This in itself raises another point which you should beware of.

Anti-aliasing is a technique by which the edges of objects are softened by gradually blending them into the background. While designing a skin, you need to be aware that anti-aliasing can cause problems because it softens edges by changing the surrounding hue.

On the face of it the circles on the left are fairly similar, but looking at them closely reveals the effect of anti-aliasing. The circle on the right will work perfectly as a WindowBlinds graphic, as the edges are crisp and it is surrounded by pure Magenta allowing transparency to work effectively. The circle on the left, if used, would have a purple ring around it regardless of what color it was placed over, as the edges which are not ‘pure’ will not be interpreted as transparent but rather the ‘impure’ color they are in the picture.

The other thing you need to know about graphics is that graphics used for WindowBlinds often consist of multiple ‘States’. What do I mean by this? Well, the appearance of most controls in Windows varies depending on how you are interacting with them. For example below is a graphic used for the Close button in a WindowBlinds skin.

You can see that the actual button appears to be repeated 6 times. This is because this one graphic contains all 6 potential ‘States’ in which the Close button can appear. The first set of 3 relate to the active window (i.e. the one you are currently working in), and the second set of 3 relate to all inactive windows (i.e. other windows on your desktop that you are not working in currently).

In each set of 3, the first image is how the Close button normally looks. The second is how the Close button looks when you press it, and the third is how it looks when you move your mouse over it.

Different controls can have different numbers of 'States' and these will be discussed when we get to them.