From Winamp Developer Wiki
Jump to: navigation, search

Creating a Classic Skin: IntroductionThe Base SkinPaint the Main WindowPaint the Equalizer WindowPaint the Playlist WindowPaint the Minibrowser WindowPaint the AVS WindowPaint the Winamp 2.9/5.x WindowsCreate Custom CursorsEdit the Configuration FilesCompress to .WSZ formatSubmit to Winamp.com

Skinning The Equalizer Window

Here's the finished Winamp Equalizer:


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.

File:Eq ex.gif


Eq_ex.bmp was an image added to the skins later on, it is the file that illustrates to the user the controls that are present in Winamp's Equalizer while in WindowShade mode. The EQ has two controls while in WindowShade, the volume, to the left, and the balance, which is to the right.

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.