Winamp 2.X skinning tutorial
Chapter 1 - Introduction, Useful Links, SOftware
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.