The site was set up mainly for accounting users with the progress of development and guide for usage of Skinstudio and IconDeveloper. Brought to you by Adam Najmanowicz - the lead developer of SkinStudio & IconDeveloper.
WindowBlinds 5 "PerPixel" new features explanatory series - part one.
Published on October 9, 2005 By Adam Najmanowicz In WindowBlinds Tutorials

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.


Comments
on Oct 09, 2005
Very good tutorial Adam
on Oct 10, 2005
Thanks for doing this so soon.
on Oct 10, 2005
A few questions:

Is there, or will there be support for per-pixel animated frames and animated buttons?

What is the difference between the per-pixel buttons and the normal window frame buttons?
Do you have to use the per-pixel buttons if you are making a per-pixel frame?

From what I understand, you can't add special buttons to per-pixel skins (i.e. roll up
button), and you cant position the buttons on any other border than the bottom one, and
there is no support for help button either. Will these features be added in the final
release version of windowblinds?

Do the transparent menus, taskbar, start menu still support animation?

Thanks for posting this article... it made a lot of things clearer
on Oct 10, 2005
Thanks for the help
on Oct 10, 2005
as a new skinner on the block i was not realy all that used to the "OLD" way and now with a new way i'm glad i had no habits to overcome! this has explained a lot and will be a point of reference for quite a while. this has aswered a few questions i was going to ask. i have the WB5 installed and runs fine. i probably wont update it till the final version is out so i have less to learn as i go.
on Oct 10, 2005
Wow... I didn't know about the reflection map. That is incredible. I forsee skinners using that feature for some great ideas! Thanks for the post, very entertaining and enlightening!
on Oct 10, 2005
Windowblinds 5 is looking really good and that reflection map feature looks really neat.
on Oct 10, 2005
You've got a natural gift at explanation. Concise, yet thorough and easy to follow. Thank you for taking the time to do this, and for sharing it
on Oct 14, 2005
Excellent article Adam, will help a lot of people.
on Oct 17, 2005
thanks for the Tutorial!!
i love stardock products!!
on Feb 05, 2007
How can I get semi-transparent dragging with a per-pixel skin? WindowFX disallows this...
on Apr 25, 2007
BTW, what is the name of this visualstyle, I really like it, can I download it form wincustomize.com?
on Apr 25, 2007
I meant the sample....
on Apr 25, 2007
Skin name: Aura by Mike Bryant
Included in windowblinds!