Misc

Winamp Classic Skin Tutorial and Template

Introduction

Just a word of warning from the start: this may not be the most newbie-friendly tutorial; I learned to make skins by picking apart others' skins and messing around until I got it right. ^^; As such, my teaching style tends toward giving out [hopefully] useful examples, a bit of instruction, and then leaving the rest for you to get the hang of on your own. So, if you're the type who needs to be walked through each and every step in miniscule detail, this might not be fitting for you. However, if there's just something that's unclear, feel free to send an email and I'll try to be of some help. :)

Software You'll Need

• Adobe Photoshop (yes, you can use other image-editing programs, but my template specifically is only being made available in Photoshop's .psd format. You can also use GIMP - it's free and pretty impressive, so I'd recommend it if you can't get your hands on Photoshop. It is, however, more annoying and less user-friendly than Photoshop, in my humble opinion, so I won't be explaining it here. But if you can figure it out on your own, go for it...).
• a plain text editor (Notepad, for example)

Things you should know

Mostly just Photoshop basics: how to use layers, how to copy and paste, how to turn the visibility of layers on and off, how to merge layers, how to find a color's RGB and/or hex code value... I'll touch on some of these things lightly, but if you're totally lost, Google up some Photoshop tutorials.

The Templates

First, download this file and unzip it: scs-winamp-template.zip

Let's go over the contents...

• scs-player-template.psd : a layered Photoshop file that you will use to create the player area of your skin
• scs-playlist-template.psd : another layered Photoshop file, this one to make your playlist with
• a folder entitled KibaAmp : contains all of the .bmp files you need for the skin - you will be pasting your own skin on top of these
• a folder entitled Extras : contains some alternate versions of files, and some additional layered files that might be useful - I'll cover these later

The Tutorial

When making skins, I design the player area first and independently from the playlist. So, open up scs-player-template.psd in Photoshop. Take the image that you want to skin and put it between the "guidelines" and "template" sets, like so:

Position your image so that the primary areas are not being obscured by the equalizer, player buttons and other things. If you can't find a good placement, that may be a sign that the image you're using is not a good choice; not all images are equally good for skinning. If necessary, you can have some "non-critical" elements like the volume slider or the eject button invisible, but try not to sacrifice functionality for design too often...

Look in the "guidelines" set and ctrl-click the layer called "surface area." Invert your selection and delete the excess image area that won't be part of the skin.

Now it's time I explained the guidelines...

The layer labeled "tracings" is the one I typically use to guide my work. It doesn't have outlines for all of the elements, but they're enough for me. I also use the skin pieces in "template" as an informal guide - turn off the visibility of your background image layer and draw in elements on layers above.

If at any time you need additional guidelines for a certain piece, ctrl-click that piece in the "template" set, and a selection boundary will appear (and if you need a permanent marker, make a temporary new layer and stroke the selection). Please note: the red lines are outlines, meaning only what is inside of them will be part of a particular player element. Also, be aware that the outlines of the equalizer bars are placed where you would want them if you wanted the slider to be centered (if you ctrl-click the layer in "template" called eqmain-slide-bar, you can see that the slider is off-center with respect to the slide bar on the base Classic skin).

Now that you've got an idea of how to use the guides, use layers above your image (but still below the "guidelines" set) to design the various elements of your skin. I can't give much more instruction than that, since this part's really where your own creativity takes over. For the sake of a completed example, you can download naruto-example.zip, which contains a .psd file with all of the layers used in making that skin.

Some useful Photoshop techniques for designing elements include:

• preserve transparency : near the top of the layers panel, where it says "Lock," there's a little gridded square. Select the appropriate layer and click this icon, and any transparent areas on that layer become un-alterable. This is convenient if you have a bunch of outlines on one layer and you decide you want to change their color - lock the transparency and then drag an oversized brush over the layer. The outlines will all be painted, but your transparent areas will be unaffected.
• layer effects : select chosen layer and hit the little "f in a circle" icon at the bottom of the layers panel. Mess with various effects until you come up with something that looks good ^^; Don't go too crazy though: over-using layer effects to the point of cheesiness is a common Photoshop beginners' mistake...
• layer transparency : see that "Opacity" setting at the top of the layers panel? Sometimes semi-transparent elements or borders can look nice.
• layer compositing modes : to the left of "Opacity" is an unlabeled drop-down box that says "Normal" in it. If you change this setting for a layer, it will change how that layer blends with the layers underneath it. Play around with the choices and you'll get an idea of how they work.

Once you've got everything completed and you're ready to move on... double-check that you've got everything completed and you're ready to move on ^^; Sometimes I forget little details like the collapse/minimize/close buttons, or markers for the options by the timer. If you do forget something, you can always come back, but it's annoying.

Now save your work, and do not save [the .psd] again beyond this point (because you will be collapsing layers; if you're worried about accidentally saving, you could duplicate the image instead, and work with the duplicate from here on). Turn off the visibility of the "template" and "guidelines" sets (as well as the equalizer slider). Then merge all visible layers (ctrl+shift+e or Layer > Merge Visible). Now, ctrl-click on the layer in the "template" set labeled "main." Copy the area that has been selected, and paste it into the main.bmp file found in the KibaAmp folder. Collapse the layer and save. Repeat this process with each of the pieces found in the "template" set.

I don't know if I need to say this, but when you're positioning pasted elements in the various .bmp files, zoom in! :) Get a good look and make sure you're placing it in exactly the right spot.

Also, a special "warning" about monoster.bmp... In my opinion, if they call it "monoster," then the "mono" part should be on left, and the "ster(eo)" part should be on the right... However, it's actually the opposite: the piece that you copy and paste for "mono" goes on the right side of the .bmp, and the "ster" piece goes on the left.

For buttons that change in appearance when pressed, I create each version of the button on a separate layer. When collapsing the .psd, I hide one of the layers, copy the element with the version that's showing, and then undo the merge, and switch the visibility to the other button version (then merge and copy again). Also, the reason I noted to make the equalizer slider invisible before merging, was because you don't want it showing when you copy the eqmain and the equalizer slider bar pieces. Once you have those two pieces taken care of, undo the merge and re-merge with the slider visible.

This copy-and-paste process should cover everything except pledit.bmp (the playlist), pledit.txt (also part of the playlist), nums_ex.bmp, text.bmp and viscolor.txt.

For the numbers (nums_ex), go into the Extras folder and open up nums_ex.psd. This file contains a guiding background layer that shows the "territory" of each number (for these guidelines, each number can overlap its border, but don't let it go into the next number's border). The other layer is meant to cover the guide - once you have your numbers positioned, make it visible (and paint it however you want). Put your numbers above this layer.

For text.bmp, go into the Extras folder and open up text.psd. Use the preserve transparency technique (discussed above) to paint the text layer however you want. Then paint the background as you please as well.

Viscolor.txt is annoying. I wouldn't be against using an automated program for this file in particular, but if you wanna do it the meticulous way, here's how... Open the example viscolor.txt from the KibaAmp folder. You'll see 24 lines of RGB color codes. The first two lines represent the background color of the visualization (will probably be the same code on each line). Lines 3 through 18 are for the bars in the visualization (can all be the same if you want solid-color bars, or, make a temporary new image in Photoshop and fill it with your choice of gradient, and sample a range of colors with the eyedropper tool). Lines 19 through 24 are for the audio wave visualization (can also all be the same if you want a solid-color wave; if not, line 19 is the color of the peaks of the wave, and line 24 is the color of valleys - I assume you can figure what 20-23 are). To find RGB codes in Photoshop, double-click on the foreground color in the toolbar, and the Color Picker dialogue should pop up. On the right, you'll see some boxes that are labeled "R:," "G;," and "B:" - this is the RGB code, just put the numbers together in order, each separated by a comma.

Now you should have everything completed for the player part of your skin. Move the KibaAmp folder (you can rename it to the name of your skin at any time) into Winamp's Skins directory (C:\Program Files\Winamp\Skins on a normal Windows set up). Now open Winamp and switch to your skin to see how it's coming along (you can actually do this at any point - Winamp conveniently substitutes elements of the Base skin for any .bmp files that you're missing). If you find anything that doesn't look right, fix it. A common error is having an element off by one pixel because you didn't position the pasted image correctly in your .bmp file. So go back to your original, merge it, re-copy and re-paste into the .bmp (or, if you saved a layered .psd, just move the layer).

Once you're satisfied with the player, take a screen capture of it (there's a "Print Screen" button on the right side of most standard keyboards). Create a new image in Photoshop to paste your screen cap into (usually, when you have an image on the clipboard [when you use copy or print screen], Photoshop will automatically set its New Image default size to the same size as the image on the clipboard; if it doesn't do that, just make the new image the same size as your screen resolution: 1024x768, 800x600... whatever it may be.).

Now crop the screen cap so only the player with your skin is showing (don't include the playlist). Copy this and paste it into scs-playlist-template.psd, below all of the sets (just above the background). Position it over the Inuyasha player in the background, and that's that. You won't be doing anything else with it, it's just there so you can design your playlist to look good with it :)

Now do the same thing you did with scs-player-template: design all of your elements on layers, using the guidelines, the skin underneath, and, if needed, the selection boundaries from the "template" set. The "chaos" set is just there 'cause I thought the lines in it might be useful (feel free to ignore it).

When you're done, follow the same procedure as with the player: save your .psd with layers, then, with the "template" set's visibility turned off, merge all visible layers. Ctrl-click the pieces in "template," and paste and position them correctly in pledit.bmp.

Concerning the close and minimize buttons: see the buttons right above the sliders? Like the "monoster" thing, these are backwards from what you (I) might think: the one on the right is the minimize button, and the one on the left is close. Also, the little "stray" button over on the right is the minimize button.

Now, aside from the stuff you've pasted in, there are a few more things to deal with on pledit. The obvious thing is the menus at the bottom. I... don't think I need to explain anything... just... design 'em. ^^; There's also the stuff in the upper-right corner. The larger block will appear next to the bottom-right area when you stretch out the playlist horizontally. This part does not repeat, so if you wanna put a stamp or something, go for it. The thinner block to the left of the large one will also appear when you stretch out the playlist horizontally, but this one will repeat itself the further you stretch it. So, anyway, make both pieces match up with the two sides of the bottom (same color, same border lines, etc.).

There're also the pieces for the collapsed playlist. As you can see in the KibaAmp example, there are two end-pieces and a middle piece (that will repeat itself). There's really not much space for design here, so I usually just slap a border around the edges and call it done ^^; But, do as you like...

Once you've got pledit.bmp covered, there's just oooooone more file to go: pledit.txt (and it's a cinch). This file sets the colors of things in the actual list part of the playlist. Open up the example and you'll see labels assigned to color hexcodes. I think the labels are pretty self-explanatory... To find a color hexcode in Photoshop, bring up the Color Picker dialogue again. Under the area where you found the RGB numbers, there's a box with six alphanumeric digits with a # in front of it. This is the hexcode. Copy and paste the corresponding codes for your desired colors.

And that's basically it. You need not go any further unless you want to distribute your skin to other people. But, if you want to do that...

Open up the credits.txt file and put in... whatever you want. :) There's no required formatting, it's just like a little note to anyone who uses your skin.

After that, you'll need Winzip (or another zipping program of your choice). If you already have it installed, you should be able to right-click on the folder that your skin's in, and use the option "Add to [skin].zip." If not, open Winzip and zip up the folder yourself. Once that's done, change the file extension from .zip to .wsz (right-click on the .zip file and "Rename"). If you can't see file extensions in Explorer, you need to make them visible before you can do this. Go to Tools > Folder Options > View, and uncheck the box that says "Hide extensions for known file types."

And now you're really done. Upload your .wsz to the net and share it with the world! I hope this has been useful, and be sure to check out the "extra stuff" below for some further tips and explanations. ^^; And remember that, like most things, skinning gets easier and faster the more you do it. So if your first skin takes forever and still doesn't look too hot, don't fret. Just keep tryin'!

Extra Stuff

The balance slider and other hidden elements

There are certain elements in the upper-right-hand corner of the player that I constantly leave invisible because they more-often-than-not obscure the background image, and they're unimportant anyway. ^^; If you want to make these elements visible, look in the Extras folder for .bmp copies of player pieces from my Firefox skin.

The reduced-size posbar and volume slider

You'll notice on my skins that the posbar and the volume slider are often smaller than those on the base Classic skin. Copies of the full-size files can be found in the Extras folder. Note that you can make both of these sliders any height equal to or less than the height of the full-size ones. Just remember that, when applying these elements to the player, Winamp starts at the top (of where it expects to find the piece in the .bmp) and goes down. Therefore, to make the posbar smaller, cut off pixels from the bottom of the full-sized piece. The same goes for the volume slider, except that you can't change height of the area it slides in, like you can with posbar. But, remember the top-down method: if your slider is two pixels high, those pixels will be applied near the top of the sliding area (so if you put a "track" that it slides on, adjust its position accordingly).

The morphing volume slider

You may also have noticed on some skins, that the volume slider changes as you slide it along from end to end. This is done by making the actual slider invisible, and putting a "fake" slider onto the sliding area. This way, you can alter the appearance of the slider for each step of its progression. You can also use this technique to make non-rectangular volume sliders. An example file can be found in the Extras folder.

Alpha channels for shape help

Go to Window > Channels to bring up the Channels panel. Aside from the default channels, you'll find some custom-made channels that I've added over time. Ctrl-click them to make selections, then go back to your layers panel and the selection will stick around for you to fill or stroke it or whatever. These sorts of channels can be found in both the player and playlist templates, and they're mostly rectangles with rounded edges.

Equalizer with no Equalizer

I personally don't like or recommend this - even though I don't use the Equalizer myself, I know many others do, and I see it as a design challenge which I would be succumbing to if I simply wiped out the functionality. But, if you must know how to do it... In eqmain.bmp, if you crop the image so that it only includes that top rectangle, that's all that will show on the Equalizer. This is how people get rid of the slider bars (and everything else) and make flat images out of the Equalizer.