This section discusses the most preliminary steps of creating a skin: choosing an image, figuring out how it will fit into the skin, and making it look nice.  It outlines things to keep in mind while remaining aware that creativity can overcome many of the obstacles an image may present.

The first thing you need in order to make a Winamp skin, aside from the tools I've already described, is an image.  It's very important to choose an image that fits nicely into the layout of the skin.  It is especially common for people using skinning programs to just plop any old image, in any old shape or size, into a skin and call it done and good, but since you are going to be a nice, dedicated skinner like me, and do things by hand, you certainly don't want to put in all the effort for a crappy-looking image.

Of course, there is no "ideal" image for a Winamp skin.  If you are creative, or if you are willing to sacrifice a few buttons, you could probably make most images work well.  What is easiest to work with, however, is an image of a character that is slightly off-center to the right, with a relatively ignorable background.  [You can always flip images that have the character on the left, but a lot of times this can be distracting as the character looks slightly "wrong".]  Alternatively, you can use an image of a character that has no background and create your own.  I call these "cut-outs", a term I borrowed from Zeruel, but I don't have much advice on using them.  I am bad at backgrounds, so I tend to stick to applying a texture to a layer that has been filled with rendered clouds.

If you are trying to make a skin of a specific series or character, try to collect as many potential base images as you can find, and then position them one by one.  You might be surprised.  Sometimes I see images that I think will work perfectly, and they end up looking bad, whereas an image I kept because it might look good turns out to work really well.

Once you have your image(s), you'll want to see if they'll truly look good as a skin.  For this purpose, I create a work file I call whole.psd.  It's basically a screenshot of the main window and the equalizer, stacked atop one another.  This is the most common arrangement for the windows, and thus the most common arrangement for Winamp skins.  [There are some skins that require the equalizer be placed on top, since it is really easy to "cheat" on the equalizer and make it nothing more than image space, with no buttons visible, but this isn't really a good idea.]  I then paste the image in, move it around, resize it, whatever.

The main window and equalizer are each 275 × 116 pixels, giving you a total area of 275 × 232 pixels.  Not all of this is "free" space, however.  While you can hide many things in a skin, there are certain things that you can't get rid of no matter what.  Among them are the spaces for the song title and the built-in visualization.  [I'm guessing there are plug-ins that let you get rid of these, but I'm not a fan of forcing users to download things like that just to use a particular skin.]  For positioning, I've found it helpful to create several layers on top of the base image that "black out" regions that will be covered.

This is a modified, flattened version of the layers I use in my work file.

The black regions are always blocked while a file is playing.  You see those two small rectangles under the long bar for the song title?  Don't forget about them!!  I see so many lovely skins that are absolutely ruined upon pressing "Play" because those spaces, which are for the bitrate and the frequency, end up covering an eye or lying smack in the middle of the character's cheek.

The pink regions are areas that I highly recommend that you set aside for their elements.  It's not necessary to cover the image entirely in these regions [except for the columns in the equalizer], but they will have buttons and sliders in them, so don't put someone's face there.  These areas include the time elapsed, the play/pause/stop buttons, and the equalizer controls.  For this layer, I find it helpful to lower the opacity so that I can still see the image without forgetting that I have to be careful.

The green regions cover other elements that it would be nice to include, like the volume control and the equalizer analyzer.  Sometimes, though, I will hide them because the image just won't fit otherwise.

The grey lines separate the main window area from the equalizer area.  This can be helpful if you want to create a skin that looks good with just the main window as well as with the equalizer.  [Or you can ignore the equalizer altogether and create a main window only skin.]  Otherwise, it just gives you an idea of where the split will be on the image.

You'll notice that I entirely didn't include the regions for certain elements, like the position bar and the toggles for shuffle, repeat, equalizer, and playlist.  That is not to say they aren't important.  You should be familiar enough with Winamp that you can keep in mind most of the regions without having them outlined for you.  I've just marked the regions that I tend to forget about or disregard too easily.

The final word on positioning is that, with the exception of the black regions and the time elapsed, you have full choice whether or not to hide the elements.  Each image and skin will have its own balance between aesthetics and functionality, and you will have to learn, mostly from experience, what works best for you.

After you've positioned the image, you should create a border around the skin and maybe add the title at the top.  [If you haven't decided on a title yet, that's okay, too.  It's just that I personally tend to do so at this early stage.]  This is probably one of the most important steps of creating a skin, though it sounds simple enough.  The border and the title are going to "set the tone" of the skin, so to speak.

Generally, you want the borders for individual elements to match the border of the overall skin, so this decision is going to have a lot of visual impact.  A border doesn't have to be fancy, though.  The simplest kind would be a solid line of color around the image.  Variations include a double line, a line a few pixels inside the image, a slightly transparent line, and/or a line with rounded corners.  It may sound boring, but you never know, it might look good.

Another class of borders is the kind that makes the skin look "3D".  The basic idea is that you use black for shadows, white for highlights, and then adjust the opacity until you've achieved the desired degree of relief.  You can make the skin look like it's raised or like it has a raised edge.  You can use solid, pixel-wide lines or a row of lines that are successively more transparent.  In combination with the above, you can make a thick, solid color border around the skin and make it look like it has a 3D "frame".

Like all aspects of skinning, one can be very creative in the designing of borders.  A lot of skinners I respect have very sleek borders that look simple enough but that I have no idea how to recreate.  But my advice is: just work on developing your own style, and try to make a border that matches the image.

The title of your skin can also be very important in determining its final "look".  The title itself can show the skin to be funny, or serious, or poetic.  The way you present it can also have an effect.  Consider just the font.  The font can be elegant, whimsical, futuristic, or any number of adjectives.  And your skin will either take on some of those attributes or clash.  Similarly, the font border can make a great difference.  Try an outline or a simple drop shadow, or something more complicated.

A note on the title: if you want it to "dim" when the window is inactive, you must make it fit in the top 14 pixels of the skin.  And make sure you save your layers, so you can create the different versions later.

In case you are still unclear about what I am talking about, here are some real examples from skins I have made or considered making.  I'm really trying to give you an idea of the kinds of things I think about at each step, rather than saying, "I did this, so should you," so don't think of these as my best work or anything.

Choosing an Image

This is the kind of image I would immediately mark as "perfect for skinning".  In fact, in this particular case I kept the image even though I knew nothing about the series, Angel Sanctuary.  Upon second look, however, it might not be quite as perfect as I thought.  To get the face in the right place I would have to crop out the wings and the head of the cross, which removes some of the context.  Also, the image has no real background, but it is somewhat too complicated, especially around the hair and the wingtips, to cut out.

Positioning

This is what one of my potential skins looks like after I finished positioning the image.  I think I was pretty good at avoiding important regions, though I might have to hide the shuffle and repeat toggles.  Again, however, there are some things to consider.  Since the girl's face extends past the main window, this skin would have to be viewed with the equalizer showing.  In addition, her right eye is dangerously close to the volume region, so I might have to hide the volume control or use some "tricks" to keep the two from interfering.  And, as you can see, the image doesn't quite extend to the left edge of the windows, so I'll have to figure out some way of filling in the background.  I could try to duplicate the texture of the wall behind her or just have the image fade to a solid color on that side.

Style

This is one of my completed skins that I thought was particularly consistent in style.  Notice how all of the borders, on the skin and on individual elements, have the same inverted corners.  The title and the font both add to the feeling of sophistication and subtlety, but its true source is the image itself: the pattern of the background tapestry, the formal dress, and the contrasting color scheme.

I could also make a couple of comments here about positioning.  Contrary to my own advice, I chose an image that worked best centered instead of aligned on the right.  Because of this, I had to hide the "Open" button.  On the other hand, I was able to include mono-stero display, which I usually forego.  Once again, the character's face extends past the main window, and I faded out the border there to compensate.  [I also hid the analyzer to fit his chin.]  The "Next" button is right next to his face, but it turned out okay because all of the buttons blend into the background anyway.

[In case you're interested, the skin is of Kinomoto Touya from Card Captor Sakura, and you can download it here.]

~ 01 ~ Home ~