Winamp 2.X skinning tutorial

Chapter 4 - Text Files

SacRat and Imagine

Text Files

There are usually five (or less) text files in a winamp skin: pledit.txt, readme.txt, region.txt, viscolor.txt and winampmb.txt. Well, the last one is often absent. You can find a detailed description of every file below.

Important note: try not to use characters which are not present in the Latin alphabet to avoid problems: they might be displayed incorrectly on some computers. Why? Winamp is only able to display Windows character sets, which differ for every country. If you use some letters of your local alphabet, they will be replaced by the corresponding characters from the user's alphabet. The best solution is to try to use transliteration. So, if you write your text in Spanish, German or (oh, no!) Russian and so on, try to avoid using these characters where it’s possible. Note that symbols like “©”, “%”, “$” and so on will be displayed correctly.

The last thing to know about text files is to avoid using non-Windows codetables, like KOI, MAC and so on... Unfortunately Winamp doesn’t even “understand” Unicode, which could solve all these problems.

So the easiest way to avoid all the problems above is to write all the texts in English and type them in Windows Notepad. :)


This file should look somewhat like that:


The structure of this file is very simple: after the [Text] line there are fields and their values. What do they mean? Normal is the foreground (font) color, which is used to display the song’s name in winamp playlist. Current is the foreground color for the currently played song. NormalBG is simply the background of the playlist and SelectedBG the background of the selected song (the one you have just clicked on). MbFG and MbBG are the minibrowser’s foreground and background colors. If you don’t want to skin the minibrowser, just skip these fields. Font is the name of the font you use in your skin. Try not to use rare or non-standard fonts or, if you do so, place the TTF file into the skin’s directory. Note: all the values are given in HEX. So “pure” green color (0R,255G,0B) will look like #00FF00. Use any calculator to convert decimal values into hexadecimal. There’s no need to do this, if you use Colorpad (take a look into the skinning applications (graphics) section), as it could give you both HEX and decimal values.

Graphical editors such as Photoshop provide the hexadecimal value of any color in the “color picker” box, so you can copy it and paste it in your text editor.


Possibly, the most interesting text file in the skin package. It’s the text that is displayed in your winamp skin browser’s description window. You may write there whatever you want. Usually skinners include the following information: skin name, skin version, release date, short description, copyright note and the author’s contact information. If you’re planning to submit a skin somewhere, then it’s not the worst idea to include some information about the creator. The final version could look somewhat like this (a fragment from my Ballzzz 2 Futura skin’s readme.txt):

Ballzzz 2 Futura by SacRat
ver: 2.0.0 final

(skin name and version)

Ballzzz Futura by Taras Brizitsky (AKA SacRat):
Suggestions and bugreports are welcome.

(short contact info)

Hope, this is what you were waiting for: Ballzzz 2 Futura. Modern design, minimalistic style... 


Small description of the work and a list of new features.

Terms of use:
-Ballzzz Honey for winamp is © 2002 by Taras Brizitsky AKA SacRat.
-This skin is copyrighted freeware for any noncommercial use or distribution.


A copyright note/terms of use. Just some useful information for those, who might use your skin. In few words it could be described like: I’m the original author; you’ve got it for free, so you cannot take money from it; you cannot rip it and if you want to place it somewhere, let me know.

Note: some skin sites (like ) decline submitting skins, which are not freeware.

Greets to following Deviantart members:
-Imagine AKA Gileva

Greets to all those, who sent me comments on my previous works, all those, who helped me to make my works better and better, and personally to Fiorela Agusti, my endless source of inspiration 


Nothing special, just greets :).

Thanks for downloading...
Find more on or

This information might be useful for those who wish to get some other skins made by you. You could even place a list of other works made by you. For sure, not everyone reads this readme, but some people do. Besides, you’ve made a skin. Don’t you want to let others know who did it? Descriptions on the sites are easy to forget and this file is always in a skin.

Note: if a readme.txt file is absent, then winamp will display the content of any other text file which is not one with configuration data (like viscolor.txt, region.txt and so on). For example, if your skin’s archive contains files (among the standard ones) readme.txt and I_am_a_cool_skinner.txt, then only readme will be displayed. And if it is absent, then you’ll see the content of the second file. Some sites, such as use this trick to place their description into the skins you upload. So they simply repack the skin and put their own description file into the archive near readme.txt. Now you should know “how it works”.


A “transparency” mask of your skin. If you ever decide to create a skin with transparent regions, you may need this file. But as most of the modern skins are 100% visible, there’s no need to include it into the skin’s archive. Creating this file manually is quite tricky and boring. There’s a good tutorial by Adam Kennedy, which is often included (quoted) into region.txt files. Here it goes:

; I stole this from the Complex skin, cause hey I thought it was cool :)
; (and cause I'm too lazy to document it myself. :)
; The original author is Adam Kennedy 
; Hope you don't mind Adam :)
; -Justin
; P.S. you can use the section names [WindowShade] and [Equalizer]
; for obvious purposes =)
;The region information comes without any supporting documentation
;so I thought I might as well make some.
;The region.txt in WinAmp 1.92 allows us to some interesting things with transparencies
;But how does it work?
;Well, basically, it lets you define a set of polygons. Anything inside a polygon is drawn. Anything not in a polygon is not drawn. Simple heh?
;For how to define it have a look below at the first block. Un-comment it now. Don't worry about commenting the actual one lower down, if WinAmp finds multiple definitions, it only does the first and ignores the rest
;How to make a mask
;1. Type [Normal]. Real simple that one. (My guess is it is just for forward compatibility)
;2. Just type the NumPoints= and leave the number blank, we'll fill it in later
;3. OK, now for the fun part.
;   The co-ordinates you should type in are the OUTSIDE pixel co-ordinates in x,y format.
;   Start at the top lefthand corner and work your way CLOCKWISE around you polygon.
;   Now WinAmp ONLY accepts the PointList as one line of comma separated variables.
;   You can use spaces, but DONT GO ONTO A NEW LINE. Clear? Good. :)
;   One last thing, don't type the first position again at the end, WinAmp joins them.
;   Putting a space between each pair is simply common sense, right?
;4. Once your done, count the number of co-ords, and fill in that number for NumPoints.
;Oh, as a side note, the x variables go from 0 to 275, and the y from 0 to 116.
;So if you look at the first example you can see I've gone across the second top line, gone down a bit, ducked in one pixel, gone down to the bottom, and across and back up the other side, putting another ledge on the other side.

;This does the outside border, and chops some bits out on the top and edges
;NumPoints=8    ;Do this LAST!
;PointList=0,1,  275,1,  275,14,  274,14,  274,115,  1,115,  1,14,  0,14  

;Cool heh? Very subtle effect. Now lets try a more complex one, with multiple polygons
;For your first hard(ish) mask, I suggest defining each element as a separate mask.
;It makes them a bit easier to think about.

;First, lets define an area that JUST does the titlebar.
;PointList=0,1,  275,1,  275,14,  0,14

;Simple as can be :)
;Go ahead, uncomment it and have a look. Just remember to recomment everything above it
;Doing your areas one at a time does speed the process up a bit

;Now lets define JUST the area sort of inside the outer ring
;NumPoints = 4
;PointList = 3,15,  272,15,  272,113,  3,113

;Right, so say we want a mask that has, the titlebar AND the main area.
;We just add them together
; [Normal] 
; NumPoints = 4, 4  ;Make sure to get the order right(although it doesn’t matter here =P )
; PointList = 0,1, 275,1, 275,14, 0,14,     3,15, 272,15, 272,113, 3,113

;Don’t forget to add that extra comma after the first set.
; Having that bigger gap that lets you "keep it in your head" easier, it's a good idea

;OK, now lets try something tricky. We are going to make a mask for just one green line around the outside of the skin
;This introduces the other "big thing" with masks. Have a look at the first three co-ordinates below. You can see the first two moves we make are to go one to the side and then go down to the bottom. Looking at the last co-ordinate you can see we will come back up at the end, making a line two wide, right? 
;WRONG!! Here comes the big important phrase.
;That's right. Because I don't make a square, because I have to turn "inside" the box, I am only marking space, and what I end up with is a mask with one green line.
;WARNING: Leave your skins dialog open when you do this one. :)
;NumPoints = 8
;PointList = 1,14,  2,14,  2,114,  273,114,  273,14,  274,14,  274,115,  1,115

;OK, as the final touch lets add lets the border we just made to the other two.
;You should be able to work this out on your own
;NumPoints = 4, 4, 8
;PointList = 0,1, 275,1, 275,14, 0,14,     3,15, 272,15, 272,113, 3,113,     1,14, 2,14, 2,114, 273,114, 273,14, 274,14, 274,115, 1,115

;hmm... that still looks a bit tacky down the bottom right
;So I'm going to modify it a bit
;See if you can work out what I've had to alter just by looking at the display of it
;NumPoints = 4, 4, 8
;PointList = 0,1, 275,1, 275,14, 0,14,     3,15, 272,15, 272,80, 3,80,     1,14, 2,14, 2,81, 273,81, 273,14, 274,14, 274,115, 1,115

; Justin's whacked trans skin :) in one, big lame messy line
; [Normal]
; NumPoints=20,4,4,4,8,4,4,6,6,4,4,4,4
; PointList=0,0,19,0,19,11,114,11,114,0,156,0,156,11,243,11,243,0,275,0,275,13,266,13,266,22,264,22,264,13,111,13,111,22,109,22,109,13,0,13,     109,22,266,22,266,36,109,36, 16,88,130,88,130,105,16,105,    136,89,157,89,157,104,136,104,    22,13,22,62,102,62,102,13,100,13,100,24,24,24,24,13,    0,0,275,0,275,3,0,3,   16,72,264,72,264,81,16,81,  0,13,0,78,16,78,16,75,4,75,4,13,   275,13,275,78,264,78,264,75,272,75,272,13,     14,78,16,78,16,105,14,105,     130,81,132,81,132,105,130,105,     146,81,146,89,148,89,148,81,     130,96,136,96,136,98,130,98

;The other good thing about doing your mask in bits and pieces like this is that can make multiple versions so you can change as your whims change

You could also read our small format description below, in the transparency section.

Modern skinners prefer to use various applications to create this file. One of them is already mentioned winamp region.txt generator by Maxim. As for me, it’s the best program of that kind, as it allows you to create transparency regions fast and easy, unlike using the rest of the programs or creating them manually.

I created a region.txt file manually (for my FuturA skin) and I say it was not much fun ;) What I did - I opened the image in good old MS-Paint, zoomed it in, and typed cursor coordinates which are displayed in the status bar, even if the window is inactive. But I wouldn’t recommend doing the same!


Visualization colors. When you don’t use any visualization plugin, simple oscilloscope/spectrum analyzer is usually turned on and it’s located on the left part of your main winamp window (below the numbers, which display song’s time). The way it looks is described in this file.

It might look somewhat like that:

223,223,223, // color 0 = light gray
234,234,234, // color 1 = lighter gray for dots
210,210,210, // color 2 = top of spec
205,205,205, // 3
200,200,200, // 4
195,195,195, // 5
190,190,190, // 6
185,185,185, // 7
180,180,180, // 8
175,175,175, // 9
170,170,170, // 10
165,165,165, // 11
160,160,160, // 12
155,155,155, // 13
150,150,150, // 14
145,145,145,  // 15
140,140,140,  // 16
135,135,135,   // 17 = bottom of spec
210,210,210, // 18 = osc 1
174,174,174, // 19 = osc 2 (slightly dimmer)
138,138,138, // 20 = osc 3
102,102,102,  // 21 = osc 4
66,66,66,  // 22 = osc 5
200,200,200, // 23 = analyzer peak dots

Some comments: the file has 24 lines with color values in RGB (decimal). All the text from double-slash “//” to the end of the line is a comment.

- The first line of the file has the background color of the visualizer. It’s often taken the same as the average background’s color of main.bmp on that place.

- Line two has the second background color. It’s made to give your visualizer a grid-looking style. If you don’t need any grid, just set it the same value as the previous line.

- Lines 3-18 are the spectrum analyzer’s color values (from top to the bottom). Trick: you could make every second, for example, line black (or give it any other indexed value) to make the analyzer look like it was build from small blocks.

- Lines 19-23 are the oscilloscope colors (from inside to outside).

- Line 24 is storing analyzer peaks’ color value.

Creating this file manually is not too hard, but you may use any utilities for this (look at skinning applications (configs) paragraph).

Hint: you can create a 16x1 px. file in your graphix program and fill it with any gradient, or draw anything you like in this limited space :) If you use Paint Shop Pro, choose the ‘color picker’ tool, which shows the RGB value of the pixel under the cursor in a ‘color’ box (on right) even when inactive, so you can type it in your text editor. In Photoshop this will be a bit less convenient, still nothing too hard. You could also use a color picker like Colorpad for this aim (look at skinning applications (graphics)).


The file I hate so much... The file with the content that is displayed in winamp minibrowser by default. Theoretically. In fact some crappy skins use it to display a minibrowser window if it’s inactive. May look somewhat like that. Hope, you’ll understand the idea (taken from the template amp skin):

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
// -->

<body bgcolor="#FFFFFF" text="#A0A0A0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scroll="no">
<div id="Layer1" style="position:absolute; left:0; top:0; width:255; height:88; z-index:1"><img src="mbinner.bmp" width="256" height="58"></div>
<div id="Layer2" style="position:absolute; left:1px; top:79px; width:244px; height:74px; z-index:2"> 
  <p align="right"><font face="Arial, Helvetica, sans-serif"><b><font size="-2">Version 
    (c) 2001 Mischa Klement</font></b></font><br><br>
    <font face="Arial, Helvetica, sans-serif" size="-2">created with Macromedia Fireworks 4.0<br>
    MikroAmp skinned<br>
    DFX skinned<br>
  <p align="right"><font face="Arial, Helvetica, sans-serif" size="-2"><br>
    <a href=""><font color="#A0A0A0"></font></a></font></p>
  <p align="right"><font face="Arial, Helvetica, sans-serif" size="-2"> <br>

If you think that you’re a good in HTML, you could write your own, but I never do that.


One more file that is useless for almost any normal skinner. It defines the default page which would be opened in the winamp MB window.

The format is very simple:


where “URL” is the address of your page to be opened.


Well, it's not a secret, that the winamp 2 skin format supports transparency, yet its abilities are very limited (well, guys, the long-awaited winamp 3 will be able to make really transparent skins with all the opacity effects). How does it work? It's useful to know to know some limitations of this "trick" and its disadvantages.

So-called "transparency" in winamp is just a way to make some regions of your skin "transparent" (interesting phrase), that means you could see through them and they wouldn't have any control elements. Note that not all the windows of your skin can be "transparent", only the main window and equalizer. This creates some difficulties... For example, you'll have to make your "transparent" skin look OK with all the windows on and it's not a trivial task. A good idea is to leave the greatest part of your skin visible, so it would be easier for anyone to use it, so don't create too large transparent regions. Next, think a bit about a simple questions: what the hell do you need this transparency for? It's often used to underline the shape of a skin, but not an end in itself. I've seen lots of interesting skins whose authors were trying to make their work look original by just making almost all the skin transparent and leaving few space for control elements... They were looking nice, but had terrible usability.

Creating a transparent skin manually is rather tricky: you create a new file called region.txt in your skin’s directory and then edit it to look like that:

PointList=0,0 275,0 275,113 0,113 0,113 48,113 48,116 0,116 226,113 275,113 275,116 226,116

PointList=0,0 48,0 48,116 0,116 226,0 275,0 275,116 226,116 48,4 275,4 275,113 48,113

PointList=3,0 0,3 0,11 3,14 272,14 275,11 275,3 272,0

PointList=3,0 0,3 0,11 3,14 272,14 275,11 275,3 272,0

(This fragment has been taken from my Bend v3 skin, windowshade’s transparency is made specially for this tutorial :)). Looks difficult? It’s not that hard, as it seems for the first time... A [Normal] section has transparency description for the main window and [Equalizer] - for the equalizer. [WindowShade] and [EqualizerWS] are just transparency regions for the window’s winshade modes (main and EQ). NumPoints=4,4,4 indicates that there are 3 transparent regions in our skin’s EQ and main window. Each of these regions consists of 4 points. For example, for the main window the two first transparent areas look like: 0,0 275,0, 275,113 0,113 0,113. Fill this field last, when you know the complete number of your points and transparent regions in the skin. PointList= is an arrow of point coordinates in X,Y format. Note that they are the outside pixels of your skin, so don’t point skin elements here. Please note that all the three regions are not divided by anything, so it’s quite easy to make a mistake filling them manually. The same is right for the EQ...

It’s not the best idea ever to make this file manually, as it takes a lot of time when making really original shapes. So you could use one of the programs for generating this file. I’ve seen several programs , which were designed to help you in this, but my favorite is Maxim’s Winamp regions.txt generator, which could be found at (try looking through any search engine, if this link won’t work). If you need a better explanation about creating editing this file, take a look at regions.txt section.

Well, there’s one more «trick» to create half-transparent skins. Sometimes people just delete some skin’s pixels as on a chessboard, pretending «transparency» this way. I personally dislike this pervertion, which only make skins look worse and wouldn’t recommend anyone to use it. Just know, that it exists :)


If you need it, you can also replace the default winamp cursors. Cursors usually have 32x32-pixel size and could be one of two types: animated or non-animated. If you need to use animated cursors, just rename an ANI file into CUR and use it. Winamp will “understand” it as well.

Here’s the description of every file:

CLOSE.CUR	Main window's close	
EQNORMAL.CUR	EQ normal (default) cursor	
EQSLID.CUR	EQ vertical sliders	
EQTITLE.CUR	EQ titlebar	
MAINMENU.CUR	Main window's top-left button (menu)	
MIN.CUR		Main window's MIN button	
NORMAL.CUR	Main window's default (normal) cursor	
PNORMAL.CUR	PL normal cursor	
POSBAR.CUR	Main window's posbar	
PSIZE.CUR	PL resizable corner	
PTBAR.CUR	PL top bar	
PVSCROLL.CUR	PL vertical slider	
PWSNORM.CUR	PL WS normal cursor	
SONGNAME.CUR	Main window's songname scroller	
TITLEBAR.CUR	Main window's titlebar	
VOLBAL.CUR	Main window's volume balance	
VOLBAR.CUR	Main window's volume switch	
WINBUT.CUR	Main window's WS button	
WSMIN.CUR	Main window's WS MIN	
WSNORMAL.CUR	WS normal cursor	

In order to change these cursors you could create your own files with any program, like Axialis AX Cursors ( or use cursors made by someone else (read rips and copyringhts paragraph first), which could be found anywhere on the Internet.

BUGZ (don’t forget about testing...)

A few words about some bugs and misses which can often be found even in skins made by professionals. Before submitting, check these things:

- Buttons displacements and animation bugs: press any button and without releasing your mouse’s left button (if you’re not a left-hander) move the cursor over all the buttons in your skin. It’s easy to find a “lost” animation this way. Besides, if some buttons are displaced even one px aside, you will find the bug.

- Headers: sometimes you could make a mistake, while creating your headers in titlebar.bmp or so. For example, the header (or any header’s element, like title) could be displaced.

- Sliders: sliders are probably the hardest things to troubleshoot since they have lots of animations. Just move your slider slowly from minimum to maximum position and look at the slider carefully. If you’ve missed only a pixel in your volume.bmp (or any other slider), it could spoil all your work. Sliders trend to “climb down” very easily, so pay a lot of attention to them.

- Stop!: if you think that a winamp, where your skin is applied is always playing music, you’re not right: sometimes it’s useful to press pause or stop and take a look at changes: posbar displacements, missing background in animation window, hell-knows-what on the place of your digits... this all is more than real.

- Resize: resize your playlist, MB, AVS window and find out that there are clear joints in tiling elements... or not... Anyway, it’s better to find it out now.

- WS: for some reasons people usually forget that someone could use it. One of the most “popular” bugs is a displacement of min/max/close buttons.

- Is that all? Not... Check all the modes of visualizer (spectrum/oscilloscope) and be sure that you have tested all the windows, including AVS and MB (if you skinned them), in all the modes. Check readme file and start all over again (joke). Now that’s all...

Taras Brizitsky alias SacRat