A Winamp skin is a set of bitmap images that are zipped into one file or all in the same directory.  [While making the skin, obviously, you leave it unzipped.]  Sometimes the zip file's extension is changed to .wsz, but it really doesn't make a difference.  These bitmaps determine what the Winamp player will look like.  Some skins also include custom cursors, but I neither make nor use them, so I can't help with that.

The Winamp program has several parts, each of which is skinned separately.  These include the main window, the equalizer, the playlist, and the minibrowser.  To skin some of them, you need only change one image (e.g. the playlist), but for some of the others, there are many different images that contain pieces of the whole (e.g. the main window).

When you make a Winamp skin, you can only alter the way things appear, you cannot alter where they are nor can you alter whether they are there or not.  [That is, you can create a skin that makes the play button the same color as the background, but if the user clicks in the right place, the play button will still work.]

I do my Winamp skins in Adobe Photoshop 5.5, but you could certainly make do with a lot less, or you could use any other image editing program out there.  The key here is layers.  Layers are a skinner's best friend.  [If you are unfamiliar with layers and how to use them, try a tutorial like the one here.  All I'm going to say about them is: create new layers for everything.]

[Obviously, the fact that I'm writing this means that I highly disapprove of skinning programs of any sort.  I know there are people who say they use it to create the basis of their skins before going in and hand-editing them, but even that is dubious, in my opinion.]

The first thing you need to create a skin is the base skin, the set of images that make up the default Winamp skin.  You can download it from the official site, which also has a pretty good explanation of what each piece does.  [For the most part, I'm not going to be as detailed as they are, so if you're totally confused, that's the place to start.]

There are also many sites out there with skins and stencils that help you distinguish the "active" areas of the skin, that is, the parts that you can click.  Some examples are nullSkin, Skinner Atlas, and Template Amp, but there are probably many others.  It's a good idea to begin all of your skins by pasting your image on top of some base skin, so try to find, or create, a stencil you are comfortable working with.

I'd like to note that I never read many Winamp tutorials myself; I mostly muddled through and taught myself on my own.  And afterwards, I didn't really talk to many other skinners about the "trade", so to speak.  The net result is that I don't know what anything is really called, if they even have names.  But I'll introduce you to what I call things because they will be the terms I use in this tutorial.

The first thing is that I divide skins into two aspects, the image and the elements.  The elements are the buttons, sliders, and indicators; the pieces that add functionality to the skin.  The image is what you started with, and it includes any image editing you may have done, such as borders.  When a skin doesn't have a base image, I call it a "design skin", and I fancy the making of them is quite different from the making of an image-based skin.  [So if you want to make design skins, I'm sorry, but I think you'll have to look elsewhere for a useful tutorial.]

While making the skin, I tend to make several work files.  These are "intermediate" files that are not in the ultimately zipped, uploaded skin.  I generally save them as PSDs, which is Photoshop's own file format.  It keeps all of the layers intact and applies no compression.  As you might guess, the file sizes tend to be pretty large, but believe me, when you want to go back and change something, you will be very glad that you have them.  [I'm sure most image editing programs have PSD-equivalents such as PSP for Paint Shop Pro and PNG for Macromedia Fireworks.]

One type of work file I make is simply a version of one of the base skin files that hasn't been flattened yet.  This is especially useful for the more complicated files, like main, eqmain, titlebar, and pledit, where you might want to test a few different versions, or check your progress before you're completely done.

Another type of work file is the kind that doesn't exist at all in the base skin.  These are for the purpose of seeing how some part of the skin will look when it's all put together, when the actual file slices it into tiny pieces.  I do this especially for the playlist and the combined main window and equalizer.  Apparently, these are known as skeleton files.

~ Home ~ 02 ~