The next step is the part I always call "shufrep," in my head. I don't have much cause to talk about it with other people. Their eyes tend to glaze over on the rare occasions that I try. You see this made non-functional a lot, sometimes because the image is too pretty to cover, sometimes because one of the buttons would be in somebody's ear or right in the middle of their cleavage or it'd cover up a cool pendant, sometimes because the area's too high-contrast for the buttons to show up easily. Sometimes because people don't like positioning images so that they can make all the parts of a skin functional. There are four buttons contained in this file. Two toggle the equalizer and the playlist on and off; the other two determine if you've got your playlist set on shuffle or not, and whether or not it's set to loop. Below, see the shufrep from Winamp's default skin.
 They're not completely useless like the balance bar, so I recommend making them functional if if it doesn't create problems with the image. In this case, it won't. Each button in the shufrep has four versions; one for when it's not pressed, two transitional ones, and one for when it's pressed. You can use this for minimal animation - a lot of times, I have the buttons fade in and out - but to simplify things I'm just going to show how to do pressed, and un-pressed. Start with the loop buttons. Copy your unpressed version of those, and paste it in the first two - loop is, as you can see, the column to the right, even though loop's to the left on the skin. Not my idea of intuitive, but whatever. Now go to your pressed version - copy it, and then paste it in the second two of the same column. Shuffle's a bit weirder. On your template, you see what appears to be two distinct buttons - well, on shuffle, you need to go over one pixel, into what had been the leftmost pixel of the loop button. Copy your selection, and paste it into the shuffle column, the same way you did with the loop buttons. Next are the equalizer and playlist toggles. I intend for my skins to be viewed with both of those open, so in general, I tend to make the pressed version (the one meaning those windows are open) lighter and less obtrusive than the unpressed (meaning they're closed.) Again, as with the shuffle and loop buttons, copy and paste four times; just remember that these two are a unit, no shuffling or reversing involved, and that they're arranged by rows, with the top row the pressed version, bottom row unpressed.
 Save that, and you've got five parts in the bag. See how much progess you're making? Next stop is a simpler one - the position bar. That's the long bar in the middle of the main window that goes nearly the full width of the skin. Hide any layers with sliders, and select, in the case of this Vincent skin, the top seven pixels of the bar area. You may not need the top seven - you may want the top three, or six, or whatever. That's how you determine the size of the position bar. You don't need to use the full allotted area.
 So select as much posbar as you need, and the entire width of the bar, then copy (this is almost certainly a copy-merged, since you probably wanted the bar on a separate layer) and paste as a new image. Now increase the size of it a bit. If you're using PSP 7, use "Canvas Size" and make the image 307 x (however tall you want it to be.) That leaves you 59 pixels for the other part - the controller. Copy it, and paste it into the blank area - the unpressed version goes to the left, closest to the bar itself, and the unpressed version into the other space. You should have one pixel between them, and the controllers are 29 x (whatever height you chose.) Now save it as posbar.bmp, and that's six parts completed, out of seventeen.
The size of the volume file determines how big the controller will be. You don't ever change the size you copy and paste for the bar itself - but if you want a narrower controller, you need to cut a pixel or two off the bottom. I currently have it set for a seven-pixel-high volume control, but I have many skins with narrower ones if you want to compare and see how I did it. A few details of volume design... The full, purple-outlined volume bar in the template is the size of the volume bar. It all needs to be included when you start copying and pasting. The purple square inside it is the maximum allowed area for the volume control - the control starts one pixel below the top of the volume bar area and, at its widest, ends one pixel above it. The volume bar also has three pixels of dead space, at the far right - they need to be included when copying from your base, but the volume doesn't go that far. Next major moving part is the file called cbuttons.bmp. I get maybe the most questions about this - at least, I think it's about this. "How do I draw in the buttons?" Um, dude. However you want. Triangles are traditional - just look at your CD player. In a couple of my early ones, I just selected the shapes on the template - you can see that method on my second skin. After that I started drawing my own, usually creating them by making a selection I'd then fill in. Sometimes I'd use characters from the font I was using on the skin. I'd draw lines. Whatever. Do what you think best. In this case, I used fairly standard small buttons that I first created long ago and have been cannibalizing off myself ever since. The pressed versions are simply a different color - you can do that other ways, say by filling in portions of them when they're pressed, moving them, reversing the direction of a bevel (which is how I showed pressed vs. unpressed in the volume and position bars) or anything else you can think of and implement. However, you really should have a distinct version for a pressed button, if at all possible.
 Next stop is the number file, nums_ex, which shows in the clock at the top of the skin. Again, the background color is the color of the boxes at the top. You just need to create a 108 x 13 box and enter your numbers in the font you're using for your skin, making certain that your numbers are no more than 9 x 13 pixels. Below is the example file for this Vincent skin; note that the numbers go from zero to nine, then you have a blank box, and another with a minus sign. If you have your clock count backwards, the minus sign displays to the left of the clock. The box just to the left of the nine displays there otherwise, and if you put the song on pause, whatever's in that box will flash in place of all the numbers.
 The last part in this stage of the tutorial is the viscolor.txt. I used to edit these by hand, apparently because I hated life, or something. I don't know. Anyway, you don't have to. Download the Vis Toolkit here, or if for some reason you don't like it, try one of the others. The vis consists of three parts - the background, the spectrum analyzer, and the oscilloscope. The background uses two colors - one is the main, the other consists of dots laid over it in a sort of grid. I usually set the spectrum analyzer as a gradient, often sort of fading into the background color - since I normally use the spectrum analyzer, with thin bands and set to fire style, that's what mine are designed for. I'll select a few colors from it for the oscilloscope, and then another color from it, distinct from the background, for the peaks. Knowing all that, it should be fairly simple to work out how to use the viscolor editors - and if it's not, trial and error at least should be fairly easy. The only remaining parts of the main window are the titlebar and the play/pause indicator, the most complex part of the main window. Those will be addressed in the next section. |
Next up is the volume. It's fairly easy, but a bit tedious. That image out to the right is it. Winamp designed it with an eye to having it change as you increase the volume, but few people bother with that. By which I mean "I never do, and I just checked some of my downloaded skins and they don't either." There are other tricks you can wring out of that annoying format to it, but normally, you're just going to copy the volume area, and paste it into the base you're using... over and over and over. Bleh. Once you've done that, it's time for the controllers. The unpressed one goes to the right, pressed to the left. Opposite of the way the posbar was set up. Winamp likes to keep you on your toes. In this, as in the posbar, I bevelled the controller 315 degrees for the default state, then 135 for the pressed version.