Winamp Classic Skins

This file provides the background image for Winamp, sections of the other bitmaps are cropped and layered over this background image to create the various states of "on" and "off", buttons, sliders, etc. Many skin artists (skinners) create their own main.bmp image as well as the other components to make their skin as unique as possible. Although the regions in which the buttons can actually be clicked, the artists have a certain amount of pixels to play with for each element. This will enable the skinner to give the illusion of making smaller more precise controls, transparent controls, or even just big silly dumb ones if they wish. The possibilities are simply endless. The skin components are all bitmaps and therefore *cannot support animation or transparencies* The only way to achieve transparency is to use the overlapping area of main.bmp as the background in the various components.

Titlebar.bmp provides the title bars for the all the various skinned windows of Winamp.

• The first of the bars are the graphics for Winamp's main window when that window has focus (the current window on your desktop is said to have the 'focus', and on that window the currently selected control also has the 'focus').
• The second bar is the main window's title bar when it does not have the focus.
• The third and fourth bars provide the graphics for Winamp running in Window Shade mode.
• The fifth and sixth bars are special. They provide the graphics for the title bar when the Winamp Easter Egg is active. (Easter Eggs are usually useless aspects of a piece of software that the software developers include as a joke or to give credit to something. It's just the programmers trying to have a little fun. Do not worry about these last two bars for now.)

To the left of the title bars are a selection of graphics for the windows buttons in their various states.

• The top row consists of the images for system menu (a.k.a. Winamp's Main Menu), the minimize button, as well as the close button in it's normal state (the way the buttons would look if they weren't clicked).

• The second row consists of the same set of buttons, however in the pressed state (the way the buttons would look if they were clicked).
• The third row is the graphics for the WindowShade button where the left image is the image of the button not pressed, and the left is the image of the button pressed.
• The fourth row contains the images for the button that restores Winamp or its various windows from WindowShade mode to its expanded form, the images being in the same order, the left being not pressed, and the right being the pressed state.
• The fifth and final row consists of the images that create the progress bar for Winamp when Winamp is in WindowShade mode. The first part of the row consists of the image for which the seek bar rests in, followed by the slider in various states.

When modifying the title bar it's important to remember that if you change the appearance of your buttons in the main title bar images, you should also change all the graphics that are relevant to the title bar to match so that they don't look out of place when you press them and remove the focus from the button you had just pressed. Also note that you can not add graphics for components that do not exist, for example adding a spot in WindowShade mode for track title scrolling would not make sense, due to the fact that Winamp wasn't coded with that in mind, leaving that spot you created blank.

• The top row is the (repeat) loop and shuffle in the off state.
• The second row, are the loop and shuffle button in the off, clicked state(the button being pressed while the shuffle/loop buttons were in the off state).
• The third row is loop and shuffle button in the on state, and the fourth row are the buttons being clicked in the on state.

The bottom four images make up the graphics for the Equalizer and Playlist editor buttons in both two states. The first is the Equalizer button in the off state. The second button is the Playlist button in the off state. The third is the Equalizer off state and pressed at the same time. The fourth being the Playlist button in the same state. The next row is the exact same thing, however, instead of the buttons being in the off state, they are on.

The same conditions in regards to transparency that apply for the Cbuttons.bmp image apply for this image as well.

The posbar.bmp, shown here enlarged, provides the track for the song position slider. At the right side of the image, the song seek slider is shown in both states, pressed and not pressed.

The playpaus.bmp file provides indicators that the file being played is playing, paused or stopped. The final item shows whether the file is synchronized or buffered or a break in transmission has been found.

The numbers.bmp file provides the images for displaying the numbers used in the time display, located directly above the visualizations area.

Compared to what it takes to skin the main window, the Equalizer window is far simpler. The Equalizer is composed of two bitmaps, the first being Eqmain.bmp.

• The first item in the image is the blank background of Equalizer window that, once running, will have the button graphics layered over it, just like in the case of main.bmp.
• Below the graphic of the Equalizer background, there is a set of buttons. The leftmost button graphics, one atop the other, is for the close button for the Equalizer window. The one on top is the normal, unlicked state, as the other is the pressed, or clicked state for the close button.
• To the right of the close buttons are the Equalizer On and Auto buttons in their four states (Off, On, Off-Pressed, On-Pressed).
• Below the graphics of the buttons, there are the title bars, in both states, selected as well as unselected.
• This is now followed by the slider that allows you to control EQ settings in both the selected and unselected states at the begining of the next row. To the right of the slider button, you see as set of graphics, which go from green to red. This set of graphics create one of the bands that will be placed in each part of the 10 bands of the Equalizer window, one of them is also used for the PreAmp slider.
• Next, to the right of the equalizer bars are the two states of the Preset button, both pressed and not pressed.

The last row of images will require you to take a closer look:

• This graphic provides the background for the EQ spline, which shows you what position the settings are for the equalizer bands.
• To the right is the rainbow strip, that graphic gives the colors palete for the equalizer spline graph.

Towards the center of the Eqmain.bmp, there are the title bars, both active and inactive modes.

• If you notice, there is a button to cause the Equalizer to enter WindowShade mode, however, there is no button for when you press it down, that little graphic is within the other file that creates the EQ window called Eq_ex.bmp.

• At the top of the Eq_ex.bmp file, there are the two title bars with Winamp's EQ in WindowShade mode. Notice that there are little tracks for which the volume and balance controls rest in.
• The next row contains the graphics for both sliders, one for the volume, and the other for the balance. This is then followed by the pressed or clicked version of the WindowShade mode graphic.
• To the right of that graphic, we have un-clicked version of the close button.
• Finally the next row contains the graphic for the clicked version of the maximize (from WindowShade) button, as well as the clicked version of the close button for the Equalizer.

Check it out, it's the playlist window:

Despite being made from only one image file, the Playlist skin is actually fairly complex due to the fact that it is a fully resizable window.

The explanation for this window is fairly complicated due to the randomness of the various components layed out through out the image, so please bear with me.

The next row contains the same set of graphics except that they are the variation that is displayed when the Playlist editor does not have focus, or is the inactive window.

The first two graphics in this next row are for the vertical stretching of the Playlist editor window. The leftmost graphic is for the left side of the Playlist window, and the one to its right allows the right side of the editor to stretch. To the right of those two graphics are the images for the clicked version of the close button with the clicked version of the WindowShade button to its right. Directly beneath those buttons are the un-clicked and clicked versions of the Playlist editor's vertical scrollbar button. To the right of those button images are the graphics necessary for the WindowShade mode of the Playlist Editor.

There are two rows of images that compose the WindowShade mode. The top set of images make up the leftmost side of the WindowShaded version of the Playlist Editor, followed by the rightmost part of the editor. Directly beneath the image that makes the left side is the graphic necessary for the stretching of the WindowShaded Playlist window. To the right of that is the inactive version of the right side of the editor.

Beneath the WindowShade mode graphics are two fairly large graphics that create the bottom side of the Playlist Editor window while in non-WindowShade mode. The left one consists of button controls for the Playlist Editor when not in use. The right graphic is the image for the right side of the Playlist with the time displays, player controls, as well as the window resizing control.

The next set of graphics are all the buttons in both states, pressed and not pressed, that allow you to modify the Playlist. They are all self explanatory in what they do. These images are individually layed over the Playlist window. Note: transparencies are not supported.

• The first component in the image, in the upper left-hand corner, is the close button in a pressed state. This close button when pressed will close the AVS window as well as turn off the plug-in.
• The next graphic, directly to the right of it, is the upper left most section of the AVS title bar. Be sure not to allow any text to go past the end of the allowed graphic size due to the fact that it will be displayed incorrectly.
• Directly to the left of that graphic is the graphic of the title bar which is used to tile horizontally. This graphic should be symmetrical due to the fact that as the AVS window is stretched horizontally, this image is continually duplicated to give the illusion of a stretching title bar.
• At the upper rightmost section of the image is the close button for the AVS window in an un-pressed state.
• The next row of images contains two really long columns followed by three flat row graphics.
• The leftmost column is the left border of the AVS window followed by the right column being the right border of the AVS window. The next graphic is the leftmost section that composes the bottom of the AVS window.
• To the right of it is a little section which is tiled horizontally as the window stretches, just like its title bar counterpart. * The final graphic, the rightmost graphic of the second row, is the rightmost section which completes the bottom of the AVS window.

The next row of graphics contains what would appear on the bottom left corner of the window which has all the video window buttons in their unpressed states. It also contains (from left to right) the left and right borders of the window for vertical scaling, the pressed close button and all the other buttons in their pressed state. The video buttons are (from left to right) full screen, regular size, double size, TV browser and load file. The next row of graphics has the right corner of the window and the bottom tile. The right corner has the resize button. The bottom tile will be used for horizontal scaling. Along this bottom tile, there will be a box to contain the current playing filename.

Gen.bmp is used for general purpose windows such as the media library and the AVS window in Winamp versions greater than 2.9. General purpose windows are resizeable and tiled. The first row is th active title bar and the second row is the inactive one. The title bar is divided into six parts. The first part is the top left corner of the window. The second is a fixed bitmap graphic which does not repeat in the title bar. The third section is the main title container. The fourth is another non repeating part of the title bar. The fifth section is used when the window is horizontally scaled. The last piece is the top right corner of the window and it contains the close window button. Below the title bars are the left bottom corner and the right bottom corner. The left one is placed above the right one. The right bottom corner has a resize button. To the right of these bottom corners are the sidewalls of the window. The left sidewall comes first then the right one. These sections are used during resizing. next to these is the close window button. next to this close button are the bottom corner sidewalls. These sections are used to join the sidewalls to the left and right bottom corners of the window. The left corner sidewall comes before the right one. The right one contains part of the resizer button from the bottom right corner of the window. Immediately below these corner sidewalls is a graphic for the bottom of the window. This graphic is tiled when the window is resized. Below this are the font of the titlebar. The highlighted one lies above the non highlighted font. The fonts are of variable width but not height. Both the highlighted and non highlighted fonts must be of the same width. The letters are ordered in the standard English alphabet order. There are no foreign characters.

Genex.bmp is used for the buttons and sliders used in the general purpose windows. It also contains the colour controls for this window. The top button is the active state button. The one right below it is the inactive or pressed state button. These buttons have a four pixel wide border around it. The borders stay 4 pixels thick, no matter the size of the buttons or window. Beside these buttons is a row of pixels used to control the various colors and background of the gen window. The coordinates of the pixels are for as follows (y=0):

1. x=48: item background (background to edits, listviews, etc.)
2. x=50: item foreground (text colour of edits, listviews, etc.)
3. x=52: window background (used to set the bg color for the dialog)
4. x=54: button text colour
5. x=56: window text colour
6. x=58: colour of dividers and sunken borders
7. x=60: selection colour for entries inside playlists (nothing else yet)
8. x=62: listview header background colour
9. x=64: listview header text colour
10. x=66: listview header frame top and left colour
11. x=68: listview header frame bottom and right colour
12. x=70: listview header frame colour, when pressed
13. x=72: listview header dead area colour
14. x=74: scrollbar colour #1
15. x=76: scrollbar colour #2
16. x=78: pressed scrollbar colour #1
17. x=80: pressed scrollbar colour #2
18. x=82: scrollbar dead area colour

Below these are the scroll buttons. The first four buttons are these buttons: (from left to right) the scroll up unpressed, scroll down unpressed, scroll up pressed, scroll down pressed. Immediately below these are (from left to right) the scroll left unpressed, scroll right unpressed, scroll left pressed, scroll right pressed. Beside these two rows of scroll buttons are the sliders. The first one from the left is the vertical slider unpressed, the second one is the vertical slider pressed. Beside it, on the top is the horizontal slider unpressed. Below this is the horizontal slider pressed.