SKS Porting Smackdown - Round 1 WindowBorders

The Ins and Outs of SkinStudio 4.5

from WinCustomize Forums
Welcome to Round 1 of the SKS Porting Smackdown. A test of man vs. machine in the arena of WindowBlinds porting. The man, the legendary porter extrodinaire, Snidely Whiplash against the mega-manical ultra porting machine coded by Adam Najmanowicz, SkinStudio. The skin, Beige Azule by the extreme msstyles skinner, KoL. Snidely's version of this skin Link was created a year ago, was a featured skin at WinCustomize, has over 5300 downloads and has an overall rating of 8. The SkinStudio port was created by me yesterday using the latest released version.

This article and subsquent articles will also look at the many features available to a skinner using SkinStudio to create visual styles. Through out the detailed breakdown will be Beginner's Tips and comments on the different attributes. I will also highlight attributes that I think are for the Advanced Skinner. Attributes that challenge a skinner to go beyond just ordinary to creating the extreme. Who shall reign supreme? Read on to find out...

So how did I do it? How did I create the version of Beige Azul I'm putting up against Snidely's? Very few steps involved. First I clicked on the msstyles file for Beige Azul. Immediately SkinStudio came into action with this dialog.


Since I wanted this to be the most accurate port I could possible get out of SkinStudio, I choose the options button to bring me to this dialog. Here I selected optimized for maximum quality and checked both boxes under Image Corrections. I clicked OK and SkinStudio worked it's magic.


KoL's Beige Azul skin comes with a sub-style for a compact startmenu. So to work with just the standard menus, I opened up each version of this skin in SkinStudio and saved the standard startmenu version separately. Here they are in the WindowBlinds Configuration Menu.

Snidely's Version of Beige Azul (SBA)

SkinStudio's Version of Beige Azul (KBA)

Round 1: WindowBorders
     Top Image
KBA: Frame Image - Top: 192x27-pixel. (SKS adds a 192x2-pixel magic pink area to the top of this image which isn't needed. Otherwise this identical to Snidely's port.)
SBA: Frame Image - Top: 192x25-pixel.

KBA: Top Frame Edge Margins: 63, 29, ,
SBA: Top Frame Edge Margins: 63, 29, , (Beginner's Tip: Every pixel outside the margins will be drawn as the original image. Every pixel within the margins will be drawn as defined by the draw method.)

KBA: Draw Method - Top Frame: Stretch the image
SBA: Draw Method - Top Frame: Stretch the image (Beginner's Tip: Where ever possible an image should be tiled because it is rendered faster on the screen. This image needs to be stretched. Otherwise the gradient within the margins set would repeat themselves and look quite bad actually.)

KBA: Image States - Top Frame: 2 (SKS Default)
SBA: Image States - Top Frame: 2 (General Note: Though I have not seen any skins that do this, if the active and inactive frames are going to be using the same image you can set this attribute to 1 and only make a single frame in your image, cutting your file size down. Likewise, you need also increase the number of Image States if you are using Random Frames)

KBA: Caption Height: 27
SBA: Caption Height: 27 (This is considered a critical error in SKS and should be 25 based on the height of the Titlebar. This error is debatable, if you check some of the skins created by other master skinners, you will get the same error. Also at the time that this skin was made, SKS didn't flag this as a critical error.)

KBA: Screen Edge Clip - Top: 1 (SKS Default)
SBA: Screen Edge Clip - Top: 1 (Beginner's Tip: this value determines how many pixels go off the screen when a window is maximized. Many skinners leave this at the SKS default unless they are using an elaborate frame.)

     Bottom Image
KBA: Frame Image - Bottom: 192x4-pixel.
SBA: Frame Image - Bottom: 41x4-pixel. (First impression, based on size of image alone, you would expect that Snidely's image would yield a choppier gradient when the window frame is stretched. It doesn't, because if you resize the SKS generated image in a graphics program, the SKS image's gradient is almost identical to Snidely's, but leaning slightly more towards the blue than the tan.)

KBA: Bottom Frame Edge Margins: 1, 1, ,
SBA: Bottom Frame Edge Margins: 1, 1, ,

KBA: Draw Method - Bottom Frame: Stretch the image
SBA: Draw Method - Bottom Frame: Stretch the image

KBA: Image States - Bottom Frame: 2 (SKS Default)
SBA: Image States - Bottom Frame: 2

KBA: Screen Edge Clip - Bottom: 2 (SKS Default)
SBA: Screen Edge Clip - Bottom: 2

     Left Image
KBA: Frame Image - Left: 4x231-pixel. (SKS adds a 4x2-pixel magic pink area to the top of this image which isn't needed.)
SBA: Frame Image - Left: 4x60-pixel. (The reason that Snidely's image is so much smaller is because there is very little gradient in this image so there is no need for such a large image to accomplish the same appearance when used. The 169x2-pixel reduction will never be noticed other than a savings in image size.)

KBA: Left Frame Edge Margins: 27, 4, ,
SBA: Left Frame Edge Margins: 27, 4, , (Beginner's Tip: It is important to make these margins as small as possible without affecting the appearance of the rendered image, because it will make for a smaller and cleaner rolled up frame without having to resort to using a Do Nothing button to hide the missing chunk that will appear in the lower left corner of the rolled up frame.)

KBA: Draw Method - Left Frame: Stretch the image (There is no need for this image to be stretched since the part of the image between the margins is identical and would look no different if it was tiled.)
SBA: Draw Method - Left Frame: Tile the image (SKS Default.)

KBA: Image States - Left Frame: 2 (SKS Default)
SBA: Image States - Left Frame: 2

KBA: Screen Edge Clip - Left: 2 (SKS Default)
SBA: Screen Edge Clip - Left: 2

     Right Image
KBA: Frame Image - Right: 4x231-pixel. (SKS adds a 4x2-pixel magic pink area to the top of this image which isn't needed.)
SBA: Frame Image - Right: 4x60-pixel. (The reason that Snidely's image is so much smaller is because there is very little gradient in this image so there is no need for such a large image to accomplish the same appearance when used. The 169x2-pixel reduction will never be noticed other than a savings in image size.)

KBA: Right Frame Edge Margins: 27, 4, ,
SBA: Right Frame Edge Margins: 27, 4, ,

KBA: Draw Method - Right Frame: Stretch the image (There is no need for this image to be stretched since the part of the image between the margins is identical and would look no different if it was tiled.)
SBA: Draw Method - Right Frame: Tile the image (SKS Default.)

KBA: Image States - Right Frame: 2 (SKS Default)
SBA: Image States - Right Frame: 2

KBA: Screen Edge Clip - Right: 2 (SKS Default)
SBA: Screen Edge Clip - Right: 2

     Miscellaneous options
KBA: Frame Image - Disable Transparency: Disabled (SKS Default.)
SBA: Frame Image - Disable Transparency: Disabled (Beginner's Tip: If the images you are using for the frames have no magic pink area then this option should be enabled.)

KBA: Random frame selection: Disable random borders (SKS Default. Advanced Skinner Option.)
SBA: Random frame selection: Disable random borders (Note: This option does just what it says, it allows random borders to be rendered on the screen for you window frames. See the help box in SKS for more details.)

KBA: Roll Up Window Height: 30 (Beginner's Tip: Even though SKS set a height here, the frame will not roll up by default. The roll up function has to be manually set to work.)
SBA: Roll Up Window Height: 26 (The roll up height that was selected by Snidely causes the dreaded missing chunk in the lower left-hand corner of the rolled up frame. There are two options to fix this. The easiest is to set this number no smaller than the total of the Right Frame margins. In this case that would be 27+4=31. The other options is to create a Do Nothing button that hides the missing chunk when the frame is rolled up. Depending on the frame style this may be the better option.)

The first rolled up Titlebar is the one by Snidely. Notice the missing chunk. The second on is my attempt to fix it by setting the Roll Up Window Height at 31. Not as sleek looking. This frame is definitely a candidate for a Do Nothing button to hide the missing chunk.

KBA: Mouse Action - Right click: Rollup/Unroll window (SKS Default)
SBA: Mouse Action - Right click: Rollup/Unroll window (Beginner's Tip: if the attribute icon is bold, then the default attribute is enabled.)

First image the attribute is not enabled. Second image the attribute is enabled.

KBA: Mouse Action - Double click: Maximize/Restore windows (SKS Default)
SBA: Mouse Action - Double click: Maximize/Restore windows (Beginner's Tip: if this attribute isn't set to the default attribute, it does not matter since this is the default action for a window anyway.)

KBA: Dynamic Frame Image Shape: Enabled (General Note: this attribute does not need to be set unless you are using a different shape for each frame within the frame edge images. Using the options I selected when I ported this skin caused this to be enabled.)
SBA: Dynamic Frame Image Shape: Disabled (SKS Default. Advanced Skinner Option.)

KBA: Frame Animation Rate: 0 (SKS Default. Advanced Skinner Option.)
SBA: Frame Animation Rate: 0 (General Note: This attribute represents the time in milliseconds between animation frames with 0=no animation.)

KBA: Image State - Disabled Frame: Disabled (SKS Default. Advanced Skinner Option.)
SBA: Image State - Disabled Frame: Disabled (General Note: Normally there are only two frame states, active and inactive. This attribute allows you to add a third state for disabled frames.)

End Notes: Snidely's version of the window frames uses smaller images and tiling where possible. His caption height error can be a topic of discussion, but does not work against his version IMHO. His only error is his rolled up frame action with the missing chunk. While it would be much more work to use a Do Nothing button to fix this, he should have at least set the height large enough to avoid the missing chunk. This error would be apparent to anyone using this windowblind skin. The SkinStudio version does not consider things as image size and stretched every image here, when it was not necessary. The enabled dynamic frames option was not SkinStudio's fault, but mine, but then again if you read the Image Correction options it says to check this if any magic pink is showing and based on the style of frame and my familiarity with SkinStudio I expected there would be. While these issues will not be readily apparent to anyone using this version of Beige Azul, the missing rolled up frame action will be missed and since SkinStudio puts in the height for the rolled up titlebar, it should IMHO turn on this action by default as well. I highly recommend you do so in any skin you port yourself.

Conclusion: For the average WindowBlinds user, this round is a tie. One skin has the rolled up action with a graphical error. One skin doesn't have the rolled up action at all. For quality of porting, this round is also a tie. The missing chunk kept this round from going into Snidely's favor.
windowblinds
16,916 views 12 replies
Reply #1 from WinCustomize Forums Top
Great article Essencay, please keep em coming, I'm new to much of this and it's great not to just port an MSStyle, but to start learning the ins and outs of SKS and skinning in general...Thanx much, very informative
Reply #2 from WinCustomize Forums Top
Wow. Great insight into the process. Thanx for taking the time for this article. This and future rounds should be mandatory reading for anyone who ports and posts a VS.
Galactic Civilizations IV
Reply #3 from WinCustomize Forums Top
Great article. ........... waiting for next round
Reply #4 from WinCustomize Forums Top
Essencay Great article as Boss019 said please keep em coming
Reply #5 from WinCustomize Forums Top
Very good and detailed article. I really like it. However... in your next series parts you might take some things into consideration:

Snidely's ports are for the most part SkinStudio's ports with his fixes and missing WindowBlinds bits. Snidely does not convert all parts of his skins by hand. And the differences in the frames images (except for the pink which he removed) are simply a cause of his using and older version of Skinstudio. I have enlarged the images in a later because a lot of styles overlapped their margins which WB does not tolerate.

Now when you take tiling/stretching - you cannot really comparte a human against the machine here - human will always be better because he has the "benefit of having the same perception as an average human". SkinStudio does not stretch, it's the original author that does. What you're comparing here is a not optimized MSStyle (or a bug of the original author) and the correction Snidely did and I that's why i value him so highly - for his attention to details! Should the image be tiled by original author it would actually make the "later Skinstudio filter" (which you used) more efficient than the "earlier Skinstudio filter" which Snidely used because painting a bigger (reasonably sized) bitmap is more efficient than tiling a tiny bitmap many, manu times.

But before someone have any second thought - you need to take into consideration that Snidely ports used a very early and imperfect versions of the filter and WindowBlinds had a lot of limitations back then - resulting in a lot of work for him to make it look as good as the current seamless SkinStudio port. WindowBlinds 4.4 and 4.5 added A LOT of bits making porting more accurate. So some thiongs that were not even possible to do fot Snidely can now be made automatically.

Also there is an obvious problem with the automatic ports which will not be solved and where Snidely really excells - MSStyles do not support some of the bits WindowBlinds does - SkinStudio can do nothing about it as it takes human to fill those gaps with comething that will look decently. A lot of msstyles have even some other missing parts liek vertical taskbar or missing shellstyles - I am yet to see a Snidely's port without those gaps filled.

SkinStudio port has one and only one priority - create as accurate msstyles representation in a WindowBlinds skin as possible. Anything that goes beyond that (like the menu bar or items) is an added value that simply popped up in the process of achieving the primary goal.



So when it comes to ports Snidely is my hero, but you will sure have a tough time differentiating his fixes/additions and from a filter/WindowBlinds updates done later by us.
Reply #6 from WinCustomize Forums Top
One more thing, the differences in the preview in the WB config dialog are not a problem with the skin but rather WindowBlinds bugs. As you can clearly see, neither of them is proper.

[edited]

Where I think this article is of immense value is how it talks about details. I;ve seen a quite a bit of poor, poor porting going on in here. Click, slap a first big image you find in a folder as a logoff dialog and send away! That is not how I would like it to be used. Snidely is the perfect example how a porter should work.

One skin on the entrance should result in one skin on the outside (no matter how many substyles it has. Fix all the imperfections add the new WB bits carefully and with heart just like you would like it to look if you were to use it for the next year.

That's the quality I've always seen from him and that is the path I would love other to follow.
Reply #7 from WinCustomize Forums Top
Thanks for the insight Adam and the reply...I was hoping you'd pop in. I have never worked directly with msstyles, so I didn't know about the items you mentioned. Does this hold true for fonts and colors as well? Or is there just no way to set all those settings when working with msstyles?

A couple of the things that I hope to try to show is that SkinStudio is great at porting msstyles and the end result on the screen is very comparable to the original msstyle. Also I hope to be able to show that you can't just one-click and end up with a port you should be uploading anywhere, without spending the time with the details as Snidely does. I finally wanted to show how well a port done a while ago by, IMHO, the best msstyle porter holds up against the latest version of SkinStudio.

The WBConfig Preview....you're right, many skins don't look right in it.

I know the "Smackdown" thing is kinda hokey, but that's just me
Reply #8 from WinCustomize Forums Top
Fonts shadows and colors are ported over, or at least they should be. I would suggest that you indeed try to compare the msstyles to the WindowBlinds rather than (or despite of comparing them to) Snidely's port, since they are essentially SkinStudio ports on steroids (top class steroids though). A lot of good can come from a detailed evaluation of those elements. I tried to transform all of them perfectly, but I'm sure there still are glitches here and there, so if there are any problems I would be more than glad to fix them if possible.
Reply #9 from WinCustomize Forums Top
Adam, I hope you continue to watch this and comment as at it unfolds, so that there is clarification for folks on why something is a such because of the original msstyle and not SkinStudio. Especially so if I attribute a bug to the wrong thing. Perfect example being that the shutdown/logoff dialogs are not skinned with msstyles and need to be created from pieces of the original images or from scratch.

SkinStudio truly is an outstanding tool (complex and a bit overwhelming for a beginner) for both creating original skins and for porting. The end results though, are only as good as the effort put forth by the person using it.
Reply #10 from WinCustomize Forums Top
I sure will be watching the series carefully. I've spent some of the last 3 years perfecting the porting tool - I'm trully interested in the outcome.
Reply #11 from WinCustomize Forums Top
Should the image be tiled by original author it would actually make the "later Skinstudio filter" (which you used) more efficient than the "earlier Skinstudio filter" which Snidely used because painting a bigger (reasonably sized) bitmap is more efficient than tiling a tiny bitmap many, manu times.


Adam....tiling vs. stretching frames. What would you consider the optimum/best sizes for windowborder images to be to gain an advantage tiling them?
Reply #12 from WinCustomize Forums Top
That would have to be confirmed by some tests and I think GreenReaper would be best qualified to talk about it. I would noy like to guess here. it's not very effitient to tile a 1 pixel wide bitmap, but at one point you may start to move around too big memory chunks at once.