http://wiki.winamp.com/api.php?action=feedcontributions&user=Explorer09&feedformat=atomWinamp Developer Wiki - User contributions [en]2024-03-29T00:51:48ZUser contributionsMediaWiki 1.22.3http://wiki.winamp.com/wiki/Submitting_Your_Skin_to_Winamp.comSubmitting Your Skin to Winamp.com2010-07-24T09:12:59Z<p>Explorer09: {{ClassicSkin}}</p>
<hr />
<div>{{ClassicSkin}}<br />
<br />
Once you have an appropriate .WSZ file, the ultimate step is to share your masterpiece with the world. Your skin will join thousands of others on Winamp.com. This will allow people all over the world to enjoy the fruits of your labor. To do this, just follow these steps:<br />
<br />
#Have a classic skin ready in [[WSZ_Files|.WSZ]] format.<br />
#Go to http://www.winamp.com/user/submit<br />
#Select Classic Skins for Winamp 2.x compatible skins and click the "Submit a classic skin" button.<br />
#Fill in the blanks:<br />
## Name: The name of your skin.<br />
## Comment: The short blurb that comes up when people browse the skins page.<br />
## Description: The longer blurb that is displayed when people view the skin details page.<br />
## Categories: Choose Primary and/or Secondary (optional) categories to properly sort your skin.<br />
## Thumbnail: Click on the "Browse" button to find the .gif, .jpg, or .png file on your computer. Note: the image file dimensions should be no larger than 178px by 75px.<br />
## Screenshot: (Full-sized screenshot of your skin.) Click on the "Browse" button to find the .gif, .jpg, or .png file on your computer. Note: the image file dimensions should be no larger than 275px by 600px.<br />
## Skin File: Click on the "Browse" button to find the .WSZ (classic) or .WAL (modern) file on your computer.<br />
#Click the "Submit" button, and...<br />
#Voila! Your skin is on its way to being displayed (after being approved) before the world.<br />
<br />
<br />
==Skin Category Descriptions==<br />
<br />
<br />
The following descriptions are general guidelines. They are not intended to be taken too literally. In the end, it is up to you to decide which categories best fit your skin.<br />
<br />
* Animated: Inspired by cartoons, Japanese comics, or animated films.<br />
* Compact/Utility: Minimalist/tiny/lightweight skins, or skins that server a special utility.<br />
* Computer/OS: Inspired by an operating system's graphical user interface.<br />
* Consumption: Skins inspired by food, beverages, or anything else consumed.<br />
* Cool Devices: Skins made to look like... a cool... device.<br />
* Games: Inspired by any segment of interactive entertainment software.<br />
* Human: Skins based on humans. Aliens - down the hall to the "WTF" room.<br />
* Movies/TV: Featuring screenshots, logos, or other paraphernalia connected to a feature film.<br />
* Music: Inspired by a musical group, instrument or genre.<br />
* Nature: Skins in tune with the natural habitat that surrounds woodland creatures, or the creatures themsevles.<br />
* Retro: Conveys a sense of technologic, cultural or temporal nostalgia.<br />
* Sports/University: Inspired by a sport, sports team, athlete, sporting event, or University.<br />
* Stylish: Experimental skins built for aesthetics and new skinning ideas.<br />
* Transportation: Skins based on cars, buses, trains, planes, camels, seagulls, etc.<br />
* WTF: Skins that defy categorization. You know the type.<br />
* Web Site: Inspired or sponsored by a web site.</div>Explorer09http://wiki.winamp.com/wiki/WSZ_FilesWSZ Files2010-07-24T09:12:39Z<p>Explorer09: {{ClassicSkin}}</p>
<hr />
<div>{{ClassicSkin}}<br />
<br />
==Winamp Skin Zip Files (WSZ)==<br />
<br />
The last step you need to do before unleashing your Skin on the world is to convert it to the WSZ format. How do I do that, you ask? Just follow the following steps:<br />
<br />
#With your trusty zip compression tool of your choice, zip YOUR skin's folder (not the Winamp "Skins" folder) into a .zip file.<br />
#Rename the new file's extension from .zip to .wsz.<br />
#Test it by removing your skin folder, then placing your .WSZ into the Winamp "Skins" folder.<br />
#Run Winamp, then press Alt-S to access the Skin browser. If you see your skin, then everything worked correctly.<br />
#That's it! Pat yourself on the back, then take the next step and submit it to Winamp.com.<br />
<br />
<br />
==WSZ History==<br />
A Winamp skin is composed of 45 files. Most of the files that create a skin are .BMPs (a very common image file type) and a few text files. When skin support was originally implemented, an artist would have to create those skins and place them into a subdirectory of the Winamp Skins folder (usually located in <code>C:\Program Files\Winamp\Skins</code>).<br />
<br />
This started getting messy, because not all of the skin developers were creating subfolders when compressing their skins into a ZIP file for distribution. When an end-user uncompressed the files to the Winamp Skins folder, it would at times overwrite other skins. As a solution, we implemented the functionality into Winamp to read the .ZIP files directly. Then, an end-user would simply place the .ZIP file into their Winamp Skins folder; when using the Skin Browser in Winamp (ALT+S), the skin magically appeared and loaded, if selected.<br />
<br />
This did clean up the mess. However, a new problem then surfaced: The .ZIP file format is a very widely used compression scheme and Winamp was just one of the many dozens of programs available to utilize it. We wanted users to be able to double-click the Skin ZIP file and have Winamp automatically install and load the skin. How do we do that without associating Winamp as the default program for handling skins? Answer: Rename the file extension.<br />
<br />
We simply took all those compressed skins ending with the .ZIP extension and renamed them to end with .WSZ (Winamp Skin Zip). This allowed us to stay with the standard Winamp .ZIP files and not have to convert the thousands of skins available for download on the Internet. Any skins that are submitted to our site with filenames ending with .ZIP are automatically renamed to end with a .WSZ before published.<br />
<br />
Why do all this, you ask? The answer is simple. We wanted to make it so that Winamp would automatically load the skin when a user clicked on a link to download a skin from Internet Explorer, as well as Netscape Navigator. We also wanted to make it so that if a user actually had downloaded the .WSZ file, all they would have to do is double-click it to install it.<br />
<br />
What happens then? Well, when a person installs a .WSZ file, Winamp just copies the file to the Winamp Skins folder so that it can be handled correctly. You can also manually move the .WSZ file into your skin directory and Winamp will recognize it just as well.</div>Explorer09http://wiki.winamp.com/wiki/Editing_the_Configuration_FilesEditing the Configuration Files2010-07-24T09:12:16Z<p>Explorer09: </p>
<hr />
<div>{{ClassicSkin}}<br />
<br />
Any skin file is not complete without first finishing up the configuration files. These configuration files control such things as the background and foreground colors of the Winamp visualizations, or areas that are designated areas to be displayed to the end user. There are three text files that allow you to change these various aspects of Winamp. The first of the three that we will cover is called VisColor.txt.<br />
<br />
==Configuration File | VisColor.txt==<br />
<br />
VisColor.txt is the file that sets the colors for the Visualization panel. It contains 24 lines. Each line is an RGB value followed by a comment. (See RGB for more Info). Here is a brief explanation of the lines:<br />
<br />
* Row 0 is the background color of the visualization area.<br />
* Row 1 is the color of the dots that appear in the visualization area<br />
* Rows 2 through 17 affect the colors of the Spectrum Analyzer. Row 2 is the peak value, the highest part of the graphical bar that is visible. This means that when you hit a high frequency, the top of the bar becomes the color specified. As you move from row to row, you can color each level of the frequency spectrum a different color to signify the peak levels of the frequencies in the file you are playing at that moment.<br />
* Rows 18 to 22 pertain to the oscilloscope colors. They function in the same fashion as the Spectrum Analyzer. Row 18 controls the colors that is displayed at the troughs and the row 22 is the color that is displayed at the crest. Each row between 18 and 22 sets a different level of the whole wave.<br />
* Row 23 gives the color used to mark the last peak value. Let's take a look at what this all means, here are some screenshots with example images to help you get a clearer perspective.<br />
<br />
<br />
[[Image:Vis.gif]]<br />
<br />
The result with row 0 set to 0,0,0 and row 1 set to 255,255,255<br />
<br />
<br />
==Configuration File | Pledit.txt==<br />
<br />
Pledit.txt gives the font colors and font face for the Playlist Editor track listing as well as the MiniBrowser URL display, located at the bottom of the MiniBrowser.<br />
<br />
Here are some sample settings for pledit.txt is:<br />
<br />
'''[Text]'''<br />
<br />
Normal=#FF8924<br />
<br />
Current=#FFFF00<br />
<br />
NormalBG=#1A120A<br />
<br />
SelectedBG=#944E11<br />
<br />
MbFG=#FF8924<br />
<br />
MbBG=#1A120A<br />
<br />
Font=Comic Sans MS<br />
<br />
<br />
The funny six-character values beginning with "#" are hexadecimal RBG values (see Hex RGB). Each row has a different setting:<br />
<br />
* Normal - Color of the regular text (Playlist).<br />
* Current - Color of the current track text (Playlist).<br />
* NormalBG - Background for normal text (Playlist).<br />
* SelectedBG - Background for the selected text (Playlist)<br />
* MbFG - Text color in the MiniBrowser status bar. (MiniBrowser)<br />
* MbBG - Text background in the MiniBrowser status bar. (MiniBrowser)<br />
* Font - Font face that's used in both windows<br />
<br />
==Configuration File | Region.txt==<br />
<br />
So you want a skin with areas that are simply put, transparent? Well, this is a highly tricky task. The file you need is called region.txt and the way to do it is a lot like playing connect-the-dots.<br />
<br />
Region.txt provides a set of names such as Normal, WindowShade and so fourth. These set points define how many points make up each window. Another set defines how to draw the picture over Winamp.<br />
<br />
Region.txt has 4 regions (the sets). They are delimited with the following tags:<br />
<br />
<br />
[Normal]<br />
<br />
[WindowShade]<br />
<br />
[Equalizer]<br />
<br />
[EqualizerWS]<br />
<br />
<br />
Each of these provides a list that constist of two parts. The first gives the number of points that make up a region. The second is a list of the points used to make those regions.<br />
<br />
<br />
The lines are:<br />
<br />
NumPoints=<br />
<br />
PointList=<br />
<br />
<br />
The NumPoints list must be on a single line with comma separated numbers.<br />
<br />
Example: NumPoints = 4, 4<br />
<br />
Each number, x, says to read the next x points of the list and plot the region they define. The points list is comma seperated pairs of x,y co-ordinates. For example:<br />
<br />
<br />
[Normal]<br />
<br />
NumPoints = 4, 4<br />
<br />
PointList = 0,1, 275,1, 275,14, 0,14, 3,15,<br />
<br />
272,15, 272,113, 3,113<br />
<br />
<br />
Defines two rectangular regions to be drawn. For more information read the comments in the region.txt file in the base skin. You will find a little more explanation in this file. The only item missing is the EqualizerWS group which is new and will be defined at a later time. "Normal" defines the regions drawn for the main window, WindowShade is the regions drawn in the windowshade mode. Equalizer and EqualizerWS are the same as above. Use the examples above to work out the other points. <br />
<br />
<br />
==Configuration File | RGB==<br />
<br />
<br />
RGB stands for "Red, Green, Blue". A certain combination of each of these colors at various percentages can make millions of different colors. For example, combining 100% Blue and 100% Green will make the brightest achievable Yellow. Using this model, RGB has become a method of defining color.<br />
<br />
Since a computer displays light using pixels which are really three lights one Red one Green and one Blue (well close enough description for our purposes), we can define a color as the amount of red, green and blue. The ranges we use to help put into perceptive for each of the colors on a computer, we use 0 all the way to 255. Basically, that means, there are 256 different shades of each of those primary three colors, and any combination of those three shades will result in a color. For example, 128, 128, and 128 would make a gray in about the middle of the spectrum. Here are the different values of each of those colors.<br />
<br />
<br />
[[Image:Skins-classic-config.gif]]<br />
<br />
<br />
==Configuration File | Hexadecimal==<br />
<br />
<br />
Hexadecimal RGB numbers are exactly the same as RGB, except the value is represented in Hexadecimal notation. Digit position has less meaning (no hundreds tens and units). And each digit can be 0-9 then A-F. To convert from Hex to Decimal use Windows Calculator in Scientific mode.</div>Explorer09http://wiki.winamp.com/wiki/Creating_Custom_CursorsCreating Custom Cursors2010-07-24T09:11:58Z<p>Explorer09: {{ClassicSkin}}</p>
<hr />
<div>{{ClassicSkin}}<br />
<br />
A commonly overlooked skinning property is Winamp cursors. That is, the little arrow that you use to navigate through Winamp doesn't necessarily have to be an arrow. There are 27 different cursor states that Winamp can be in. Wouldn't it be cool if each one had specialized art that matched your skin? All you would need is an icon editing tool, and that idea becomes reality. <br />
<br />
==Cursor Filenames==<br />
<br />
The Base skin comes with the following cursors:<br />
<br />
*CLOSE.CUR: (Main Menu X)<br />
*EQCLOSE.CUR: (EQ Close)<br />
*EQNORMAL.CUR: (EQ Normal)<br />
*EQSLID.CUR: (EQ Up and Down Slides)<br />
*EQTITLE.CUR: (EQ Titlebar)<br />
*MAINMENU.CUR: (Main Menu Menu Button-topleft)<br />
*MIN.CUR: (Main Menu Minimize Button)<br />
*NORMAL.CUR: (Main Menu Normal Arrow)<br />
*PCLOSE.CUR: (Playlist Close)<br />
*PNORMAL.CUR: (Playlist Normal)<br />
*POSBAR.CUR: (Main Menu Song Position)<br />
*PSIZE.CUR: (Playlist Expansion Mode)<br />
*PTBAR.CUR: (Playlist Top Bar)<br />
*PVSCROLL.CUR: (Playlist vertical button)<br />
*PWINBUT.CUR: (Playlist Windowshade Mode)<br />
*PWSNORM.CUR: (Playlist Windowshade Normal)<br />
*PWSSIZE.CUR: (Playlist Windowshade Size Explainsion)<br />
*SONGNAME.CUR: (Song Name Scroll)<br />
*TITLEBAR.CUR: (Main Menu Name Bar)<br />
*VOLBAL.CUR: (Main Menu Volume Balance)<br />
*VOLBAR.CUR: (Main Menu Volume Switch)<br />
*WINBUT.CUR: (Main Menu Windowshade Mode)<br />
*WSCLOSE.CUR: (Windowshade Close)<br />
*WSMIN.CUR: (WindowShade Main Minimize)<br />
*WSNORMAL.CUR: (Windowshade Normal)<br />
*WSPOSBAR.CUR: (Windowshade Song Position)<br />
*WSWINBUT.CUR: (Windowshade Exit Windowshade Mode)</div>Explorer09http://wiki.winamp.com/wiki/EqualizerEqualizer2010-07-24T09:11:27Z<p>Explorer09: {{ClassicSkin}}</p>
<hr />
<div>{{ClassicSkin}}<br />
<br />
==Skinning The Equalizer Window==<br />
<br />
Here's the finished Winamp Equalizer:<br />
<br />
<br />
[[Image:Equalizer.gif]]<br />
<br />
<br />
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.<br />
<br />
<br />
[[Image:Eqmain.gif]]<br />
<br />
'''Eqmain.bmp'''<br />
<br />
<br />
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.<br />
<br />
To the right of the close buttons are the Equalizer On and Auto buttons in their four states (Off, On, Off-Pressed, On-Pressed).<br />
<br />
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.<br />
<br />
Next, to the right of the equalizer bars are the two states of the Preset button, both pressed and not pressed.<br />
<br />
The last row of images will require you to take a closer look:<br />
<br />
<br />
[[Image:Eq.gif]]<br />
<br />
<br />
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.<br />
<br />
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.<br />
<br />
<br />
[[Image:Eq_ex.gif]]<br />
<br />
'''Eq_ex.bmp'''<br />
<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.</div>Explorer09http://wiki.winamp.com/wiki/AVSAVS2010-07-24T09:11:15Z<p>Explorer09: {{ClassicSkin}}</p>
<hr />
<div>{{ClassicSkin}}<br />
<br />
==Skinning The AVS Window==<br />
<br />
This file is layed out much like the other Winamp bitmaps. Once again, the image is divided into various segments only divided by spaces between the sections. 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.<br />
<br />
<br />
<br />
[[Image:Avs.gif]]<br />
<br />
'''avs.bmp'''<br />
<br />
<br />
<br />
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.<br />
<br />
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.<br />
<br />
At the upper rightmost section of the image is the close button for the AVS window in an un-pressed state.<br />
<br />
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.<br />
<br />
That wasn't too tough, was it? Not at all! This should probably take no more than an hour or so to skin and creates an all around fuller affect if skinned with the same "scheme" of the Winamp interface.</div>Explorer09http://wiki.winamp.com/wiki/Mini-browserMini-browser2010-07-24T09:11:04Z<p>Explorer09: {{ClassicSkin}}</p>
<hr />
<div>{{ClassicSkin}}<br />
<br />
==Skinning The Minibrowser Window (Not used in Winamp 5.x)==<br />
<br />
<br />
[[Image:Mb.gif]]<br />
<br />
<br />
'''Note:''' The Minibrowser is only used pre-Winamp 2.9. But if you still want to skin it, go ahead. The Minibrowser skin is similar to the Playlist skin in many aspects. Both skins are designed to be scaleable due to the fact that most web content doesn't fit into the default viewable area.<br />
<br />
The file you will be working with is called mb.bmp. This file contains all the graphics you need to complete in order to skin the Minibrowser. The top two rows of graphics within mb.bmp allow you to create the titlebar of the Minibrowser. The first graphic on the page is the top left corner of the Minibrowser window. This is then followed by the graphic that generates the title of the window. NOTE: this graphic is centered within the window. We then come to the little graphic that is tiled across for every time the window is scaled horizontally. Finally we come to the graphic that completes the titlebar with the top right corner of the window with he close button in it's default state. The next row is all the same graphics, however, all the images are a little dimmed to demonstrate to the end user that the window is now inactive or the window that is not in focus.<br />
<br />
<br />
[[Image:Mb2.gif]]<br />
<br />
'''mb.bmp'''</div>Explorer09http://wiki.winamp.com/wiki/PlaylistPlaylist2010-07-24T09:10:59Z<p>Explorer09: {{ClassicSkin}}</p>
<hr />
<div>{{ClassicSkin}}<br />
<br />
==Skinning the Playlist Window==<br />
<br />
Check it out, it's the playlist window:<br />
<br />
[[Image:Pl.gif]]<br />
<br />
<br />
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.<br />
<br />
<br />
[[Image:Pledit.gif]]<br />
<br />
'''pledit.bmp'''<br />
<br />
<br />
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.<br />
<br />
The top section is fairly straightforward. The upper left image is the top left corner of the Playlist window. This is then followed by the graphic that creates the title for the Playlist window, please remember that this title is always centered within the Playlist Editor window. To it's right is a little part of the titlebar which is tiled all across for every time the window is stretched more and more horizontally. Next would be the default state for the WindowShade mode and close buttons, which is then followed by a graphic which spans two rows, this is a graphic for the bottom edge of the Playlist window which is also tiled as the window is stretched horizontally. Finally to the right of that is a fairly large graphic which once again spans two rows. This graphic is the background for the secondary Visualization area. This area only comes to life when the Winamp Main Window has been disabled.<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.</div>Explorer09http://wiki.winamp.com/wiki/For_Winamp_2.9/5.xFor Winamp 2.9/5.x2010-07-24T09:10:03Z<p>Explorer09: {{ClassicSkin}}</p>
<hr />
<div>{{ClassicSkin}}<br />
<br />
==Skinning Additional Winamp 2.9/5.x Windows==<br />
<br />
===The Video Window===<br />
<br />
<br />
<br />
[[Image:Video_window.gif]]<br />
<br />
<br />
This file is for the Video window. It is resizeable and tiled, just like the playlist window. The titlebar occupies the two top rows. It's just like the playlist titlebar without the winshade mode and missing the winshade button. The close button is in the default state, beside the little graphic that is tiled across everytime the window is scaled horizontally. <br />
<br />
<br />
<br />
[[Image:Video.gif]]<br />
<br />
'''video.bmp'''<br />
<br />
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.<br />
<br />
==="Gen" Windows===<br />
<br />
<br />
[[Image:Gen.gif]]<br />
<br />
'''gen.bmp'''<br />
<br />
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. <br />
<br />
<br />
<br />
[[Image:Genex.gif]]<br />
<br />
'''genex.bmp'''<br />
<br />
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):<br />
<br />
# x=48: item background (background to edits, listviews, etc.)<br />
# x=50: item foreground (text colour of edits, listviews, etc.)<br />
# x=52: window background (used to set the bg color for the dialog)<br />
# x=54: button text colour<br />
# x=56: window text colour<br />
# x=58: colour of dividers and sunken borders<br />
# x=60: selection colour for entries inside playlists (nothing else yet)<br />
# x=62: listview header background colour<br />
# x=64: listview header text colour<br />
# x=66: listview header frame top and left colour<br />
# x=68: listview header frame bottom and right colour<br />
# x=70: listview header frame colour, when pressed<br />
# x=72: listview header dead area colour<br />
# x=74: scrollbar colour #1<br />
# x=76: scrollbar colour #2<br />
# x=78: pressed scrollbar colour #1<br />
# x=80: pressed scrollbar colour #2<br />
# x=82: scrollbar dead area colour <br />
<br />
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.</div>Explorer09http://wiki.winamp.com/wiki/The_Base_SkinThe Base Skin2010-07-24T09:09:18Z<p>Explorer09: {{ClassicSkin}}</p>
<hr />
<div>{{ClassicSkin}}<br />
<br />
<!-- ==The Winamp Base Skin== --><br />
The Base Skin is a copy of the default skin built into Winamp. All you have to do to skin Winamp is paint over or replace a skin component with your own design and, ''voilà'', your own personalized version of Winamp. You can replace any or all of the components in a skin. Anything you don't replace will use its Base Skin counterpart. Naturally, the Base Skin components will look out of place, so we suggest changing every file.<br />
<br />
The Base Skin can be split into six logical segments, consisting of the following files:<br />
<br />
1) [[Main]]:<br />
:Main.bmp: Main Frame<br />
:Titlebar.bmp: Titlebar<br />
:Cbuttons.bmp: Control Buttons<br />
:Shufrep.bmp: Shuffle and Repeat Buttons<br />
:Volume.bmp: Volume Bar<br />
:Balance.bmp: Balance Bar<br />
:Monoster.bmp: Mono/Stereo Indicators<br />
:Posbar.bmp: Position Bar<br />
:Playpaus.bmp: Play/Paused Indicators<br />
:Numbers.bmp: Digit Reference<br />
:Text.bmp: Text Reference<br />
<br />
2) [[Equalizer]]:<br />
:Eqmain.bmp: Equalizer Main Frame<br />
:Eq_ex.bmp: Equalizer Window Shade Bar<br />
<br />
3) [[Playlist]]:<br />
:Pledit.bmp: Playlist Editor Frame/Buttons<br />
<br />
4) [[Mini-browser]]:<br />
:Mb.bmp: Mini-browser Frame<br />
<br />
5) [[AVS]]:<br />
:Avs.bmp: AVS Frame<br />
<br />
6) [[For Winamp 2.9/5.x]]: <!-- Thanks to Jellby --><br />
:Video.bmp: Video Window<br />
:Gen.bmp: General Purpose Window<br />
:Genex.bmp: General Purpose Buttons and Sliders</div>Explorer09http://wiki.winamp.com/wiki/MainMain2010-07-24T09:08:42Z<p>Explorer09: {{ClassicSkin}}</p>
<hr />
<div>{{ClassicSkin}}<br />
<br />
<br />
==Skinning The Main Window==<br />
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. <br />
<br />
<br />
[[Image:Winamp.gif]]<br />
<br />
<br />
*Main.bmp<br />
*Titlebar.bmp<br />
*CButtons.bmp<br />
*ShufRep.bmp<br />
*Volume.bmp<br />
*Balance.bmp<br />
*MonoSter.bmp<br />
*Posbar.bmp<br />
*Playpaus.bmp<br />
*Numbers.bmp<br />
*Text.bmp<br />
<br />
<br />
===Winamp Skins | Main.bmp===<br />
<br />
<br />
[[Image:main.gif]]<br />
<br />
<br />
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.<br />
<br />
<br />
<br />
===Winamp Skins | Titlebar.bmp===<br />
<br />
<br />
[[Image:titlebar.gif]]<br />
<br />
<br />
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.)<br />
<br />
To the left of the title bars are a selection of graphics for the windows buttons in their various states.<br />
<br />
<br />
[[Image:winbut.gif]]<br />
<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
<br />
<br />
===Winamp Skins | ShufRep.bmp===<br />
<br />
<br />
<br />
[[Image:Cbuttons.gif]]<br />
<br />
<br />
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.<br />
<br />
===Winamp Skins | ShufRep.bmp===<br />
<br />
<br />
<br />
[[Image:Shufrep.gif]]<br />
<br />
<br />
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.<br />
<br />
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.<br />
<br />
The same conditions in regards to transparency that apply for the Cbuttons.bmp image apply for this image as well.<br />
<br />
<br />
<br />
<br />
===Winamp Skins | Volume.bmp===<br />
<br />
<br />
[[Image:Volume.gif]]<br />
<br />
<br />
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.<br />
<br />
<br />
<br />
===Winamp Skins | Balance.bmp===<br />
<br />
<br />
[[Image:Bal.gif]]<br />
<br />
<br />
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.<br />
<br />
<br />
<br />
===Winamp Skins | MonoSter.bmp===<br />
<br />
<br />
[[Image:Monoster.gif]]<br />
<br />
<br />
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.<br />
<br />
<br />
<br />
===Winamp Skins | Posbar.bmp===<br />
<br />
<br />
[[Image:Posbar.gif]]<br />
<br />
<br />
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.<br />
<br />
<br />
<br />
===Winamp Skins | Playpaus.bmp===<br />
<br />
<br />
[[Image:playpaus.gif]]<br />
<br />
<br />
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.<br />
<br />
===Winamp Skins | Numbers.bmp===<br />
<br />
<br />
[[Image:Numbers.gif]]<br />
<br />
<br />
The numbers.bmp file provides the images for displaying the numbers used in the time display, located directly above the visualizations area.<br />
<br />
<br />
<br />
===Winamp Skins | Text.bmp===<br />
<br />
<br />
[[Image:Text.gif]]<br />
<br />
<br />
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.<br />
<nowiki>Insert non-formatted text here</nowiki></div>Explorer09http://wiki.winamp.com/wiki/Template:ClassicSkinTemplate:ClassicSkin2010-07-24T09:08:09Z<p>Explorer09: New page: Creating a Classic Skin: ''Introduction'' → The Base Skin → Paint the Main Window → Paint the Equalizer Window → [[Playlist|Pa...</p>
<hr />
<div>Creating a Classic Skin: ''[[Creating Classic Skins|Introduction]]'' → [[The Base Skin]] → [[Main|Paint the Main Window]] → [[Equalizer|Paint the Equalizer Window]] → [[Playlist|Paint the Playlist Window]] → [[Mini-browser|Paint the Minibrowser Window]] → [[AVS|Paint the AVS Window]] → [[For_Winamp_2.9/5.x|Paint the Winamp 2.9/5.x Windows]] → [[Creating Custom Cursors|Create Custom Cursors]] → [[Editing the Configuration Files|Edit the Configuration Files]] → [[WSZ Files|Compress to .WSZ format]] → [[Submitting Your Skin to Winamp.com|Submit to Winamp.com]]</div>Explorer09