Main Window

    The Winamp main window is probably the most complex
window, graphics wise, of all its windows.  There are
many things going on in that one window at all times.
Each part of the main window is divided up into various
bitmap images.  Here is a list of the images below that
actually create the main window.

          Main.bmp
          Title.bmp
          CButtons.bmp
          ShufRep.bmp
          Volume.bmp
          Balance.bmp
          MonoSter.bmp
          Posbar.bmp
          Playpaus.bmp
          Numbers.bmp
          Text.bmp


Winamp's Main Window | Main.bmp

    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.



Winamp Skins | Titlebar.bmp

     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 right 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.

To the right of the title bars are the graphics for the
CuttleBar, which is a little strip of buttons to the
left of the visualization area of the Winamp main
window.  At the top the strip is shown in it's
un-pressed state.  To the right of the first strip is
a version of the strip with all the labels removed,
this is for the people who turn off the CuttleBar in
Winamp's Preferences window.  The next row of strips
are simply the different states of the CuttleBar with
copy of the strip in each of it's five states, one
state for each button being pressed.

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.



Winamp Skins | Cbuttons.bmp

    The cbuttons.bmp image provides the images for
Winamp's playback control buttons.  The top row
displays the buttons un-pressed or in their normal
state, the second row of graphics are the same buttons
except in the pressed state.  Remember when skinning
this set of components that transparency does not
exist, if the button is incorporated into the
background, you will have to place the background into
the cbuttons.bmp.



Winamp Skins | ShufRep.bmp

    Shufrep.bmp provides the graphics for both states
of the Shuffle-Play button, Play/Loop button (Repeat),
Equalizer button as well as the Playlist button.  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.



Winamp Skins | Volume.bmp

    The volume.bmp file (partial shown here enlarged at
the left) contains a set of of bars and two slider
graphics.  Depending on how high or low the level of
the volume is, Winamp selects one of the bars to
demonstrate the level at which the volume is currently
at.  If the volume is all the way down, it displays the
more green bars, if all the way up, it displays the
more yellow bars.  The first bar is the volume at its
lowest level, the last bar is the volume at its maximum
level.  Fiddle with these graphics yourselves to find
out which bar is which level.  The bottom contains the
sliders control images.  The first image being the
slider, which is in the clicked, the second being in
the un-clicked state.



Winamp Skins | Balance.bmp

    Balance.bmp works virtually identitical to
volume.bmp, however, the images in balance need to
illustrate the volume coming from either the left,
right, or both speakers.  This is done by swaying from
green to red when moving the slider from one of the
sides towards center.  Simply color all the bars the
way you would do for the volume.bmp and the outcome
should be the same.



Winamp Skins | MonoSter.bmp

    Monoster.bmp provides the indication that the audio
source is running in Stereo or Mono mode.  The top row
shows the "in stereo" indicator as well as the "in
mono", indicator.  The second row shows the "stereo
off" and "mono off" indicators.  When Winamp is playing
in stereo sound, the "stereo on" with the "mono off"
indicators are displayed.  When the audio is in mono,
the opposite is displayed.



Winamp Skins | Posbar.bmp

    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.



Winamp Skins | Playpaus.bmp

    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.



Winamp Skins | Numbers.bmp

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



Winamp Skins | Text.bmp

    Text.bmp is performs the same job that numbers.bmp,
however, this image isn't as limited in use as
numbers.bmp.  Text.bmp provides all the text that is
used for the track area, Playlist editor, and anywhere
else that Winamp uses text within the skinned
interface.
