Skin Making Hints, Tips and Tricks
Tag it:
Delicious
YahooMyWeb
Reddit
Digg
Stumble
Furl it!
Technorati
NewsVine
Spurl
BlinkList
Thursday, 10 May 2007
Yahoo! Messenger Skin Making Hints,Tips, Observations + Pitfalls

Introduction
download our WackyB Cloud9 Skin for Yahoo! MessengerMaking skins for Yahoo! Messenger can be fun but there are a lot of obstacles put in your way... along with some annoying bugs. The skins as we know them today were introduced with v6 which made it's debut back in May 2004, before then you could customise some parts of messenger with the then named 'Themes'. The skin system that we have today was never exploited by Yahoo to it's full potential and has been largely ignored in recent versions; Yahoo! released a handful of alternate skins to download, although this process was clunky at best requiring manual download and install of .Zip files (I can't imagine the plugin system operating in this way!). No documentation was released as to the technical specifications of the skin system or indication of what was possible and so was left for independent users to discover for themselves from the example skins provided.

There are a number of sites where you can now download alternate skins for Yahoo! Messenger (Including ours of course ;) Some of the skins are not worth the download time unless badly clashing colours and poorly finished graphics looking like the work of a primary school kid appeals to you ;) Having said that, there are a few exceptionally good skin makers out there producing high quality original designed skins, unfortunately the majority of them were made for v6 messenger are look incomplete with v8.1 and above; The official skins promoted by Yahoo! itself are in fact incompatible fully with version 8 (See Bee's article on Pink skin). All the skins on WackyB are fully compatible right up to v8.1 (the latest version at the time or writing this). Skin Maker produces almost unlimited number of skins in seconds that would normally have taken hours to make manually. I believe Yahoo!'s intention for it's skin system was similar to what looks like being included with the new messenger for Windows Vista, allowing custom skins for branding and advertising.

If you want to create your own skins the best starting point (and ending point in most cases) is WackyB Skin Maker Plus, You can create almost unlimited number of skins with colours and textures you choose (Wood/Grass/Water/etc); The skins created are compatible with the latest versions of messenger and backwards compatible to version 6. Grab it [here...]

Transparent backgrounds
One of the cool things about the new skin system introduced with v6 was the ability to create transparent backgrounds to the window borders. Yahoo! didn't exactly exploit this very much in it's own skins but there are many others that did. For the best example of this check out our own skins collection where we use this to great effect in our themed skins.

Take the 'border_top.bmp' graphic from the Indigo skin; As you can see it contains two images, one for the highlight or active state and the other for inactive state. The important part to notice here is the pink coloured areas, these are used in conjunction with the skins's XML file to determine which areas of the graphic are to be transparent.

The section in the XML file for the 'border_top.bmp' graphic is:

<imgfile src="border_top" width="249" height="33" left="109" right="70" transcolor="ff00ff">

You can see that the 'transcolor' is set to value FF00FF which is the HEX value for the colour pink. You can actually use any colour in your graphic as the transparent colour so long as the 'transcolor' value in your XML file match although traditionally this extreme pink value has been used. When Yahoo uses the graphic the transparent colour areas are replaced with the background image.

The following illustrates how this works for the tool bar graphic. The example background replaces the pink areas surrounding the toolbar icons.

What you end up with is the toolbar icons displayed correctly:

Using transparent backgrounds has advantages over colouring the background with every skin you make as you never have to update the file, your new skin colour will always show through.

BMP vs PNG
One alternate to using transparent colours that works for all graphics except the window borders is to save your images as '.png' files. These have the advantage of allowing semi-transparent areas where part of the background shows through the graphics. When working and saving '.png' graphics with transparent areas you will often see a checkered background to help you see which areas the background will show through.

 

Extreme borders (and their problems...)
Setting the border graphics height and widths to values outside the default can be used to create some cool and interesting skin effects. My first example of this shown below includes our WackyB logo floating above the main window title bar; The smaller tool bar window has floating bee's surrounding the top and left hand side of the window:

Taking a look at the top border graphic reveals how this was achieved:

The standard graphic file is more than doubled in height to accommodate the larger image.

Having this cool skin does unfortunately come with some limitations as were later discovered and discussed on our forum. The problem occurs when you use the menus in any messenger window; the top level menus work fine and as expected, this is not the case once you open a sub menu. The screen shot below illustrates the problem, the mouse pointer shown is over the 'Contact Search Bar' item yet the highlighted item is 'Yahoo! Voice Bar'. The menu items are offset by exactly the difference in the new window border height :( This makes it almost impossible to select the correct item with your mouse (You can still use the cursor and Enter keys to make your selection)

You can check this out for yourself by installing this skin [here...].

This is actually a problem with Yahoo! Messenger in how it retrieves the size and height of the window. It should be asking for the height of the internal window or calculate the border height rather than make assumptions. (I know this from experience with skinning my own applications!). So if you can live with this menu limitation you can create some cool & visually stunning skins... As I said in the introduction, it looks as if Yahoo! have abandoned the current skin system in it's current state so I don't expect to see an update to fix this issue.

 

Default graphics and un-skinable things
Not all the graphics are skinable, at least not obviously so. The main graphics which you can not modify are highlighted below:

This will have some limitations when you create your own skins and selecting colours with WackyB Skin Maker. One surprising issue that was introduced with v8.0 of messenger is that the radio buttons are no longer skinable and will remain the standard windows controls even if you customise them with the correct graphic. Skinned radio buttons do work correctly with previous versions.

To maintain backwards compatibility with previous versions of messenger there are some graphics that will display with the default if not included in the skin. You can replace these in you skin file (v8.0 and above compatible skins will replace these) but if omitted you will not end up with a blank hole. These default graphics are highlighted below:

The replacement graphic files are:

pab_abook_off.bmp
pab_abook_on.bmp
pab_add1.bmp
pab_mlist1_off.bmp
pab_mlist1_on.bmp
button_chevron_up.bmp
button_chevron_down.bmp
triangletray.bmp
voice_callbtn.bmp

See the Skin Reference Table for further details...

Orphan graphics
voice_dialpad_0.pngJust as there are some graphics in the skin folder from previous versions and no longer used, Some skins contain graphics which look like they were intended to be used but as far as we can tell never were!?
The best example of this is the 'voice_dialpad_0.png' series of files. They look similar to the dial pad buttons used with the old voice dialer of version 6 but the dialer disappeared and was replaced with Yahoo's own built-in voice service.


Technical bit...
Note: I've tried to word the following in a way that is understandable without a technical background but with enough pointers for those that wish to find out more detail to do so...

This is just a brief overview of how messenger implements it's skins. Based mostly on assumptions and educated guesses along with some facts thrown in here and there :).
The skins are actually a add-on module to Yahoo! messenger, When you select the 'Classic' skin I believe it effectively switches this skin module off and so falling back to the standard windows controls. The default location for the module responsible for the skinning is:

C:\Program Files\Yahoo!\Shared\YbSkin2.dll

"Yahoo! Skinning Object"

There are many ways to customise the way windows controls appear and are drawn, too many to go in to assumptions as to which method Yahoo! uses The transparent cut out effects possible with the windows borders can be achieved in two main ways; One is compatible with Windows 2000/XP and above only and uses the Layered Windows API. This method is actually superior in that it allows for semi-transparent areas also (When we talk about transparent areas in skins, we mean areas that the background windows are visible through and not the semi-transparent effects possible with other methods). The actual method used is more likely to be using windows region functions as this is backwards compatible with Windows 98 etc.. To quote from Microsoft's MSDN site:

"The window region determines the area within the window where the system permits drawing. The system does not display any portion of a window that lies outside of the window region"

This allows the Yahoo! skin module to create region data for the areas that it wants to be transparent and pass this information over to windows to do the hard work for it. The hard work for Yahoo is in creating this region data. We have seen from above that the skin module uses a transparent colour in the skin graphics to determine which areas (Pixel data) is to be transparent; This is fine when the objects are static as this only has to be worked out once. but for the window border graphics this would have to be calculated each time the user resizes the window (With actual window dragging enabled this redrawing can occur many times as the window is sized from one dimension to another). To speed this up the Yahoo skin module caches this information in the skin folder as files with the extension '.rgn'. There is a region file created for each border graphic that has a transparent area within it; E.g. for the top border in the 'Indigo' skin it will generate the file:

C:\Program Files\Yahoo!\Shared\Graphics\Indigo\border_top.rgn

This allows the Yahoo skin module to quickly create new region data as the window is resized without having to calculate from the transparent colour information. These cache files are only created once when the skin is first loaded so any changes made to the window border controls will result in incorrect transparent areas (usually show up as black) until you delete the associated '.rgn' region file and let Yahoo! create a new file.

 

MORE ARTICLES FROM THIS SERIES:
- Yahoo! Messenger Skins
- Installing Yahoo! Messenger Skins
- Making Yahoo! Messenger Skins
- Skin Making Hints, Tips and Tricks
- Skin Problems & Issues with Yahoo! Messenger <--Next
- Yahoo! Messenger Skin History
- Yahoo! Messenger Skin Reference Table
- Yahoo! Messenger v8 .xml file
- Yahoo! Messenger Pink .xml file
- Our Yahoo! Messenger Skins (Downloads)

Last Updated ( Tuesday, 29 May 2007 )