Just so you know... when you'll notice a Father Christmas sitting on a chair in the local mall, it might have never crossed your mind that is't a hard and dangerous job of many people that leads to these short moments of joy and happiness that you and your children experience.

Fortunately the Woodpecker Film has taken the risk and the courage to document the process for you. But beware! Precautions must be taken...

If you're not interested in the techincal details but rather just want the working program, You can just get it HERE

A friend of mine has recently asked if it's possible to write a console .net application to make a thumbnail of a website. The task is pretty trivial with Windows forms actually. But him being the Linux guy and all... I decided to pick up the challenge :)

An interesting use case. In winForms all you really need to do is drop a WebBrowser on your form and once it's loaded the page call:

webBrowser.DrawToBitmap(bitmap, bitmapRect);

When it gets tricky is when you want to do it in a console application is a way that can take a shot of multitude of websites provided in a batch file. There is a dirty way of instantiating a whole form, making it show (or not), doing the work and  then exiting the Winforms app. Which might probably be enough for a quick solution, but I wanted to publish this piece of code, so I would actually NOT take a pride in something like that.

How is it done the proper way then?

So we instantiate the web control (I've written a separate class to do the dirty work for me called WebPageBitmap..

public WebPageBitmap(string url, int width, int height, bool scrollBarsEnabled)
{
    this.url = url;
    this.width = width;
    this.height = height;
    webBrowser = new WebBrowser();
    webBrowser.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(documentCompletedEventHandler);
    webBrowser.Size = new Size(width, height);
    webBrowser.ScrollBarsEnabled = scrollBarsEnabled;
}

Easy so far and pretty similar to what the regular app would do anyway. The documentCompletedEventHandler is a delegate to tell that the has loaded (I initially wanted to use that for drawing the bitmap but deferred that to the point where the bitmap is actually fetched after I added the resizing part). Now comes the interesting case.

Since the call is asynchronous a simple webBrowser.Navigate(url); won't cut it. Since we are in a single thread and the browser does not create a separate thread for that. Which makes sense by the old windows rule: Only th thread that creates a control, accesses the control. We need to somehow allow the control to take the flow of the thread and do its work. Navigate only tells it that it should perform the action and immediately exits. The developer's responsibility then is to know when the control is ready for consumption. Which is the case when the webBrowser.ReadyState progresses to (or returns to) the state of  WebBrowserReadyState.Complete. To pass the flow to the app controls you need to perform Application.DoEvents();. which was a bit of a wild guess when I used it. Surprise, surprise, it works just like it did in other Windows frameworks I used before.

public void Fetch()
{
    webBrowser.Navigate(url);
        while (webBrowser.ReadyState != WebBrowserReadyState.Complete)
        {
            Application.DoEvents();
        }
}

The effect is a tiny and neat (I hope) app that pulls a web page from the net and makes a screenshot off of it (with possible rescaling):

You can get the source here.

Also there is a compiled... binary... ready to use... compiled with love... for your downloading pleasure... HERE

If you're not interested in the techincal details but rather just want the working program, You can just get it HERE

A friend of mine has recently asked if it's possible to write a console .net application to make a thumbnail of a website. The task is pretty trivial with Windows forms actually. But him being the Linux guy and all... I decided to pick up the challenge :)

An interesting use case. In winForms all you really need to do is drop a WebBrowser on your form and once it's loaded the page call:

webBrowser.DrawToBitmap(bitmap, bitmapRect);

When it gets tricky is when you want to do it in a console application is a way that can take a shot of multitude of websites provided in a batch file. There is a dirty way of instantiating a whole form, making it show (or not), doing the work and  then exiting the Winforms app. Which might probably be enough for a quick solution, but I wanted to publish this piece of code, so I would actually NOT take a pride in something like that.

How is it done the proper way then?

So we instantiate the web control (I've written a separate class to do the dirty work for me called WebPageBitmap..

public WebPageBitmap(string url, int width, int height, bool scrollBarsEnabled)
{
    this.url = url;
    this.width = width;
    this.height = height;
    webBrowser = new WebBrowser();
    webBrowser.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(documentCompletedEventHandler);
    webBrowser.Size = new Size(width, height);
    webBrowser.ScrollBarsEnabled = scrollBarsEnabled;
}

Easy so far and pretty similar to what the regular app would do anyway. The documentCompletedEventHandler is a delegate to tell that the has loaded (I initially wanted to use that for drawing the bitmap but deferred that to the point where the bitmap is actually fetched after I added the resizing part). Now comes the interesting case.

Since the call is asynchronous a simple webBrowser.Navigate(url); won't cut it. Since we are in a single thread and the browser does not create a separate thread for that. Which makes sense by the old windows rule: Only th thread that creates a control, accesses the control. We need to somehow allow the control to take the flow of the thread and do its work. Navigate only tells it that it should perform the action and immediately exits. The developer's responsibility then is to know when the control is ready for consumption. Which is the case when the webBrowser.ReadyState progresses to (or returns to) the state of  WebBrowserReadyState.Complete. To pass the flow to the app controls you need to perform Application.DoEvents();. which was a bit of a wild guess when I used it. Surprise, surprise, it works just like it did in other Windows frameworks I used before.

public void Fetch()
{
    webBrowser.Navigate(url);
        while (webBrowser.ReadyState != WebBrowserReadyState.Complete)
        {
            Application.DoEvents();
        }
}

The effect is a tiny and neat (I hope) app that pulls a web page from the net and makes a screenshot off of it (with possible rescaling):

You can get the source here.

Also there is a compiled... binary... ready to use... compiled with love... for your downloading pleasure... HERE

If you're not interested in the techincal details but rather just want the working program, You can just get it HERE

A friend of mine has recently asked if it's possible to write a console .net application to make a thumbnail of a website. The task is pretty trivial with Windows forms actually. But him being the Linux guy and all... I decided to pick up the challenge :)

An interesting use case. In winForms all you really need to do is drop a WebBrowser on your form and once it's loaded the page call:

webBrowser.DrawToBitmap(bitmap, bitmapRect);

When it gets tricky is when you want to do it in a console application is a way that can take a shot of multitude of websites provided in a batch file. There is a dirty way of instantiating a whole form, making it show (or not), doing the work and  then exiting the Winforms app. Which might probably be enough for a quick solution, but I wanted to publish this piece of code, so I would actually NOT take a pride in something like that.

How is it done the proper way then?

So we instantiate the web control (I've written a separate class to do the dirty work for me called WebPageBitmap..

public WebPageBitmap(string url, int width, int height, bool scrollBarsEnabled)
{
    this.url = url;
    this.width = width;
    this.height = height;
    webBrowser = new WebBrowser();
    webBrowser.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(documentCompletedEventHandler);
    webBrowser.Size = new Size(width, height);
    webBrowser.ScrollBarsEnabled = scrollBarsEnabled;
}

Easy so far and pretty similar to what the regular app would do anyway. The documentCompletedEventHandler is a delegate to tell that the has loaded (I initially wanted to use that for drawing the bitmap but deferred that to the point where the bitmap is actually fetched after I added the resizing part). Now comes the interesting case.

Since the call is asynchronous a simple webBrowser.Navigate(url); won't cut it. Since we are in a single thread and the browser does not create a separate thread for that. Which makes sense by the old windows rule: Only th thread that creates a control, accesses the control. We need to somehow allow the control to take the flow of the thread and do its work. Navigate only tells it that it should perform the action and immediately exits. The developer's responsibility then is to know when the control is ready for consumption. Which is the case when the webBrowser.ReadyState progresses to (or returns to) the state of  WebBrowserReadyState.Complete. To pass the flow to the app controls you need to perform Application.DoEvents();. which was a bit of a wild guess when I used it. Surprise, surprise, it works just like it did in other Windows frameworks I used before.

public void Fetch()
{
    webBrowser.Navigate(url);
        while (webBrowser.ReadyState != WebBrowserReadyState.Complete)
        {
            Application.DoEvents();
        }
}

The effect is a tiny and neat (I hope) app that pulls a web page from the net and makes a screenshot off of it (with possible rescaling):

You can get the source here.

Also there is a compiled... binary... ready to use... compiled with love... for your downloading pleasure... HERE

If Stardock gave WindowBlinds version names like Microsoft did with XP and its successor, WindowBlinds 5 would probably be called "WindowBlinds Translucent" or "WindowBlinds See-Through" or... oh no... it can't be... or can it (?) "WindowBlinds Vista"!

In the first part I've explained the most noticeable changes you will see in a new WindowBlinds 5 skin but to be honest it went all crazy about translucent parts. We've got used to the translucent start panel since 4.6 which I've described how to create in this article. But in WindowBlinds 5 you can make the whole taskbar translucent as well as the drop down menus, and the "Please Wait" dialog!

Here comes my skin!

Like it or not first impressions are important. For a skin, the first impression often determine whether the user will try it long enough to appreciate the qualities or reach for that "Delete This Skin" button right away. Right now you've really got the tools to make your skin transition smoothly onto the user's system or make a big splash!

WB5 adds a new section that you can find in SkinStudio under "XP Shell"->"Please Wait Dialog". The section is so straightforward there's really not much to say about it. I just wanted to make sure you're aware of its existence ands importance. The image now separated from the shutdown image and is no longer limited to the system dialog size. It blends nicely into the desktop and you gain the control over the text font and color! Think of it like of a movie trailer. It's very important that it expresses the spirit of the skin and makes an excellent impression.

... with a cool taskbar...

The taskbar is probably more omnipresent on your user's desktops than other controls you may consider crucial to your skin. It gives you a vast area to paint upon and allows for a quite a bit control over it. Now you can use that space in an even better way and you can finally make it blend nicely with the desktop wallpaper.

The effect is pretty simple to achieve. If you have read my other (previously linked) articles then you have a good idea about how translucency works. The simple Per-pixel effect has never worked on the taskbar before. WindowBlinds is always trying to be as backward-compatible as possible so not to break skins for which it might have been accidentally (or for research purposes) enabled, another switch has been enabled in section: "Taskbar"->"Taskbar Background"->"Horizontal". The "Background Effect" attribute.  That failsafe need to be enabled on top of what you would regularly do to enable translucency. To summarize - to make the sample horizontal taskbar translucent enter the section: "Taskbar"->"Taskbar Background"->"Horizontal" and set the following attributes to their respective values:

• "Painting options"->"Transparency and translucency - Switch" as "Transparent",
• "Painting options"->"Translucency - Switch" to "Translucency IS being used" and
• "Background Effect" to "Translucent Taskbar effect"

Needless to say the taskbar must actually be a translucent image for the effect to work :)

The first two switches are enabled for each section respectively (vertical/horizontal taskbar/gripper) but the last one (the "Background effect") is shared among all of them and toggling it in any of the taskbar sections will toggle it for the whole taskbar.

... and a sparkling menu.

Similarly the drop down menus are now skinned in a per-pixel manner...

It's as simple making your "Controls"->"Menus"->"Pull Down Background"-> "Pull Down Background Image" translucent and enabling the usual:

• "Painting options"->"Transparency and translucency - Switch" as "Transparent",
• "Painting options"->"Translucency - Switch" to "Translucency IS being used" and

attributes in the "Controls"->"Menus"->"Pull Down Background" section. Such menus will automatically become translucent in the new WindowBlinds version.

Similarly to what has been described in this article the new menus may have the shape that does not look good with the regular menus shadow that is simply square. So if your menu is of some irregular shape or simply do the shadow blending itself you can disable the system shadows with the "Hide Shadows" attribute in the same section. Also for the feature to work you should check to make sure that the "Flat menus - disables skinning" attribute is disabled. This will especially be the case with MSStyles converted to WindowBlinds skins.

One of the features that generated a lot of excitement in the comments of the first part of the series was the ability to define a reflection map for the window frames. The cool news is that the drop down menus will allow for the same features to work on them. One can only imagine what cool effects the skinners could make with it. Suffice to say the menu can look different depending on which part of the screen it's open on.

The drop down menu section for the feature is located in "Controls"->"Menus"->"Pull Down Background"->"Pull Down Back - Reflection" in SkinStudio.

WindowBlinds 5 is one of the most exciting releases so far. The numerous translucency additions allow skinners to create smoother, more visually appealing skins. New features like the "progress flash" and the default button fading make them more dynamic and interactive.

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.

If you use the classic widget fonts referenced from section "Miscellaneous"->"Fonts for classic widgets" and defined as subsections to the section, make sure you specify the font sizes in negative values. Should you fail to do this, all kind of bad things may happen. Firefox will look bad. Outlook 2003 will most probably have problems and applications are liable to have some of their fonts blown out of the proportion.

It all started with another brain-freeze today. I just couldn't find a section that contained the File Dialog places bar images. You know the bar on the left on the File->Save and File->Open dialogs? I bet you've been cursing more than once searching for a section like that. SkinStudio will help you with searching for a section if you know it's UIS name or its part AND if such section actually exist. But in my case it didn't.

Wouldn't it be great if I could just lookup the section by it's name or a part of it?

So I've added a tool button like you can see on the image below.

Press this button (or press Ctrl+F while the tree view is focused) and you're getting the familiar "Find" dialog.

Enter the section name or a part of it and press the "Fine Next" button.

There you are... Where have you been? I've been so worried!

It will also work if there is more than one section matching, in which case SkinStudio will iterate through the sections when you press the "Find Next" button consecutively.

The feature will be introduced in SkinStudio 5 Beta, soon to be made available on Object Desktop.

Little I knew that I will be involved in it, when I was posting a while ago on Neowin and WinMatrix about the cool Warcraft skins available on Wincustomize. Blizzard is offering a World of Warcraft suite now for download on their  US and European pages pages and upon their request we needed to swiftly modify the Apocalypse's great World_of_Warcraft skin to meet Blizzard's request to match the game GUI more closely. I was assigned to the task so I went swiftly to the local store with the perfect excuse to get myself a new toy!

- Honey, but I need it for work...
- Sure you do!
- but really, darling... look...

... so I started hacking the game files to get some artwork out of it. As it appears there's a lot of people looting the game resources than one could expect... a bi-product of it you can find in my previous article here.

But to the point....

Out of the game files I got some cool graphics, now I'm not really good with with design but equipped with some original artwork I can be pretty dangerous. So I got some artwork out of the game and started cutting and pasting this auction window:

as you can notice the frame drops a nice shadow and I wanted to reflect that in the skin. To make the long story short I ended up with  this design:

you may have noticed that I have made the right panel translucent as well, hey! if WindowBlinds can do it, why not?

Now it came the time to cut the images into their respective sections. After the process common to all XP enabled styles, the only difference so far is that I used TGAs (PNGs actually and then SkinStudio did the conversion to TGA for me automatically) in the images instead of the usual bitmaps. Let's try it now...

OK, not quite what we hoped for, right? This is because WindowBlinds didn't realize we have used translucent images and simply painted them as if they were binary transparent. so now for every element of the panel we need to enable translucency. This is done by clicking on each of the elements in the preview and selecting the "Translucency" check box in the lower right corner of the SkinStudio area like this:

OK so it's still not completely right. This is still the transparency we could have get from the beginning since WindowBlinds started supporting Windows XP. If you check the following screen-shot you will notice that the shadow in the bottom and left of the panel is solid gray instead of the nice shadow in my Photoshop screen-shot.

There is a nice shadow on the right, but it's the regular Windows shadow. In World of Warcraft the light is dropped from the top/right corner co the shadow drops to the bottom.left and that's the effect we're trying to have. Also the right panel is not translucent, so that's unacceptable. And Actually this is the point when WindowBlinds magic really begins. Let's tell WindowBlinds that we REALLY, REALLY want the start panel to be translucent. You can do this by setting the "Start Panel Effects" Attribute to "normal per pixel alpha" for every element of the start panel:

• Section: "Start Panel"->"User Pane"->   Attribute: "Start panel effects"
• Section: "Start Panel"->"Programs List"->   Attribute: "Start panel effects"
• Section: "Start Panel"->"More Programs Panel"->"Background"->   Attribute: "Start panel effects"
• Section: "Start Panel"->"Places List"->   Attribute: "Start panel effects"
• Section: "Start Panel"->"Bottom Bar"->   Attribute: "Start panel effects"

So we're set now right?

WRONG! Due to how WindowBlinds actually processes the Start Panel translucency windows added a shadow on the right of the panel, check out the image once again, there is a shadow on the right of the start panel, some 10 pixels right of it. Once you'll notice it's it's quite annoying! Let's get rid of it...that's a pretty simple task. All you need to do is set the following attribute to "Enabled":

• Section: "Start Panel"->"Bottom Bar"->   Attribute: "Start panel effects"

And here's the new Start Panel in it's full glory:

http://www.skinstudio.net/blog_bin/startpanel_trans/blog_startpanel_trans_6.jpg

Now, could you make some more, please? ;)

[Updated 11 May 2005] Read at the end of the article.

I've been on a quest to improve a skin today and to do so I needed to extract a big archive in a proprietary and not widely supported format and get the images out of it and into the skin. Turned out the first part was not as bad as I expected as I've found some tools on the net to do this and Kris helped with the tool to convert the images in the proprietary format into TGA's. Now here's where the pain begun.

I needed to have my alpha channel kept in the files but I also wanted to process the files before making them into the skin.

Turns out Adobe still haven't got their TGA support fixed (which was why I added the quasi-PNG-support to SkinStudio in the first place). If you're not familiar with the problem, Ive wrote an article about it  before and it's available here. As you can read here Adobe actually considers the current one a proper behaviour and the one that we enjoyed in Photoshop 7.0 is considered an "incompatibility with some existing workflows". I've tried a number of other apps including IrfanView, xnView and SageThumbs but they just couldn't chew it. So before I've lost what was left of my nails, I've decided to write a little Applet that turns 32-bit images (be those TGA-s or BMP-s) to PNG-s so that I can actually do something with them before making them into a skin.

the applet is available here

But because a lot of skinners have troubles going the other way, and it was only like a few lines of code, I've also made one for the other format. This one takes any 32-bit BMP or PNG and turns it into a TGA.

and you can get it here.

[Updated 11 May 2005] It could get confusing for others just like it got for me, so I've integrated the 2 apps and added saving to 32-bit bitmaps. I have also added the option to include or ignore images that are not 32-bit.

Now this updated applet is available here.

Have fun, and make the cool skin coming!