Winamp 2.X skinning tutorial

Chapter 1 - Introduction, Useful Links, SOftware

SacRat and Imagine

Introduction for Hugi edition

Here are few words about the stuff you're gonna read now. It's a part of our (my and Imagine's) tutorial about skinning winamp 2. You can find the complete version at my Deviantart homepage (all the info is at the end of the tut). So what's the difference between the Hugi Edition and the original one? First of all, this tutorial is quite big, about 30 pages already, so we had to split it into several parts (chapters), so it would be easier for you to navigate it. Next, we had to remove some useless graphics to make it as small as possible. This shouldn't influence the quality: in general these two versions are the same. Donít forget that this tutorial is constantly being improved, so wait for updates (the current version is 1.4.0). Where to find them? As always: http://sacrat.deviantart.com.

SacRat, 17.07.2002

Intro

Greets to everyone. SacRat's online. The stuff you are reading now is our first attempt to make a complete winamp skinning tutorial. There are lots of winamp tutorials anywhere, but almost none of them gives you a complete information about the skinning process, all the tricks and so on... Here we tried to combine all the important and useful information about the process of skin creation (skinning), from the idea and creating temporary images with templates to packing and submitting the final work. This manual is based on our own experience as well as on the experience of other skinners.

Imagine's online. Well, I don't really know if it's going to be complete - you still may find some information irrelevant, or missing, or you just have your own ways of skinning. We just tried to help you to solve some 'traditional' problems that you will face when making your first skin and to tell more advanced skinners about different 'tricks'. Hope you find it useful! And if you think you could make this tut better - don't hesistate to mail us!

SacRat's back. If you're a novice, you may find this tutorial useful, as it was created mainly for you. If you're an advanced skinner, you could find some interesting tricks/ideas here and if you're a profi - feel free to share your experience with the rest and help us making it better.

The Beginning

So, you decided to become a skinner, that means started creating your own work (skin). What shall you do then? First you must have an idea/design conception for your new work. In order to make your work outstanding or just non-standard, you should have an original idea. For example, if it's just a repainted default winamp skin, then you could skip reading the tutorial and go ahead doing that crap. If not... Then you should decide what you wanna get: think about the way you skin would look, think about all the animations/effects and so on. In few words, you need a style. Don't bother skinning if you have absolutely no idea about what you want. It's not my aim to teach you about all these special effects, textures and so on, but just know: if you want your skin to be used by lots of people, try to make it both nice looking and having high usability. For example, you might create a groovy skin of "toxic green" color, but no one will want to download it, just because it's too bright and eyes get tired from it very fast. The same is about too dark skins: they are hard to use. Whatever you do, think about usability as well as about the beauty. A good skin must have quite a good contrast and its control elements should be easy to find. I've seen lots of beautiful skins, where you cannot find a button you need unless you're an advanced user. They were really nice, but almost impossible to use. Remember this and try not to sacrifice usability. Original works can be beautiful.

A good idea would be to draw some drafts of your skin on paper first (a way to kill time on a boring lesson or lecture ;)) But sometimes trying some tricks may end up with a cool skin, and sometimes a groovy design that you've done on paper may turn out to a crap after you try to paint it in Photoshop. All I can say is - if you're talented, you can ignore any advice and create a good skin, if you're not - no-one can help you!

I'm a newbie. Help me! (useful links)

Ok, don't cry, kid. First of all this tutorial was made to tell you about all the parts of skin creation process, it's not just a format description. So, if you're not a complete dumb and have some experience of working with Photoshop or any other graphical program, you will understand "how it works". From the other side, you may need some graphical tutorials/resources. Here's a couple of links:

http://www.eyeball-design.com/
This resource is useful for all those who use Photoshop: lots of free tutorials, plugins and stuff like that.

http://www.photoshoproadmap.com/photoshop-tutorials-tips.html
Another nice site for Photoshop fans.

http://www.project-boredom.com/
There're no much tutorials here, but they are really interesting.

http://www.guistuff.com
You may find lots of interesting designs. All they are free after a registration, which is free too :)

And, finally, http://www.deviantart.com/. Here is all you need: brushes, actions, designs, lots of amazing tutorials (well, there's also enough crap in "Tutorial" sections) and links to some other resource sites.

Hereís also set of links to some cool sites with Photoshop tutorials, which were taken from gremlindesignís (http://gremlindesign.deviantart.com/) tutorial:

Designs By Mark (http://www.designsbymark.com/)
Photoshop Lover (http://www.pslover.com/)
Team Photoshop (http://www.teamphotoshop.com/)
Phong (http://www.phong.com)
Hands-On (http://www.handson.nu/)
deaddreamer (http://misery.subnet.at/)
DeepSpaceWeb (http://www.deepspaceweb.com/)
Gurus Network (http://www.gurusnetwork.com/)
Effectlab (http://www.effectlab.com/)
DigitalInflux (http://www.digitalinflux.com/)
Fli7e (http://www.fli7e.de)

Keep in mind that lots of Photoshop tutorials could be adapted for some other design programs, like PaintShop Pro, Painter or GIMP.

Almost all the useful utilities can be found at http://www.1001winampskins.com in "software" section.

Other Winamp Skinning Tutorials

Here are a few links to some other Winamp skinning tutorials. You might look for some information there or just use them instead of my tut, if you dislike it for some reason:

http://members.aol.com/awm3000/skinning_winamp.htm (Skinning Winamp 2.x: Information & Tatics by Andrew Mackowski) - some basic information.

http://luna.spaceports.com/~wsdskins/ - quite a good tutorial with lots of information.

http://www.winamp.com/nsdn - a very groovy tut. Must have for every skinner :) Why? Just because it's the official one :)

http://fyreskins.plastiqueweb.com/ - a damned great site! If you only need to be explained the format of winamp skins with no redundant stuff, this place is for you. There you could also find links to pages of some famous skinners. Donít forget to visit this site anyway!!!

Skin/Art Zines

Deviantmag - an art magazine from the members of Deviantart. Also available in PDF version.
Razorart - quite a nice magazine. Mainly for skinners.
Teknidermy - Another good skinning magazine. Lots of interviews and stuff like that.
Twisted Realmz - Relatively new magazine, dedicated to skins. Not much info yet.

You may also find other interesting resources elsewhere.

Software

Hereís a small list and a description of software you may need while working on your skin. Some programs have links to places, where they could be downloaded, others - donít. So, where to find them? Itís quite easy. Lots of this stuff may be found via www.download.com, www.tucows.com or any search engine, like my favorite google. And donít forget to check the software section on www.1001winampskins.com! Most of the tools described below are freeware, so you will only have to pay for Internet connection while downloading them.

Graphical Editors (general)

What kind of software do you need to create skins? First of all, a graphical editor. Well, some people think that it's possible to create a good skin in MS Paint and other "heroes" try to make it, but we're just mortals and we need a good, flexible program, which allows us to draw our skin and don't limit our imagination. Depending on your needs you might need a bitmap drawing program or a vector one.

Now there are lots of different raster editors and as for me, the best program of that kind is Adobe Photoshop. It has lots of great features and it's a very powerful instrument for every graphics creator, but it's very expensive and therefore almost unavailable for most of non-professional designers (I'm talking about legal copies). Paint Shop Pro is also a commercial program, which has many fans and includes much better vector tools, than Photoshop. If you're just a poor student, you could use a free editor, like GIMP, which is a bit worse, but costs nothing. Possibly it is the best solution for you, if you cannot buy a professional graphical tool. It was originally designed for Linux, but now there are also Windows versions available.

Vector graphics... It's not used that often in the skinning process, but you may need some tools. Professional editors, like Corel Draw, Adobe Illustrator and so on are very expensive, but you may also find some worthy freeware or shareware tools on the web.

Freeware Graphical Editors

As it was already said above, the most popular graphical editors are commercial and very expensive for simple mortals. Below Iíll try to tell you about some alternative programs, which are not so powerful, but which are free.

GIMP (GNU Image Manipulation Program)
A very nice graphical editor for Linux. Thereís also a win32 version, which works fine too, but which is less stable and has some limitations. The program is being developed by a group of volunteers who constantly improve its abilities. Itís still a bit less powerful than Photoshop, but itís the only real free alternative to that commercial monster. It supports layers, has quite a big set of effects and so on... Almost all you may need. By the way, if youíre interested in this program and wanna know more, take a look here: http://www.dezina.org/teknidermy/issueone/Gimp.html. All the links you may need can be found in this Teknidermy article.

PIXIA
One more interesting tool. Unlike GIMP, which is quite similar to Photoshop, this tool uses some more original solutions. Filters, layers... That all exists. As for me, its interface is not that intuitive, so you may need tospend some time, trying to understand ďhow does it work?Ē. The best solution is to read documentation :) Anyway, it seems to be a worthy stuff.

Irfan_view
Itís not a graphical editor, itís a viewer. Although it was originally designed to view pictures, but not to create them, this tiny application has quite a good set of instruments for basic image manipulations, like: filters, resample function, ďsmartĒ screen capture, some tools for color correction and so on... Besides, it allows to make conversions between lots of graphical formats. It might be useful for you to have it loaded while you are working with your skin: you can easily make screenshots, do some basic image manipulations and so on.

If you are looking for good freeware graphical tools, donít forget to visit www.nonags.com, Graphical section. Itís a great site, dedicated to free software.

Skin generators

There are lots of tools created specially to ease your work. The first tool of that kind is famous skinner. You may find skins made by this ďinstrumentĒ almost anywhere, lots of them are located at http://www.winamp.com/skins.This skinning tool and some other skin generators are known and damned by almost any skinner. Whatís wrong with it? The business is that it allows you to take almost any image and create a skin from it in seconds using any predefined template. And lots of little (and big) idiots all over the world create skins this way and even upload them into the skin sites (thank God, some of them decline works of that kind) and other idiots download them. All these work look exactly the same way and have very poor quality as well. The only more-less good use of this stuff is trying to use it instead of a button extractor, but itís almost the same, as using a tractor instead of a plane... Anyway, itís better than nothing...

You can always find a list of more-less popular skingenerators at winamp.com. For sure, this software is not useful at all, but... hereís a link: http://www.winamp.com/nsdn/winamp2x/.

If you think that youíre a groovy designer and donít wanna lose time drawing every image, then go and download this stuff, close this tutorial and delete it, you wonít need it anymore. And if you wanna know how to create more or less professional works, just take a look below.

Button Extractors

A really useful thing. From now on you donít have to create all of your images manually, as you can force the computer to do some of your work. Remember that it doesnít create a skin instead of you, like skin generators do, but eases your work a lot, doing one of the most boring and hard parts of skinning, image cutting, automatically.

So how does this stuff work? Very simple: you make a set of three (main window, PL, EQ) images and then use the button extractor to extract the components from them. The most boring part, creating and adjusting backgrounds, is therefore done automatically. Piece of cake!

Lots of button extractors can be found on the web, but most of them are too buggy or absolutely useless. The best button extractor Iíve seen has been created by Arteym Tatarov and can be found at http://arteym.chat.ru/. Itís quite easy to use and small (256 kb archive). Some bugs are still present, but it works :)

All-In-One

Another interesting application for creating your own skins is The Cyanide Workshop. Itís not a kind of all these stupid skin generators and is just an application designed to help you making skins. If you donít have a good graphical program, cursor creating program and stuff like that, you could use this one instead. So, this program could be called all-in-one. As for me, I still prefer to use several standalone programs for skinning, but you might like Cyanide Workshop.

Plain Text Editor

Besides the graphical editor you may need a plain text editor. You could use standard Notepad for Windows or try something small and nice, like Editor≤, which is good enough and has less than 50Kb in size (compressed).

The syntax highlighting ability may be useful too, and if youíre experienced enough, you can create a scheme for winamp configuration files. If so, you know, where to get such a text editor, and if youíre a beginner, then you donít really need it.

Anyway, text editor is not that critical, until you begin to write poems in readme.txt file.

Configuration files generators (general)

It seems to be true that laziness is the engine of any progress. Even things like creating configuration files for winamp are nowadays done with the help of special programs... So, what do they do and what tools shall you try to use?

Viscolor Utility

Viscolor Utility by Eugene Loginov is a simple utility for creating viscolor.txt (see the fileís description below). Creating this file manually is not hard at all, but if youíre lazy enough to calculate all the colors manually, then go and download it.

Region.txt Generator

Region.txt generator is another groovy program. It was created to help you creating ďtransparentĒ skins. Read more about it in the transparency paragraph.

ZIP/UNZIP Tool

Finally, you may need a compression/decompression program. Most of modern archivers already support creation/extraction of zip archives, so if you already have WinRAR, WinACE or so, you donít need anything else. You may also use WinZIP, a commercial program, which is big and only creates zip archives, but some people like it. As for me, I prefer to use fast and small 7-ZIP . You can also find lots of other freeware compression tools anywhere on the web.

What do you need an archiving program for? Take a look at wsz files section.

Cursor Editor

If youíre gonna make cursors for your skins, it could be a good idea to find a special program for this aim. Iíve used Axialis AX Cursors to create some cursors for my skins. The program is quite easy to use and allows you to import cursors files from bitmap images. So you could just create an image with MS Paint, Photoshop or so and create a groovy cursor from it. Itís easier than using standalone programs for creating cursors pixel by pixel.

Someone might also like Stardockís shareware CursorsXP program or free Icon Studio... For sure you could look for something which might fit your tastes better.

Skin Reloader

One more thing you may need is a small Winamp plugin: Bluecave Winamp Slider. Itís most important (for us) feature is that it allows you to reload skin automatically, so you wonít need to do it manually. From the other side, you could always do the same, by just pressing F5, when your skinís window is active.

Color Picker

And, finally, a tinny tool you may take a use of: Colorpad. Itís a small color picking utility, which allows you to get a value of any pixel on your screen. You may easily find lots of programs of that kind on www.download.com or somewhere else, but this one is my choice. Itís very easy in use, small and donít waste any space on your taskbar (it could be accessed from system tray) and supports skins. So what do you need it for? Itís more than useful, when you make text configuration files and need to know the exact value of color of your skinís fragment or when you wish to pick up a color you like, but donít want to load an image intoyour graphical editor and so on. Keep it under the hand.

Taras Brizitsky alias SacRat