Winamp 2.X skinning tutorial
Chapter 2 - Winamp Skin Format, Graphics, Animation, Skinning Process
WinAmp Skin Format
What is a skin? It’s a set of images, text and cursor files, packed into a single zip archive, sometimes renamed into wsz (winamp skin zipped). Old versions of winamp needed these archives to be extracted manually, but now there’s no need to do this: winamp “understands” zip files. Images has all the needful graphics for the skin, cursors are the replacements of ordinary winamp cursors (hm, strange...) and in text files there’s some information about the skin and configuration data. If you want to find a detailed description of winamp skin format, take a look below or follow some links in the Useful Links paragraph.
WSZ Files
Most of modern winamp skins are distributed in WSZ format, which is simply a renamed ZIP file with a skin content. You could rename it back to zip and work with its files. (Note: advanced users could work directly with a wsz file, using any modern file manager, like FAR. The advantages of using ZIP compression in skin format are: ZIP format is widespread, and zip/unzip source codes are available to anyone, so there are lots of freeware programs which allow you to make zip compressed files. Besides, there are versions of ZIP archivers for any more-less popular platform and operating system: DOS, Windows, BeOS, Linux and so on. The only disadvantage is the small compression ratio in relation to modern archivers, like RAR, ACE, 7-ZIP, CAB and so on. In order to create/unpack ZIP files, you might need a compression utility (if you don’t have one), like freeware 7-ZIP.
It doesn’t really matter what kinds of files are included in the package besides your skin’s files, but try to remove all the useless ones, like thumbs.db (windows’ picture cache file) and all the temporary files, as they only enlarge the size of your skin. Hint: you could create a file association on wsz files with your decompression utility, so you could view these files’ content by just double-clicking on them. (But then you’ll have to install all the skins manually, by moving them into your winamp skins’ directory). Always use maximum zip compression in your skins: the smaller the file, the more people will download it.
Usually a skin’s size is about 50-200 KB. If it’s 300, it’s still okay, but if it’s over 500, try to do something with it! Some skinners include a fitting AVS preset or a wallpaper into the archive. There are no problems with an AVS preset - it’s very small - but I definitely wouldn’t recommend you to include a non-tiled truecolor wp!
If you want to use maximum compression and don’t wanna lose any quality at all, just try the following: clean up all your images, so no fields which are not displayed in your skin will be present in bitmap images. (This could be done automatically by a program called decreaser (www.1001winampskins.com)) This simple trick allows you to save up to 20-30% of the space. For example, after that kind of optimization most of the skins in my collection (more than 1200 files) are smaller than 300 Kb. But be careful, it could spoil your skins sometimes.
One thing to remember: your wsz file’s name is a name of your skin in the winamp skin browser (Als+S), so naming your work somewhat like 123_My_-=C00l-$kiN=-..wsz is useless - it’s almost impossible to remember this stuff (especially if no one tries to do this). Give your skins simple and easy to remember names. Not the worst idea is naming them like “yournick_skinname”, so all your skins will be browsed in series. A small hint: if a name of your skin begins from a bracket, tilde or any other non-alphabetical character, it comes before the rest in the list of skins.
Graphics
The graphics of almost any winamp skin is stored in the following BMP (windows bitmap format) files: avs.bmp, balance.bmp, eq_ex.bmp, eqmain.bmp, main.bmp, mb.bmp, monoster.bmp, numbers.bmp, playpaus.bmp, pledit.bmp, posbar.bmp, shufrep.bmp, text.bmp, titlebar.bmp, volume.bmp (character case doesn’t really matter). There could be fewer files, if a skinner was lazy enough to create some elements, like minibrowser or AVS, and in some cases - more, - when he wanted to include into the package a skinnable plugin’s element. For example, avs.bmp is only needful for those users who install winamp advanced visualization plugin, but as it usually comes with winamp, many skinners also skin this window. From the other side, mb.bmp, which is a winamp’s minibrowser skin is skinned not that often: just most don’t use winamp minibrowser. Some skinners may include skins for DFX plugin and so on, but they are only useful, if a user has that plugin installed and uses it frequently.
A few words about bitmap files. Note that it’s not required to save your files in true color (24 bit) format if you use a very limited number of colors: you could save your images in 256 colors as well without any visible loss of the quality. The advantage is that you will be able to reduce the size of your images and the final wsz file as well. But if you create a colorful skin, you might prefer not to lose any quality and save images in true color.
Animation
Creating animation is a very important part of skinning. Think several times before discarding the idea of doing it. Without animation a skin looks “dead” and good animation affects could “renew” almost any work. One example of a good skin which doesn’t have any animation is NeonG, which could look much better with one. Many buttons in winamp (like eq/pl in the main window, on/auto in equalizer and all the min/max/close) have three states: inactive, pressed and active (or “on”, “pressed” and “off”). Active and inactive states indicate the status of a button/element. For example, when the “eq” button is active, the equalizer is visible and when inactive, it isn’t. Pressed is an intermediate between these two states and its image is displayed when you click the button. Remember that there are often two pressed states when you click the active and the inactive button respectively, so these images could differ. Three images are quite enough to make an animated button (and we have a whole four!). For example, you could draw a small dark lamp for the inactive state, a bit lighter one for the pressed and the bright one for the active. These animations are only limited by your imaginations: knobs, switchers, lamps, wheels and so on...
There are also buttons/elements with only two states. They are the “preset” button of the equalizer, control buttons of the main window and all the buttons of playlist. You’re a bit more limited in creating animation for these buttons, but... there could be much things done with only two images. Just take a look at these works (or any others): Korea, Korea2, Alden2, Alden3.
The Skinning Process
So, what does a process of creating a skin look like? Often it looks somewhat like that:
- You get the idea of the future skin and imagine what it should look like in general.
- Draw a draft image of your skin on a sheet of paper or in your graphical editor.
- Create your skin’s extractable images: work in your graphical editor on the final look of your skin. Use templates to create background images. In the end you should have one (main window) or three images (main window, EQ, PL), which are ready for extraction. Remember to remove (hide) control elements, like sliders and so on from these images, they’re not needed, or better create two versions: one with and one without control elements respectively.
- Extract images from your templates using any button extractor.
- Work with every standalone image. If you have extracted two images: background and the one with control elements, use both of them as two layers, interacting in any blending mode (http://www.deviantart.com/deviation.php?id=330478) to draw these controls on a background with all the useful animations.
- Edit your TXT configuration files and create readme.
- Make cursors, if it’s needed.
- Test your skin in order to find mistakes, like displaced buttons/missing elements and so on (It’s a good idea to ask someone else to do this). Fix all the bugs.
- Compile your final work into a WSZ file.
- Submit it to any site, if you want others to see it.
No one forces you to do the same or follow the steps above exactly. You may wish to choose your own way.
And now we’ll try to tell you about all this stuff in more details.