Go Back   Winamp & SHOUTcast Forums > Skinning and Design > Skinning Tips and Tricks

Reply
Thread Tools Search this Thread Display Modes
Old 6th May 2003, 19:57   #1
Mr Jones
Nothing to say...
 
Mr Jones's Avatar
 
Join Date: Sep 2000
Location: UK
Posts: 23,046
Tips & Tricks of Winamp Classic Skinning - for intermediate to Advanced Skinners

WINAMP CLASSIC SKINNING – TIPS AND TRICKS
for intermediate to Advanced Skinners


This was written by ¤db¤, although much of this info was learned and collated from the collective skinning wisdom of the “Skin-love” forum members.

This is not a tutorial – it assumes that you already have at least some idea about skinning Winamp Classic. You can get tutorials here:

http://www1.1001skins.com/winamp_ski...tutorials.html

So, you think you're a pretty experienced Winamp2 skinner, eh? Think you know all there is about skinning it? Well, I bet you don't!

Below is a list of tips and tricks ranging from the often-but-not-always-known to the downright obscure. You'll most likely know some or many of these things, but I bet you won't have known all of them. They are first listed in point form, and the descriptions of all of them are in the next section, with links to real skins as examples. Knock yourself out:

1. BEFORE YOU START YOUR SKIN…
  1. Using a template
  2. Reading the “Skinner's Atlas” readme
  3. Skinning using a folder
  4. Right-clicking a wsz

2. THINGS TO MAKE SKINNING EASIER
  1. Using the “Skin deleter” plugin
  2. Using a Vis-color utility
  3. Using other Skin Tools
3. LITTLE KNOWN / OFTEN UNSKINNED ELEMENTS
  1. Skinning the Clutterbar-when-off
  2. Changing the colour of the Minibrowser text
  3. Setting the colour of the VIS peaks
  4. The Playlist Vis-Window
  5. Using nums_ex.bmp
  6. The Main Easter Egg
  7. The Balance Easter Egg / Animating the balance.bmp
  8. Making a readme.txt
4. CURSORS
  1. Including the mmenu.cur
  2. volbar.cur, wswinbut.cur, wsclose.cur & wsmin.cur
  3. Making duplicates of the cursors the easy way
  4. Animating your cursors
  5. Being sneaky with Cursor Hotspots
5. CROPPING
  1. Cropping the volume.bmp and balance.bmp
  2. Cropping the posbar.bmp
  3. Cropping the eqmain.bmp
  4. Getting past the MAIN windowshade shared-pixel line bug
6. FONTS
  1. Choosing your Playlist font
7. SKINNING THE EXTRAS
  1. Skinning Plugins
  2. Skinning the Inside of the Minibrowser
8. AFTER YOU FINISH YOUR SKIN…
  1. Making your wsz smaller
  2. Making a screenshot
  3. Places to publish your skin
  4. GeneralTips
ACKNOWLEDGEMENTS

1 – BEFORE YOU START YOUR SKIN…

1a. USING A TEMPLATE


A template is a skin which is specifically designed to be used as a ‘blank canvas’ to build your skin on. Use it instead of the base skin. The most thoroughly designed and helpful template, in my opinion, is Jellby's “Skinner's Atlas”. It was based on cyana's very good “Template Amp”, though it has several very worthwhile improvements. It is recommended that when you begin to design your skin, you use the skeletons.bmp or skeletons2.bmp (more info in the “Skinner's Atlas” readme). You can get “Skinner's Atlas” here:

http://www.winamp.com/skins/details.php?id=126738

Remember: hitting shift+click (or, on some systems, right-click & “Open in New Window”) opens up the links in a new window, and lets you keep reading this.

1b. READING THE “SKINNER'S ATLAS” README
The readme.txt in Skinner's Atlas contains a wealth of information, and goes through each bmp describing in detail what every part does. If you want to really understand every part of the skinning engine inside out, this is for you. It's great to use as a reference. Download “Skinner's Atlas”, unzip it, and read the readme.txt:

http://www.winamp.com/skins/details.php?id=126738

1c. SKINNING USING A FOLDER
Winamp reads skins in three formats: wsz, zip and Folders. Using a folder is easily the best way to work on your skin. For example, if your skin is called “myskin” create a folder in your skins directory called C:\program files\winamp\skins\myskin. Put all the files (bmp, txt etc.) in there and edit them from that location. To check how new changes appear on winamp, have the skin loaded (this folder will now be listed by its name as a normal skin – in this case, it will be a skin called “myskin”) and press F5 to refresh the skin. You only need to bother with zipping the files and renaming to wsz once you have finished.

1d. RIGHT-CLICKING A WSZ
On most versions of Windows, if you have a recent version of WinZip installed, you can easily access the files inside a wsz by right-clicking it (or shift-right-clicking it, on some systems) and choosing “Winzip”/“Open with…” This way, there is no need to rename to zip and back again every time you want to edit a skin or look at one of the files inside it. You can get Winzip at www.winzip.com
Return to main index

2 – THINGS TO MAKE SKINNING EASIER

2a. USING THE “SKIN DELETER” PLUGIN

Being able to delete skins straight from within Winamp is definitely a good thing when it comes to managing your skins easily. Unfortunately, it seems that Nullsoft never thought to include this in Winamp, but now there is a third-party plugin which allows you to do this. Another good feature of this plugin is that you can use it to assign any skin you like to be your “default” skin. At anytime, while using winamp, you can access this “default” skin by pressing backspace. It can be useful to have your current skin-in-progress as your ”default“ skin so that you can always have quick access to it. You can get the plugin here:

http://www.winamp.com/plugins/details.php?id=112058

2b. USING A VIS-COLOR UTILITY

There is no good reason to make the viscolor.txt manually (ie. with notepad or a similar editor). There are programs that make this process quicker, allow you to create your own gradients in seconds, and let you see what your vis will look like as you create it.

Probably the best one is Andrew Mackowski's “Vis Toolkit.exe”. One of the good things about this utility is that it allows you to enter hex values (like those in pledit.txt, and saves you from having to enter 3 separate red, green, and blue values for each bit. Most good paint programs give you the hex values of colours when you use the colour palette in them. You can get “Vis Toolkit.exe” here:

http://www.1001winampskins.com/winam...s_toolkit.html

Some skinners might find the interface of Eugene Loginov's “Viscolor.exe” more intuitive, though others might find it too time-consuming. This utility doesn't do the peaks of the spectrum analyser (see point 3c), however – you will have to do them yourself. You can get “Viscolor.exe” here:

http://www.1001winampskins.com/winam...tility121.html

2c. USING OTHER SKIN TOOLS

Apart from the vis-color utilities, there are other skin-tools that may be of interest to you.

There are button extractors that help you ‘cut out’ the various buttons from the main.bmp and eqmain.bmp. EZ buttons is one of the best:

http://www.1001winampskins.com/winam...s_ezbnmin.html

If you are adding transparencies to your skin, there is absolutely no good reason to edit the region.txt manually, unless you are only making very minor modifications to it. There are plenty of utilities that will do this for you – all you need to do is draw what the transparent areas will look like in a bmp, then these utilities will create the region.txt from that. From my experience, Maxim's “Winamp region.txt generator” is by far the best of these, both in terms of reliability and in terms of features. You can get it here:

http://www.smspower.org/maxim/winamp/region.html

Maxim has also made “Skinner's Tool”, which might be of interest to you. It is a little always-on-top window that activates winamp and reloads the current skin with the press of a button – it makes life easier if you frequently return to winamp to check your changes to the skin. You can get it here:

http://www.smspower.org/maxim/winamp/skintool.html

There are many other skin tools available, some of which can be found here:

http://www.1001winampskins.com/winamp_skin_tools.html
Return to main index

3 – LITTLE KNOWN / OFTEN UNSKINNED ELEMENTS

3a. SKINNING THE CLUTTERBAR-WHEN-OFF
The clutterbar is the vertical area with five buttons that is found in titlebar.bmp. In that file, there are two versions of it on the top-right, and five on the bottom-right. Many people forget to skin the one on the extreme top-right – it is the one that is primarily used when the Winamp display options are set to “[don't] always show clutterbar”.

This area can be also used as another kind of easter egg (see points 3f & 3g). See my “SHAG skin” for an example:

http://www.winamp.com/skins/details.php?id=123779

3b. CHANGING THE COLOUR OF THE MINIBROWSER TEXT
Add these to your pledit.txt, if they aren't there already, and set the colours as you do for the other values in that file:

mbFG=#RRGGBB
mbBG=#RRGGBB

3c. SETTING THE COLOUR OF THE VIS PEAKS
In Winamp's Visualisation options, there is a checkbox that enables you to add peaks to the spectrum analyser. To set the colour of these peaks, you need to have a 23rd line in your viscolor.txt (with red, green, and blue values, as in the other lines).

3d. THE PLAYLIST VIS-WINDOW
When you strectch the PLAYLIST horizontally, there are two tiles that appear – a narrow one which gets repeated, and a wider one that gets shown only once. What many people don't know is that this wider one can display the vis (visualisation). Have Winamp stretched so that this tile is showing, and press alt+w… the MAIN window disappears, and the vis is now displayed on that tile (if you have the vis enabled, that is – click the middle of the tile if you don't). Many people like to fill that window with extra design, pics, or info about themselves – often, this can look messy when the vis is showing there. When skinning this tile, it is up to you – do you want to keep that tile set up so that the vis looks good, or utilise that space for something else? Jellby's “The Best Winamp Skin Ever” is an example of how to achieve both things:

http://www.winamp.com/skins/details.php?id=126220

The pledit.bmp in “Skinner's Atlas” shows exactly where (when it is activated) the VIS sits on that tile:

http://www.winamp.com/skins/details.php?id=126738

3e. USING NUMS_EX.BMP
If you are still using numbers.bmp, switch to using nums_ex.bmp. It has an extra spot for the minus sign that appears when you click the numbers (clicking the numbers makes the counter display the time remaining in the song, with the minus sign in front). If you only skin the numbers.bmp, Winamp will generate the minus sign from the middle of the “2” in numbers.bmp, which looks wrong on many skins. You may include both files if you like. Newer versions of Winamp will ignore numbers.bmp if they see a nums_ex.bmp – while the considerably older versions will not recognize nums_ex.bmp at all.

3f. THE MAIN EASTER EGG
An Easter egg is a little hidden surprise in your skin that needs to be activated a certain way. The main Easter egg is found in the titlebar.bmp (the two bars at the bottom). To activate the easter egg on any skin:

Have the MAIN window ACTIVE, and type: N U L [Esc] L [Esc] S O F T

You need to press [Esc] (the “Escape” key) after the L's to get rid of the window that pops up. If it doesn't work, try typing faster or slower. Now that you know what it is – skin it! Many skins use the easter egg to include quotes, gags, info about the author, or just an alternative titlebar for those who like to have a choice.

3g. THE BALANCE EASTER EGG / ANIMATING THE BALANCE.BMP
This is much lesser known Easter Egg. To understand this Easter Egg, you need to remember that there are 28 frames in the balance.bmp, and that on Winamp, you can control the balance in two ways:

by sliding the balance slider on the MAIN
by sliding the balance slider on the EQ-Windowshade
In actual fact, only about 10 of the 28 frames in the balance.bmp are actually shown when using the MAIN. Some are shown ONLY when using the EQ-Windowshade. You can put little surprises in these frames so that they won't come up when using the Balance slider normally, but will when using the EQ-Windowshade. The balance.bmp in “Skinner's Atlas” shows which frames are used on the MAIN, which on the EQ-Windowshade, and which not at all:

http://www.winamp.com/skins/details.php?id=126738

If you want to see an easter egg like this in action, see my “Selective Ambience” (you might need to use it at double-size (ctrl+d)):

http://www.winamp.com/skins/details.php?id=122370

If you are making an animation in the balance.bmp, check to see that you animate the right frames. As mentioned above, many of the frames in that file aren't actually shown when using the main window, and some aren't shown at all. Use the balance.bmp in Skinner's Atlas to see which frames are used when sliding the balance on the MAIN, and which when sliding it on the EQ-Windowshade. Taking this into account will ensure that your animation is displayed the way you intended.

3h. MAKING A README.TXT
It can be a good idea to include a readme.txt in your wsz. Whatever you write in this file will be displayed in Winamp's skin-browser (alt+s). There are a number of useful things that can be put in here:

Your name or alias, so that people won't forget who made the skin.
A link to your other skins, such as your author page at 1001winampskins.com or, if you have one, your personal website.
Info about the skin.
Credit where it's due (if, for example, you used a picture or a photo in your skin that wasn't made by you)
Relevant links. If you used someone else's artwork or photo (for example, photos of musicians or album cover art) – I would consider it common courtesy to credit them and to also give links to their sites. If you are providing links, it might be nice to include them in your MB-inner, if you are making one (see point 7b)
A contact email, if you wish (preferably not your day-to-day one).
A copyright message, urging people not to distribute or publish your skin without your permission (Essentially, your skin – assuming it has used only your work – is protected by international Copyright laws, and rips of it or of any of its elements will be immediately taken off most sites if it's revealed that they are rips)
If you know which sites you will publish the skin at (for example 1001winampskins.com & classic.winamp.com), it could be useful to write something like: “If you didn't get this skin from 1001winampskins.com or classic.winamp.com, please email me and let me know, because it's not authorised to be anywhere but those two sites – and it's hard updating your skins if you don't know where they are on the net!”
Return to main index

4 – CURSORS

4a. INCLUDING THE MMENU.CUR
Although it isn't included in the base skin, Winamp uses the file mmenu.cur. It is the cursor for the same button as the mainmenu.cur, though it is used when the MAIN window is in windowshade mode.

4b. VOLBAR.CUR, WSWINBUT.CUR, WSCLOSE.CUR & WSMIN.CUR
These four cursor files are useless – Winamp doesn't use them. You can still include them in case Nullsoft ever updates Winamp to use them (which is unlikely), but if you are concerned with conserving space in your wsz, you can omit them.

4c. MAKING DUPLICATES OF THE CURSORS THE EASY WAY
Very rarely will you want to make a different cursor for each of the 28 cur files. For example, the cursors for horizontal sliders (volbal, songname, posbar etc.) will usually be the same. Making several cursors and then having to copy and rename them until you have all 28 is tiresome. There is a utility called “CursorMultiply” that makes this easier for you, which is made by skinme and included in Skinner's Atlas:

http://www.winamp.com/skins/details.php?id=126738

4d. ANIMATING YOUR CURSORS
To make animated cursors, you need a cursor-making program that supports them (such as MicroAngelo, which you can get at www.impactsoft.com). They are ani files (unlike non-animated cursors which are cur files). However, Winamp doesn't read ani files, so you need to rename your ani files into cur files (eg. normal.ani becomes normal.cur) – Winamp will then read them, and will display them as animated.

4e. BEING SNEAKY WITH CURSOR HOTSPOTS
This technique is to be used sparingly and intelligently. Hotspots are what determine which exact part of the cursor is the part that clicks – the hotspot of an arrow cursor will usually be the pixel at the very tip of the arrow – but all winamp cursors can have their hotspots modified by a cursor program like MicroAngelo. You can adjust cursor hotspots to artificially make some components shift out of their usual spots a little, yet still be perfectly clickable. To see an example of this, take a look at my “Saturn in the Wintertime”:

http://www.winamp.com/skins/details.php?id=98579

On “Saturn in the Wintertime”, have a look at the three “decibel markers” on the EQ (I mean those things which are usually labeled +20db, 0db, & -20db). They are considerably higher than usual, yet when you click on them they work. That's because the hotspot of eqnormal.cur has been purposely changed. Open the eqnormal.cur up in a cursor program and see where the hotspot is.

However, the changes made to the eqnormal.cur affect not only the decibel markers, but the rest of the EQ as well. So, the ON/AUTO buttons had to be adjusted accordingly to match the new hotspots; and if you click around the PRESETS button, you'll see that it wasn't adjusted properly and is unclickable in some areas where it should be clickable.

So, this technique of shifting certain buttons out of their usual places and adjusting the cursor hotspots to match can be useful if used well. For example, it could shift all the PL stacks to the right a little to give some part of your design more room, or it could move the ON/AUTO/PRESETS buttons down a little to give a picture more breathing room. But if you use this technique, use it wisely and in moderation. And remember, if you shift a button to outside its usual area, it is only an illusion, you will still only be able to draw the pressed state in the usual area!
Return to main index

5 – CROPPING

5a. CROPPING THE VOLUME.BMP AND BALANCE.BMP
To get rid of those chunky sliders in the volume and balance displays, you can crop them out by resizing the bmp and eradicating the bottom of it. This will allow you to do much more adventurous things with the volume and balance, such as animations. To see both the volume and balance sliders cropped out, see ripe's “Kurtz”:

http://www.winamp.com/skins/details.php?id=97577

You can crop them out only partially if you like. This is often useful for the balance, so that you can have an animation, yet still see whether the slider is at the left or the right. For an example, see the balance.bmp in Atmo's “Gamusion”:

http://www.winamp.com/skins/details.php?id=131748

5b CROPPING THE POSBAR.BMP
The posbar can be cropped in the same way that the volume and balance can. For an example, see my “Kieœlowski- Red”:

http://www.winamp.com/skins/details.php?id=110890

In addition to cropping pixels off the bottom, you can also crop them off the right, to make the posbar slider narrower on the x axis. However, be warned, cropping pixels off the right makes the posbar do peculiar things when sliding it. To see what I mean, look at the posbar.bmp of skinme's “Connect-X” and see what the skin does when you slide the posbar:

http://www.winamp.com/skins/details.php?id=73485

5c CROPPING THE EQMAIN.BMP
There are a number of things you can achieve by cropping the eqmain.bmp. Firstly, if you just crop 1 row of pixels off the bottom, you can eradicate the line that moves up and down on the eq-vis that shows the preamp level, if you should so desire. Or, you can eradicate the entire eq-vis (that rectangular area which shows the levels of the EQ bars). See how in the eqmain.bmp of my “SHAG skin”, the EQ-vis is missing, and hence it doesn't come up in the skin:

http://www.winamp.com/skins/details.php?id=123779

It often helps to get rid of the EQ-VIS, especially in picture skins, because it makes that area much cleaner-looking, and is a fairly non-essential part of winamp (as well as being unattractively pixelated). You can also get rid of the EQ bars altogether, if you like. This gives much more room to your design, but compromises the skin's functionality substantially (as well as the bars, this will also crop out the sliders and the preset button)… it's your choice. If you want to crop out the bars, remember to not crop out the titlebars.

Some people, when they make a skin without the EQ bars, make two versions of the eqmain.bmp, one without bars and one with bars, so that people have a choice. Mr. Tough Guy's “Rose Tattoo” did this:

http://www.winamp.com/skins/details.php?id=112656

http://www.winamp.com/skins/details.php?id=112657

Some people include both versions of eqmain.bmp within the one wsz, and give instructions on how to extract and activate them. Mr Tough Guy also did this in “Rose Tattoo” (see either of the above links)

You can still use the EQ bars on a skin with them cropped out, but you can't see what you're doing easily.

5d. GETTING PAST THE MAIN WINDOWSHADE SHARED-PIXEL LINE BUG
As you know, the MAIN windowshade window is skinned twice, once for the active state and once for the inactive state. There is one row of pixels that both of these states share, due to a bug in the way Winamp reads titlebar.bmp (See the readme.txt in “Skinner's Atlas” for more info about this). This can cause problems, as – for example – the bottom row of pixels in the active window will ‘jump’ to the top row when the window becomes inactive. This is not a massive problem, but there are ways to get around it – using the file region.txt. This is fairly hard to explain, so it will be simpler if you simply follow the instructions, experiment with the results, and see for yourself.

Method 1: Make a file called region.txt in your skin folder (or edit the existing one, if it's already there), and put the following text in it:

[Windowshade]
NumPoints=4
PointList=0,1,275,1,275,14,0,14

This method was used in Mr Tough Guy's “Trooper”:

http://www.winamp.com/skins/details.php?id=118771

Method 2: Make a file called region.txt in your skin folder (or edit the existing one, if it's already there), and put the following text in it:


[Windowshade]
NumPoints=4
PointList=0,0,275,0,275,13,0,13

Method 1 will eliminate the top row of pixels from the MAIN Windowshade by making it transparent – this means that the ‘shared pixel line’ in titlebar.bmp will no longer be used for both the bottom of the active state and the top of the inactive state – it will now only be used for the bottom of the active state.

Method 2 will do a similar thing, but instead of making the top row of the MAIN Windowshade transparent, it will make the bottom row transparent. Now, the row that used to be ‘shared’ by both states will only be used for the top of the inactive state.

Both methods have their drawbacks:

The transparent line created by Method 2 means that there will be a pixel-wide transparent gap between the MAIN window shade and any windows that are ‘locked’ underneath it.

The transparent line created by Method 1 means that there will be a transparent gap between the MAIN windowshade and the top of the screen when winamp is ‘locked’ to the top of the screen. This is especially annoying to those who like to have their skin locked at the top so that they can quickly push their mouse all the way to the top and ‘grab’ winamp so as to move it around the screen. This problem can be somewhat overcome by putting the following text in your region.txt instead:

[Windowshade]
NumPoints=8
PointList=0,0,1,0,1,1,274,1,274,0,275,0,275,14,0,14

I did this with my “SHAG SKIN”, which is here:

http://www.winamp.com/skins/details.php?id=123779

Notice how when the MAIN window shade is on, and winamp is at the very top of the screen – all of the top row of pixels is transparent, except for two pixels at either end. This means that when the skin is in either top corner of your screen, you can still easily ‘grab it’ with your mouse by moving the mouse all the way into the corner – ‘grabbing’ one of those 2 pixels. Try it and see what I mean. If those two pixels weren't there (as they wouldn't be using Method 1), if you tried to ‘grab’ winamp with that mouse action, you would end up clicking on whatever was behind winamp.
Return to main index

6 – FONTS

6a. BITMAP TEXT AND NON-BITMAP TEXT
In Winamp's display options (ctrl+p then go to the “display” section), there is a checkbox to allow the “bitmap font”. If this is checked, the scrolling songname text will be in the font that has been drawn in the text.bmp. If this box is unchecked, the font will be a rather pixelated version of the Playlist font (ie. The font named in pledit.txt). This non-bitmap font actually takes up a few extra rows of pixels, and some skins that were made for the normal, bitmap font don't look quite right in non-bitmap mode – for example, my “Kieœlowski – Blue”:

http://www.winamp.com/skins/details.php?id=120605

So you may want to keep this in mind when designing your skin. The template bmps in Skinner's Atlas show the area taken up by both the bitmap and the non-bitmap text. The readme in Skinner's Atlas also has additional info about the text, such as where Winamp takes the background colour of the non-bitmap text from.

However, it is not totally necessary to worry too much about how your skin looks in non-bitmap mode, since the majority of winamp users use the bitmap mode, as that is the winamp default.

The text used on the Playlist windowshade is always taken from text.bmp.

6b. CHOOSING YOUR PLAYLIST FONT
There are several things to keep in mind when choosing your Playlist font:

The first is that not everyone might have it. Even some more common fonts aren't found on all computers. This is a good guide of which fonts are usually on found on computers with older versions of Windows:

http://www.kayskreations.net/fonts/fonttb.html

Secondly, you should make sure that the font looks good and readable at more than one size setting (the size of the Playlist text can be changed in the winamp display options)

Thirdly, you might want to check how the font looks on the MAIN window when non-bitmap text is selected (see above)

Keep in mind that for some common fonts, such as Arial, you can add “italic” or “bold” after their name in the pledit.txt to alter them.

If you still want to use a more obscure font, you can give a link to the font in your skin description, or (if the author of that font allows) include the font in your wsz and explain in your readme.txt how to extract and activate the font. A good site with lots of freeware fonts is www.1001fonts.com. If using a freeware font from a site like 1001fonts, it's probably best to provide a link to the font rather than including the actual font within your wsz – just so that if people want the font, they will download it from the site, adding to the author of the font's download count, which lets them know that the font is popular.
Return to main index

7 – SKINNING THE EXTRAS

7a. SKINNING PLUGINS
There are a number of Winamp plugins that use their own skins, which you can also skin and include in your wsz, if you like. These include MikroAmp, Vidamp, Amarok, DFX and more. To get any of these plugins and learn more about skinning them,check out the links below.

MikroAmp is commonly used plugin that puts the core features of winamp into a unobtrusive little box – this box is skinnable, and it is very easy and quite fun to skin.
Vidamp is a plugin that allows you to watch video files (mpg, avi, mov etc.) with winamp. It is fairly commonly used, as far as plugins go – its skin is based on pledit.bmp.
Amarok is a simple, no-nonsense, though not very well known plugin, and is quite easy to skin – it's like a simplified version of pledit.bmp.
DFX is sound-quality-enhancing plugin that some people hate, yet others swear by. Its skinning system is a bit more complicated.
There are templates for the MikroAmp, Vidamp and Amarok skins in “Skinner's Atlas”:

http://www.winamp.com/skins/details.php?id=126738

Changes made to most plugin skins won't take effect until you load a different skin, and then reload the original one – only then will winamp display any changes that you've just made to them.

If you look inside my “Saturn in the Wintertime”, you will see several plugin skins:

http://www.winamp.com/skins/details.php?id=98579

7b. SKINNING THE INSIDE OF THE MINIBROWSER
To do this, you need to have the MikroAmp plugin, a quite commonly used plugin. The actual “Mikro” has nothing to do with the Minibrowser – it is a little (skinable) box that has the core features of Winamp on it but takes up very little space on your screen. However, a great feature of the plugin is that it also allows you to skin the so-called MB-inner (and it is required to see the MB-inners on other skins, if they have been skinned). An example of a skin with an Mb-inner is my “Selective Ambience” (you'll see it on the screenshot, but it won't appear on the skin if you don't have MikroAmp):

http://www.1001winampskins.com/skin_...l?skin_id=2763

The MB-inner is an html file renamed to winampmb.txt (Its extension is txt because Winamp isn't set up to recognise html files from within wsz files). Even if you don't know anything about html, it is fairly easy to create a simple MB-inner, with pictures, a background, and maybe a couple of links.

For more examples of skinning the minibrowser, have a look at the winampmb.txt files in some other skins to get a better understanding of it. You can copy & paste a part of someone else's winampmb.txt into your own skin and modify it to suit your own needs, as long as you're only copying simple, generic code – for example, the code to display just a pic and a couple of links. Here are three skins with MB-inners of varying complexity:

dimichan's “Cemetary Gates” – just a picture and a custom background colour:

http://www.winamp.com/skins/details.php?id=123506

e-raser's “The Orb Amp” – a picture, a background colour, some text, and an email link:

http://www.winamp.com/skins/details.php?id=121540

Atmo's, Bobo's, and my “Noxious Flow” – several pictures (3 of which are clickable links), a tiled bmp background, and custom scrollbars:

http://www.winamp.com/skins/details.php?id=124489

The colours of the background, text, and links are changed in much the same way as in the pledit.txt. All pictures must be in bmp format. On a skin with the MB-inner skinned, the MB-inner will automatically be shown when the skin is loaded, but the minibrowser's functions can still be used – just use the MB's menu button (the one next to the “refresh” button). There's more info about MikroAmp and about skinning the MB-Inner at the MikroAmp webpage (and you can also download the MikroAmp plugin here):

http://www.skinmaster.co.uk

NB: When skinning the MB-inner in a folder, winamp creates a file called winampmb.htm each time you load your skin. This is annoying when you make changes to your winampmb.txt, since Winamp will ignore them and read the winampmb.htm instead. A way to get around this is to simply work with a winampmb.htm, and rename it to winampmb.txt only once you've finished. Having the file as winampmb.htm also enables you to immediately see any changes you've made by clicking the refresh button on the MB. To make your life a bit easier, you can create a bat file (I call mine editwinampmb.bat) in Notepad, with the following text inside it:

notepad.exe winampmb.htm

you put this bat file in your skin's folder, all you have to do each time you want to edit the winampmb.htm is double-click this bat file (this assumes that you want to use Notepad to edit it)

8 – AFTER YOU FINISH YOUR SKIN…

8a. MAKING YOUR WSZ SMALLER
When your skin is smaller, it is more tempting to download, especially for people with slower internet connections. There are a number of things you can do to make your skin smaller:

Use “DECREASER.EXE”. This little program colours all the unused parts of the main.bmp and eqmain.bmp one colour. There are many unused parts in these files: the cbuttons area, for example; Winamp never reads that area on the main.bmp, because it only reads it from cbuttons.bmp. When these areas are all covered in only one colour, the bmps are less complicated and hence are more compact when zipped. You can get DECREASER here:

http://www.1001winampskins.com/winam...decreaser.html

Clean up your bmps. The less complicated your bmps are, the more compactly they can be zipped, and the less space they will take up in your skin. Go through your bmps and make sure that all non-essential parts of them are one colour. By non-essential parts, I mean anything that lies outside those areas which winamp uses. In other words, any mess left behind by you while skinning, and any guides and notes created by the template you were using.

Delete non-essential files. These include:

volbar.cur, wswinbut.cur, wsclose.cur & wsmin.cur (see point 4b)
winampmb.htm (Winamp sometimes creates this itself, but you only need to include the txt version)
numbers.bmp – this file isn't essential if you have included nums_ex.bmp (unless the user has a version of winamp so old that it doesn't recognize nums_ex.bmp, which is unlikely).
Any files that wound up there by accident. Always check – you'd be surprised how many skins have totally unrelated files in them taking up space. I've even seen a skin containing a whole other skin (by a different author) inside for no apparent reason.
Lower the Colour Depth of the smaller files. This, technically, degrades the visual quality of the skin somewhat. I definitely wouldn't recommend using it on the larger files, like main.bmp. However, if you use it on small files like playpaus.bmp or nums_ex.bmp, I bet you won't see any difference, and you can conserve a relatively large amount of space this way. (N.B. – if you do this to mikro.bmp, you will possibly create a pixel shift bug in it – see the mikro.bmp section in “Skinner's Atlas” for how to prevent that.)

Crop the text.bmp – Some versions of text.bmp have 4 sections of text. The bottom 3 are useless (a left-over from a very old version of winamp); only the top one is used. So you may resize (crop) the file to only include the top section.

Colour the ‘non-visible’ frames in balance.bmp one colour (the file will then be more compact when zipped). There are several frames in balance.bmp which are never used (see the balance.bmp in “Skinner's Atlas” to see which ones)

8b. MAKING A SCREENSHOT
Most skin sites will require you to provide your own screenshot. You can make a screenshot of your skin by capturing the contents of your screen with the “Print Screen” key on your keyboard – and then “pasting” it into your paint program. However, it might be worthwhile getting your hands on a screenshot-grabbing utility – this will make the process quicker and give you many more options. A very good one is “Snag it”, which you can get here:

http://download.com.com/3000-2192-10004813.html

Depending on which site you are submitting your skin to, you may get a variety of options for what format your screenshot comes in. Make an informed decision:

PNG: Without a doubt the best quality – pngs use a lossless (in theory, at least) compression method. If you can use this format, do so. However, pngs can be quite large

JPG: Not usually a good choice. The lossy compression method that jpgs use very often creates fuzzy screenshots. jpgs are very small in size, however. Unlike gifs, jpgs use millions of colours, and can sometimes be a good choice for ‘busier’ looking skins with many subtle colour variations and textures (such as skins with photos of people's faces on them).

GIF: In most cases, gifs are better quality than jpgs for skin screenshots; the compression method they use does not make the screenshot fuzzy. However, gifs use only 256 colours, so skins with very complex graphics involving many colours can sometimes look blockier and less subtle than they should.

ANIMATED GIF: A few sites, such as www.1001winampskins.com and (as far as I know) www.deskmod.com allow animated gifs for animated screenshots. To make an animated gif, you will need a program like “Animation Shop” or “GIF Movie Gear”. However, be warned, Animated gifs, if they have many frames, are very large!

Animated Screenshots can be used for varying effects. For example:
http://www.1001winampskins.com/skin_...l?skin_id=2312 (displays the oscilloscope in motion)
http://www.1001winampskins.com/skin_...l?skin_id=2727 (displays the cbuttons-when-pressed, the EQ, and max/min states of the volume)
http://www.1001winampskins.com/skin_...l?skin_id=2763 (very subtle, and simple to make, screenshot – the cat's eyes blink to give the screenshot a tiny bit of extra character)

8c. PLACES TO PUBLISH YOUR SKIN
There are many sites on which you can publish your skins. Here is list of many of them – with some subjective notes about each (written by me, Zkreso and dam)

http://www.winamp.com/skins/
Pros:
Potentially far more downloads than any other site.
Decent Staff Reviews
Cons:
Skins without high staff ratings very often get buried in the archives
Potential for idiot public reviews

www.1001winampskins.com
Pros:
All skins get decent exposure when they are first posted
Well organised site, with lots of categories and search and display options, which means your skin can be fairly easily found by anyone
Each Author has their own page with links to all their skins
Pretty fast server
Skins often receive constructive member reviews
Allows animated screenshots
Hassle-free and flexible updating system
Cons:
First skin can take several days to be published, and may be rejected – though after you have one skin published, you can publish all your future skins in real-time.

www.deviantart.com
Pros:
Very good, elaborate setup of the site in general
Instant uploading
Each author has own page with list of skins and other details
Cons:
Very slow server
Potentially very many member comments, but usually these are very short and not constructive – just loads of people saying “cool skin” or “I like it”
Many of the members have quite specific, narrow, aesthetic tastes – skins not adhering to the favoured styles won't do very well here

www.wincustomize.com
Pros:
Pleasant, well organised site
Decent exposure, (good exposure if your skin is on the first page
Potential for large amount of downloads
Cons:
Erratic Staff ratings
Comments are often few and often very short
Poorly rated skins tend to get buried

www.customize.org
Pros:
Pretty well organised site with various ways of sorting skins
Cons:
Not too many downloads

www.skinz.org
Pros:
Semi-decent amount of downloads
Cons:
Very few comments. No ‘community’ feel.

www.skinbase.org
Pros:
Instant uploading
Very friendly environment
Cons:
Few comments
Site falls apart sometimes

8d. GENERAL TIPS
If you ever see a skin that does something cool, and you don't know how it does it – just open up the wsz and take a look! It's always the best way to learn.

If you want to modify someone else's skin for some reason, do so only for your personal use – do not publish it or distribute it unless you have the author's explicit permission. Not only is it a matter of copyright, it's a matter of basic respect. If you want to send a friend a cool skin you've found – try to send them the link rather than the actual skin.

Be creative. Few people want to see unimaginative skins that have been done before a thousand times – and you'll probably feel more rewarded having tried something more interesting and/or challenging.

Never forget that you're skinning a program, which has many features that get used frequently, even if you don't. If you want people to like your skin, make sure it's reasonably functional!

The “Skin-Love” forum is inhabited by friendly skinners who help each other with feedback on skins-in-progress, bug-tests, ideas, and that sort of thing. It can be a very helpful and useful place for a skinner, as well as just a fun place to hang out, in the virtual sense. Everyone there is quite welcoming and helpful to new members, so check it out – it is located here:

http://forums.winamp.com/forumdisplay.php?forumid=5

You can use any paint program you like for skinning, but using a program that uses layers (such as Paint Shop Pro, Photoshop, or Gimp) is without a doubt the best option. Unfortunately, these programs take some effort and patience to get used to – when I started using a layer-based program (Paint Shop Pro), it took me 3 or 4 skins before I was using it exclusively. However, once you're comfortable with using layer programs, you'll be very grateful for the much increased flexibility and wider choice of options you will have, and how much easier your skinning experience will be.
Return to main index


ACKNOWLEDGEMENTS
This document was written by ¤db¤, but this is very much the fruit of the collective skinning wisdom of the Skin Love Forum (link above). Thanks to all those who suggested and contributed things to this tute; thanks to all those who read the drafts of this tute and gave feedback; especialy thanks to not in santiago, skinme, and Jellby for their extensive and very helpful critiques and suggestions.

Most of all, thanks to the members of the Skin Love forum, from whom I learnt most of the skinning knowledge I've imparted here; thanks to Jellby for making, and constantly updating, Skinner's Atlas (which has not only made my skinning much easier and more precise, but also taught me a lot about the skin-engine); thanks to cyana for making Template Amp, which was the original foundation for Skinner's Atlas; thanks to all those members who give me constructive feedback on my skins – they're so much better because of you guys – thanks to my favourite members (there are a lot of you, but you know who you are); and generally, thanks to the Skin-Love Forum for making Winamp 2 skinning that much more fun (and for putting up with my shit) ;~)
-¤db¤ 2003.

Return to main index



Last Updated 18th June 2012 1151
(MJ added in HTML tags and stuff)
(MJ fixed more links, cleaned up thread some more)
(WR needed to fix some VBB tags 'n stuff)
(Rocker minor fix up)

Last edited by Rocker; 18th June 2012 at 03:00.
Mr Jones is offline   Reply With Quote
Reply
Go Back   Winamp & SHOUTcast Forums > Skinning and Design > Skinning Tips and Tricks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is On

Forum Jump