Creating Winamp Skins

So, Winamp skins, you say? Why, yes, I actually do. It's not all that hard to create your own skins, although there are a few things which can go wrong in pretty annoying ways too. The Winamp homesite doesn't say too much about the process of creating skins, so I'll try and say a bit more on this page. Comments, critisism and stuff like that are always welcome of course. This guide is written after use of Winamp 2.5c, but is probably fully correct for other versions as well. Right, let's do it!

Getting Started

First, locate your Winamp folder, in that folder is another folder simply called skins. Any folder in the skins folder will show up in Winamp's skin browser as a skin, regardless of the folder's contents.

Now, working completely from scratch is probably enough to drive any man into madness, so you'll need a skin to use as a base. Any skin will work as a base, as long as it has all the files you wish to change. If you don't have any skins, you will need to get one before you can start. You can get my GreenAmp skin here, otherwise there are tons of skins to be found on Winamp.com. Best is probably to download the base skin from Winamp.com, as it contains all files you can possibly have in a skin. Once you have a skin folder to use as a base, make a copy of it and open the copy.

Basic Editing

As you can see, there are a lot of files in the folder (especially if you've started with the base skin). Don't worry, you won't need to change all of them. In fact, you can delete any file in your new skin folder you don't plan on changing. For every file Winamp fails to locate in a skin, it will use its default setting. For example, if you don't plan on changing the cursors, you can remove all cursor files from the folder. The bmp files are what most people change, and they're the ones which make the biggest difference. The txt files can be ignored for now, I'll get to them later. Focus on the bmp files. There may be up to 15 of them, depending on which windows a certain skin changes. They contain all the graphics for the skin: buttons, text, background and so on.

The basic process of editing the skin is very simple. Just open one of the bmps in a paint program, change it and save it again. Then open up Winamp and select your skin to see the effect. If you already have Winamp open with your skin selected, simply press F5 for the changes to take effect. Simple, right?

Which is Which Among the Bmps?

Good question. Most of them are quite self-explaining so you shouldn't run into any problems. Anyway, here you are, all the bmp files revealed and explained!
  • Balance.bmp
    • This is the balance slider button, in the main window, and its background.
  • Cdbuttons.bmp
    • The rewind, play, pause, stop, forward and eject buttons for the main window.
  • Eq_ex.bmp
    • The look of the equalizer window when it is in windowshade mode. The two sliders control volume and balance.
  • Eqmain.bmp
    • The look of the equalizer in its normal state.
  • Main
    • The heart of the skin, the background picture for the main window. Remember, a lot of this image will be covered by other images when the skin is used.
  • Mb.bmp
    • The look of the Winamp minibrowser. I've never cared enough to skin this one ...
  • Monoster.bmp
    • The small indicators from mono or stereo on the right of the main window.
  • Numbers.bmp
    • The large numbers used for the time display above the visualization.
  • Playpaus.bmp
    • These are the small icons displayed to the left of the time display in the main window.
  • Pledit.bmp
    • The look of the whole playlist editor.
  • Posbar.bmp
    • The look of the seeking bar in the main window.
  • Shufrep.bmp
    • The shuffle and repeat buttons for the main window.
  • Text.bmp
    • The text and other characters used for displaying song title and info in the main window. I have yet to figure out why the base skin has it multiple times, you only need one instance of the text in the file. The lower three can be removed without notable effect.
  • Titlebar.bmp
    • This is the look of the top part of the main window as well as its windowshade appearance and the small buttons on the lef side of the skin. The top part of anything drawn in main.bmp will always be covered by one of the two top parts in this file, so if it seems unresponsive to changes this could be the reason.
  • Volume.bmp
    • Finally, this is the main window's volume slider button and its background.

Trouble and Shooting it ...

First and foremost, remember that everything must be positioned exactly right to work as intended. If it isn't, things will look wierd ... Noting coordinates for the corners of different bits and pieces can be very helpful.

It seems there is also a problem in titlebar.bmp. Appearantly, the two windowshade images share one line of pixels; the last line of the top one is also the first one of the bottom one (took me a lot of banging my head into a wall before i realized that ... ;-). Nothing to do about it but live with it I guess, knowing about it does at least enable you to do little tricks to hide it.

As you know, the playlist window (and the minibrowser too for that matter) can be resized. Therefore, some parts of pledit.txt will be tiled when the need arises. You may want to make sure they look good when tiled too.

If you need to know exactly where the buttons will be placed, take a screenshot when Winamp is open, paste it into an image and cut it down to just the window you want. Then you'll be able to get the exact coordinates, which are often very nice to have. If you can't be bothered to take one yourself, you can get it from the downloads page.

There is no need for the bmps to have the same palette, or even colour depth. Personally, I try and make each file as small as possible by reducing colour depth when I'm done with an image.

This may not be true for other paint programs, but it certainly is for Corel PhotoPaint. If you decrease the colour depth of an image enough, PhotoPaint will default to RLE compression when saving the image. If the image is saved with this compression, Winamp will be unable to use the image and will jump back to the default.

Patience is the key!

So, What About Those Txt Files?

Right! Here are the possible txt files in all their glory:
  • Pledit.txt
    • Allows you to change the look of the text in the playlist window. All colour values are to be entered in hexadecimal form in the normal RGB order.

      "Normal=#xxxxxx" sets the colour of the normal text.
      "Current=#xxxxxx" is the colour of the current song playing.
      "NormalBG=#xxxxxx" is the colour behind normal text.
      "SelectedBG=#xxxxxx" sets the colour to appear behind the currently selected song.
      "Font=Arial", quite naturally, sets the font in which the text is displayed.
  • Region.txt
    • This is the most powerful of the txts. It allows you to create skin masks, effectively make parts of windows transparent. If you want to learn this, I recommend you go download the base skin and open up its region.txt, it explains all you need to know.
  • Viscolor.txt
    • Viscolor.txt gives you control over the colours of the visualization. The colour values are between 0 and 255 and in RGB order, you know 255,0,0 give bright red, 0,0,255 give bright blue and so on. Colour 0 is for the visualizer background and colour 1 is for dots in the background. Colours 2 to 17 are for the spectrum analyzer, 2 is on top and 17 is in the bottom. 18 to 23, finally, are for the oscilloscope, with 23 being for the peak dots. Note that if you put a comment or anything else Winamp doesen't expect at the start of viscolor.txt, it will be ignored and the default will be used instead.


    That's all for now folks! Now get skinning!

    Oh, and remember to mail me any comments, critisism or ideas!

    Return to the Winamp mainpage.