Skin Developer
From Winamp Developer Wiki
Breadcrumb -- Wiki Main : Skin Developer : Visual Developer : Plug-in Developer : Articles Page : FAQ : Glossary
Contents |
Skins Overview
To put it as simply as possible, skins change the way your Winamp player looks. If you want to get fancy and say that it changes the "User Interface" then you can, but really all you need to know to get you started is if you download a new skin, Winamp will put on a little mask and pretend to look different.
Tools
Before creating a complete skin, you will need the following tools. There are some suggestions below, but we don't necessarily endorse or require you to use any of them. We leave you to choose one that you're most comfortable with.
Bitmap Editor
How else will you "paint" your skins? Must be able to recognize the .BMP and .PNG format.
eg. MS Paint, Corel Paint Shop Pro, Adobe Photoshop, Paint.NET, GIMP
Text Editor
For use in configuring the fonts and colors of the Mini-browser and Playlist editor. Also used if you do any transparency.
eg. MS Notepad, TextPad
Icon Editor
You will need an Icon editor if you are hardcore and want to edit the cursors and pointers associated with your skin.
eg. NeoSoft Icon Editor, Icon Edit Pro, Impact Microangelo
Zip Compression Tool
Absolutely necessary to publish your skin. Winamp.com will not accept an unzipped skin.
eg. 7-Zip
Classic Skins
Classic skins are skins that adhere to the Winamp 2 style model. Classic skins are easier to create than Modern skins but do not allow the author to change the form or function of the player. Classic authors may only replace a standard set of images that alter the player's visual appearance.
Modern Skins
Modern or Freeform skins were originally designed to work with Winamp3. What separates them from the average skin is the fact that they are not confined to the classic rectangular shape. In fact they can be any shape you want them to be and you can put the Winamp control buttons anywhere you want. Some skinners have even added extra buttons that extend the functionality of Winamp right there on the skin. Sounds too good to be true huh? Well these skins require a bit more coding to make and some of the graphics that go into them are quite large. Consequently, Freeform skins may take a bit longer to download from our site and they may take a few extra seconds to load when you switch from one skin to another. But trust me when I say that Freeform skins are worth the extra time and effort. Skin developers have done some incredible things with these skins. You have to check them out.
<groupdef id="Backgrounds" name="BckElements"> <layer id="LayerID1" image="common/bck_seek.png" x="19" y="92" /> <layer id="LayerID2" image="common/bck_visualizer.png" x="22" y="25" /> <layer id="LayerID3" image="common/slider_volume_BCK.png" x="212" y="64" /> </groupdef>
<groupdef id="PlayButtons" name="Player Buttons"> <button id="btnPlay" action="PLAY" param="" x="11" y="106" image="vista/vst_btn_play_N.png" hoverimage="vista/vst_btn_play_H.png" downImage="vista/vst_btn_play_D.png" tooltip="Play" />
<button id="btnPause" action="PAUSE" param="" x="61" y="117" image="vista/vst_btn_pause_N.png" hoverimage="vista/vst_btn_pause_H.png" downImage="vista/vst_btn_pause_D.png" tooltip="Pause" />
<button id="btnStop" action="STOP" param="" x="104" y="117" image="vista/vst_btn_stop_N.png" hoverimage="vista/vst_btn_stop_H.png" downImage="vista/vst_btn_stop_D.png" tooltip="Stop" />
<button id="btnEject" action="EJECT" param="" x="146" y="117" image="vista/vst_btn_open_N.png" hoverimage="vista/vst_btn_open_H.png" downImage="vista/vst_btn_open_D.png" tooltip="Eject / Open" />
<button id="btnPrev" action="PREV" param="" x="240" y="116" image="xp/xp_btn_prev_N.png" hoverimage="xp/xp_btn_prev_H.png" downImage="xp/xp_btn_prev_D.png" tooltip="Previous" />
<button id="btnNext" action="NEXT" param="" x="288" y="116" image="xp/xp_btn_next_N.png" hoverimage="xp/xp_btn_next_H.png" downImage="xp/xp_btn_next_D.png" tooltip="Next" />
</groupdef>
<groupdef id="grTechButtons" name="Other Buttons"> <togglebutton id="btnPL" action="TOGGLE" param="guid:pl" x="19" y="0" image="vista/vst_btn_PL_N.png" activeImage="vista/vst_btn_PL_H.png" downImage="vista/vst_btn_PL_D.png" hoverimage="vista/vst_btn_PL_H.png" tooltip="Playlist" />
<togglebutton id="btnML" action="TOGGLE" param="guid:ml" x="47" y="0" image="vista/vst_btn_ML_N.png" activeImage="vista/vst_btn_ML_H.png" downImage="vista/vst_btn_ML_D.png" hoverimage="vista/vst_btn_ML_H.png" tooltip="Media library" />
<button id="btnClose" action="CLOSE" param="" x="340" y="17" image="xp/btn_capt_close_N.png" hoverimage="xp/btn_capt_close_H.png" downImage="xp/btn_capt_minimize_D.png" tooltip="Close" />
<button id="ButtonID2" action="MINIMIZE" param="" x="340" y="32" image="xp/btn_capt_minimize_N.png" hoverimage="xp/btn_capt_minimize_H.png" downImage="xp/btn_capt_minimize_D.png" tooltip="Minimize" />
</groupdef>
<groupdef id="grComponents" name="Components"> <vis id="Visualization" x="30" y="30" w="76" h="40" relatx="0" alpha="255" gammagroup="gamma" ColorBand1="255,255,255" ColorBand2="255,255,255" ColorBand3="255,255,255" ColorBand4="255,255,255" ColorBand5="255,255,255" ColorBand6="255,255,255" ColorBand7="255,255,255" ColorBand8="255,255,255" ColorBand9="255,255,255" ColorBand10="255,255,255" ColorBand11="255,255,255" ColorBand12="255,255,255" ColorBand13="255,255,255" ColorBand14="255,255,255" ColorBand15="255,255,255" ColorBand16="255,255,255" colorosc1="255,255,255" colorosc2="255,255,255" colorosc3="255,255,255" colorosc4="255,255,255" colorosc5="255,255,255" colorbandpeak="255,255,255" />
<Text id="SongInfo" ticker="1" display="songname" showlen="1" x="118" y="26" w="210" h="17" fontsize="16" font="" color="255,255,255" shadowcolor="128,128,128" shadowx="1" shadowy="1" />
<text id="Timer" display="time" x="118" y="47" w="80" h="25" font="" fontsize="18" color="255,255,255" align="left" antialias="1" bold="1" shadowcolor="128,128,128" shadowx="1" shadowy="1" timeroffstyle="1" />
<slider id="Slider" action="SEEK" x="18" y="85" w="317" h="20" orientation="horizontal" thumb="vista/vista_thumb_N.png" hoverThumb="vista/vista_thumb_H.png" downThumb="vista/vista_thumb_D.png" />
<slider id="Slider" action="VOLUME" x="208" y="63" w="115" h="12" orientation="horizontal" thumb="xp/xp_thumb_N.png" hoverThumb="xp/xp_thumb_H.png" downThumb="xp/xp_thumb_H.png" />
</groupdef>
<container id="main" name="Main Window" default_x="0" default_y="0" default_visible="1" w="362" h="162">
<layout id="normal" background="common/Background_player.png" w="400" h="300" desktopalpha="1" >
<group id="Backgrounds" w="362"/> <group id="PlayButtons" w="360" /> <group id="grTechButtons" w="360" /> <group id="grComponents" w="360" /> </layout>
</container>
ClassicPro Skins
ClassicPro skins is a blend of a Classic Winamp skin and a Modern Winamp skin. You don’t need to do any coding to create your skin because all the coding will be done by the ClassicPro plugin. The layout is similar to the Classic Winamp layout but also resizable using a Single-User-Interface (SUI) to display components.
Developer Resources
Community Links
- Forums: Classic Skins
- Forums: Modern Skins
- Forums: Skinning Tips and Tricks
- Forums: Arts and Design
- Forums: Skin Removal Reporting
- Upload: Submit Your Skin
- Browse: Download Skins