Tag it:
| Skin Making Hints, Tips and Tricks |
| Thursday, 10 May 2007 | |
Yahoo! Messenger Skin Making Hints,Tips, Observations + PitfallsIntroduction 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...] 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. 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:
See the Skin Reference Table for further details...  Just 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: |
|
| Last Updated ( Tuesday, 29 May 2007 ) |
There are a number of sites where you can now download alternate skins for Yahoo! Messenger (
