This is the part where the tutorial really begins. I used a couple of skins I'd already completed in the last part, for purposes of illustration, but from here on I'm going to use something else - a very basic sample skin. I'm going to use this image of Vincent.
 It's his official Square CG image, and I've never used it for a skin because it's not my style; for one thing, Vince is Supergoth, so he's not my favorite character. For another, the image is a bit difficult, all purple and pink and red. And very high-contrast, as well. Dramatic lighting effects tend to cause that problem. If I were making a skin of it in earnest, I'd get into some major image-editing, maybe turn the background grayscale and see about muting the colors on him. But that's not really the point here - I just want to demonstrate a skin. So I did minimal editing - really, I just resized it, checked that against the template, mucked about with resizing some more because I guessed wrong at first, then finally settled on a size and cropped to 275 x 232. I covered that last time. The important thing this time is what you do afterwards. You can, of course, do minimal tampering with your images. Here's an example of a skin I created that way. Sometimes that's fine, but sometimes it actually creates more work in the long run - I'll explain why later. In this case, I'm not going the spare-and-minimalist route - I want to make it simpler for you and me. I highly recommend going the simple route when you're first starting out. So I take the base image and create a second layer. On that, I draw borders (which I pretty much consider a necessity) around the main and equalizer windows. Then I draw more boxes - one for the number and visualization area, one for the text box, and one each for the bitrate and frequency indicators. None of these can be moved or made transparent (not in this version of Winamp, anyway) so be sure, in setting up skins, that you don't stick somebody's face under one of them.
 After those are done, I add a title - a paraphrase of Vincent's reaction when you give him his final limit break. He's such an ungrateful little angstbunny. The font I used in this case is "Copperplate Gothic," also known as "the Death font" for its resemblance to the lettering used in Death's speech in Terry Pratchett books. To the best of my knowledge, it comes with Windows; it's been preinstalled on every computer I've ever owned or messed with. Then I do another layer. I put the titlebar buttons there, which means the options, minimize, windowshade, and close-program buttons at the top of the main window, and windowshade and close-window buttons at the top left corner of the equalizer window. There's also another thing - Winamp calls it the "cuttle bar." I have no idea what they are smoking. It's the "O-A-I-D-V" strip you see along the numbers and vis on some skins. I don't always do it - all of its functions are duplicated somewhere else on the skin - but in this case I will. I'm using the font Sevenet 7 for these letters. Then one more layer - this time for bars. You can get more complicated, but in this case I'm just drawing two lines for the volume and position bars and drawing a rectangle with a line in it for an equalizer bar. I use the template to determine where everything should go. More on those later, in the sections dedicated to these parts. The next layer is for the control buttons in their basic state - many parts of Winamp have both a pressed and an unpressed option. We're going for unpressed, first. Using Sevenet 7 again, I enter the text buttons. On the main window, you have equalizer and playlist toggles and shuffle and loop buttons, while on the equalizer you have the on, auto, and presets buttons. Then I do the control buttons, similar to the controls of a CD player - back one track, play, pause, stop, forward, and eject. This is pretty straighforward - draw little triangles, with lines, pixel-by-pixel, whatever. Then I set up the controls for the equalizer bars, the volume, and the position slider. I select the rectangles, fill them with red selected from Vincent's cape, and bevel them a bit. Then I make one more layer. On this one, I fill in the same areas with the same red, but I reverse the degree of the beveling. Then I reenter the text, in different, brighter colors, for the pressed versions of those, and copy the control buttons, filling them in with black rather than purple, this time. I also entered the pressed version for the "cuttle bar," though I'm likely to do the selected letters for it later, when I create the titlebar.
 I'm aware that many of the things I'm talking about are probably confusing you more - I wasn't even sure what the windowshade mode was until I'd been making skins for a while. I'll explain each weird part as I get to it; just take my word for it, for now, on what you need to do. If you didn't already snag the template, I'd recommend downloading it now. And if you want to follow along with the (not-so-great) skin I've set up, you can download it here - I've included the multi-layer file, with the template over it, and the base of the playlist as well, though it'll be a while before I get to it. |
