WindowBlinds 5 “PerPixel” new features explanatory series – part one.

Originally posted on

One of the coolest features of WindowBlinds 5 is the possibility to define a translucent frames in your skin. This means a lot of things and a lot of new possibilities. Your windows can drop shadows, glow but most of all you don’t have to look at those jaggies if your skin features rounded corners in them. The level of excitement can probably be shown by the fact that it does not have even shown in the public beta, yet it already has artists creating artwork advocating it. and a number of authors creating a mock-ups of the skins they intend to create. I have to admit I do not recall being contacted so much about any previous version of WindowBlinds and any other version that generated such passion among even the MSStyles users.

The new window frames blend nicely into the current feature set of WB.

The window part is divided into 5 parts, one for each side: top, bottom, left and right like in the following picture:

If you look at the picture carefully you’ll notice that unlike before the top and bottom part of the frame goes from the very left to the very right of the window. Meaning that unlike previously the corners belong to the horizontal images rather that vertical. I must say I like that change a lot as it’s much more natural. The frames layout inside the images have remained the same. The vertical images (left and right) contain 2 frames side by side horizontally. The first frame belongs to the active state of a window while the second one belongs to the inactive state. Similarly the Horizontal images (top and bottom) has 2 frames placed on top of each other. The upper one is the active state, while the inactive one is placed on the bottom.

Should you be reading it carefully you have probably noticed that I’ve said 5 but only mentioned 4, that is because the 5th one is the maximized caption


The image is formatted just like the regular caption image – 2 frames on top of each other. The images in all of the frames MUST be 32-bit TGA-s which SkinStudio can create for you from PNG images or even allow you to edit like described in one of my previous articles.

Now what about the buttons?

The per pixel buttons are a bit less flexible on those new borders than they are on the regular windows borders, but the good news is that they are MUCH, MUCH easier to understand and test! Currently WindowBlinds allows you to define 5 buttons: minimize, maximize & restore, close and a special close button for the frames that cannot be maximized or minimized (basically those Dialog frames like Display properties.

The frames in the image  are in the following order:

  • Normal
  • Mouse Over
  • Pressed
  • Disabled
  • Inactive
  • Inactive Mouse Over
  • Inactive Pressed
  • Inactive Disabled

And although not all of them may always be used the image can look like this: 

The buttons are in their respective sections conveniently places under the “Window Borders – Per-Pixel”->”Buttons” section. there is currently no way to define additional buttons and the buttons should use the same 32-bit TGA format as the frames.

Now SkinStudio 5 gives you a way to test those images by means of 4 new sub-previews added to the main preview.

Just like any other preview – clicking on an image will take you to its respective section. SkinStudio also allows you to reposition the buttons on the preview by dragging and dropping them in the places of your choice. There is a limit to how the buttons are placed currently – they have to be aligned to the top right corner and they have to be positioned in the window caption area, With an exception of the system icon which is aligned to the top-left corner of its window. You should be aware however that each button has 2 coordinates, one for when the window is maximized and the other for the non-maximized version of the window.

Cool! So I won’t ever have to create those regular borders, right? Wrong.

Unfortunately WindowBlinds still requires you to define the regular borders. Most users will not see them or just not too often, but it’s just like that vertical taskbar which is supposedly used only by me and probably the other freak at Microsoft that actually designed it :). WindowBlinds requires those frames for 2 situations:

  1. MDI Windows – the applications like SkinStudio that allow you to open multiple documents (skins) at once. Those will use the old frames when the document inside is not maximized and therefore requires the app to paint its frame.
  2. Older systems that WindowBlinds detects they cannot support it due to the lack of support on the driver’s side.

The good news is that you are WindowBlinds longer constrained on the per pixel frames to the size of the caption height – system metrics. You know… the error SkinStudio reported when you had the value of  Section: “Window Borders”->   Attribute: “Top Image”->”Caption Height” defined to a different height that the caption image height. You only should check that the maximized per-pixel caption does not collide with it as WindowBlinds will then crop the image.

Window caption text

All the caption text definitions are stored withing the definition of the caption image, that is the Section: “Window Borders – PerPixel”->”Caption”->   Attribute: “Text Settings”. You can define the text font there as well as it’s placement and color. You can shift if vertically and horizontally by means of: Section: “Window Borders – PerPixel”->”Caption”->   Attribute: “Content Margins”.

Other than the imperative to have TGA’s as the images on those new sections they are pretty much a standard WindowBlinds sections like for push buttons and such.

What is the reflection map?

Reflection map is a new concept that allows the skinner to have a kind of watermark that does not belong to a particular window but adds a nice feeling that binds a number of windows together, creating a smooth desktop-wide feel. I’ve added to Mike‘s skin this reflection map (the preview shows it rescaled to 50% of its size).

the image is indeed all white and the gray areas are just translucent background that you can see through the image.

Now if you apply the image (remember to turn the translucent and transparent bits on) the sample reflection will look like this.

Now that feature is liable to make things paint slower. So use it with caution and use it only if you really have something that you can only express that way.

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)

This entry (Permalink) was posted on Monday, October 10th, 2005 at 3:40 am and is filed under Skinning, SkinStudio, WindowBlinds. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response , or trackback from your own site.