Tutoriel : Comment créer des skins.

Pour créer des skins suivez la méthode suivante :

Choix du thème, des images , des couleurs

Choix du thème : les groupes de musiques, une vedette, un paysage, le ciel, les étoiles et la mer...
Choix des images : poster, photos, dessins...
Choix des couleurs : bleu, blanc...

Le thème du skin du tutorial est le dahu et repose sur l'image suivante :

Les couleurs dominantes seront :

le vert
le gris

Lancement de QuickSkin

QuickSkin est un utilitaire gratuit permettant de générer aisément des skins. Vous pouvez le télécharger grâce au lien suivant : Télécharger QuickSkin

QuickSkin possède une interface simple. Elle se décompose en trois parties :

A gauche les images correspondent à la prévisualisation du skin que vous allez créer. Au début, les images sont représentent des arcs-en-ciel.
A droite, différents menus sont disponibles afin d'exécuter des actions sur les skin à créer. Ces fonctions seront détaillées plus tard.
Les boutons "Get Bitmap" permettent d'obtenir les images à partir desquelles le skin sera créé. Les images doivent être au bitmap.

Également une aide est disponible grâce au lien 'Help'. Cependant l'aide, comme toute l'interface est en anglais.

Choix de la forme du skin

Winamp est composé de trois parties, trois fenêtres. Une fenêtre mesure actuellement 275 x 116 pixels. Chaque fenêtre peut avoir un dessin qui lui est propre ou peut partager un dessin avec une autre fenêtre. Dans ce cas, un dessin commence sur une fenêtre et s'achève sur une autre. Il est possible d'obtenir trois agencements différents de liens entre fenêtres :

Chaque fenêtre possède sa propre image. Il faut choisir dans le menu : "3 Windows" illustrer

Les deux fenêtres du haut ( platine + equalizeur ) partage le même dessin. La liste des morceaux joués possède son propre dessin. Il faut choisir dans le menu : "Two + One" illustrer

Les trois fenêtres partagent le même dessin. Il y a une continuité dans l'apparence du skin. Il faut choisir dans le menu : "Continuous" illustrer

ATTENTION :

Winamp traite la troisième fenêtre différement des deux autres. Ceci s'explique parceque la fenêtre de la PlayList est de taille variable.

Il n'y a pas de plaquage d'une seule image sur la fenêtre, mais Winamp construit la playlist à partir de petits morceaux d'image qui sont répétés, comme un mur de briques.

Ceci est particulièrement préjudiciable lorsque l'on est loin des bords de la fenêtre. quickSkin essaie de d'optimiser le rendu à partir de l'image que vous lui donné. Les coins correspondent à l'image fournie ainsi que le milieu de la barre du haut de la playlist. Cependant le reste de la fenêtre est construit avec une répétition de petites sections de l'image.

Ainsi, des images offrent un meilleur rendu que d'autres. Ces images sont :

Les images possédant un motif au milieu de la barre du haut ( où se trouve le titre ) et un en bas.
Les images ne possédant qu'une seule couleur.
Les images possédant un motif comme du marbre ou une vague.

Insertion des images

Pour notre tutoriel j'ai choisi un skin décomposé en deux parties. Ainsi, le dessin du haut mesure 275 x 232 pixels. Ce dessin comprend l'image du dahu présentée auparavant sur un fond gris.

Pour l'image de la playlist j'ai utilisé une image décomposé en trois zones.

Le haut est gris avec des vagues vertes. Ces vagues seront répétées.

Le milieu est vert. Il peut ainsi être répété.

Le bas comprend des motifs et du texte.Seul le milieu est vide car il est répété.

Choix des contrôles à afficher

Pour cette étape, il faut réfléchir quant à l'aspect du skin et des contrôles (boutons) que l'on souhaite afficher. Les trois images ci-dessous représentent les trois possibilités d'apparence qu'offre le logiciel en mélangeant les différentes options qui sont offertes.

Pour visualiser les différentes options il faut cliquer sur "MakeSkin" qui applique les options choisies sur votre skin.

Options

Résultat
	La combinaison des options "Full 3D Skin" et "Raise Frame" engendre un skin où tous les boutons sont visibles. La séparation entre les trois fenêtres du lecteur est atténuée. De plus les bords de chaque fenêtre sont lisses.	La combinaison des options "Full 3D Skin" et "Sink Frame" engendre un skin où tous les boutons sont visibles. La séparation entre les trois fenêtres du lecteur est bien visible car chaque fenêtre possède des bordures.	La combinaison de l'option "Buttons Only" avec les options "Raise Frame" ou "Sink Frame" engendre un skin où seuls les boutons permettant de modifier le son et l'equalizer sont visibles. La séparation entre les différentes fenêtres est invisible.

Puisque je préfère un skin opérationnel à un skin trop "inserviable" j'ai choisi l'option "Full 3D Skin". Aussi, comme j'apprécie que l'image du skin ne soit pas trop découpée j'ai opté pour l'option "Raise Frame".
Ce choix est un compromis entre côté pratique et esthétisme.

Choix des couleurs avec l'assistant "Color Tools"

L'assistant "ColorTools" permet de choisir les couleurs que l'on souhaite appliquer pour les différents éléments composant le skin. Ces divers composants sont atteints avec les outils suivants :

Nom de la zone	Fonctions
Window Background	Couleur des fenêtres affichant le temps écoulé ou restant en haut et en bas et affichant les informations sur le titre joué.
Text Color	Couleur du texte des informations sur le titre joué.
Volume and Balance	Couleur des boutons permettant de modifier le temps et la balance.
Visualization	Affiche un assistant permettant de modifier les couleurs du spectre . Celui-ci est affiché lorsqu'un morceau est joué et est affiché en haut à gauche.
Equalizer Background	Couleur de fond de l'equalizer.
Equalizer Foreground	Couleur des traits de l'equalizer.
Equalizer Highlight	Couleur des traits signalant le niveau de l'equalizer.
Equalizer Sliders	Couleur des boutons permettant de modifier l'equalizer.
Normal Background	Couleur normale du fond de la liste des morceaux.
Normal Song Title	Couleur normale des noms de morceaux de la liste des morceaux.
Current Song Title	Couleur du nom du morceau courant dans la liste des morceaux.
Selected Background	Couleur du fond du morceau courant dans la liste des morceaux.
Play List Slider	Couleur des boutons permettant de voyager à travers la liste des morceaux.
Back	Sort de l'outil "Color Tools"

Après avoir appliqué ce qu'y avait été défini préalablement j'ai utilisé le vert et le gris pour "colorier" le skin.

Sauvegarde du skin

Lorsque le skin est réalisé il faut le sauvegarder. Pour celà cliquez sur "SaveSkin".
Une boîte de dialogue apparait. Elle permet d'enregistrer votre skin sous le répertoire contenant les skins dont Winamp à l'accès. Par défaut ce répertoire est "C:\Program Files\winamp\skins\". Si ce n'est pas le cas, choisissez le répertoire adéquat (si c'est modifié, c'est que vous l'avez modifié vous-même, donc vous connaissez le répertoire...) .
Ensuite donnez un nom au skin. Et c'est fini.
Un dossier nommé comme votre skin est alors créé. Il contient plusieurs fichiers qui ont été généré par quickSkin. sauvegarde

Modification des fichiers composant le skin

Cette étape peut ne pas être réalisé si vous considérez que le skin généré automatiquement vous convient. Cependant dans la pluspart des cas, le skin doit être retravaillé afin d'y ajouter une touche encore plus personnelle et afin d'ajouter des détails...

Les fichiers créés sont des images et des fichiers textes. Chaque image représente des zones précises du skin. Pour les modifier il faut les ouvrir avec un éditeur d'image puis les modifier et s'armer de patience. Les fichiers textes comportent des paramètres pour les couleurs à afficher.

Nom des fichiers	Contenu	Fonction
main.bmp		Cette image correspond à la totalité de la fenêtre principale de Winamp.
titlebar.bmp		Cette partie comprend les différentes barres de titres de la fenêtre principale qui peuvent être affichées. Vous pouvez ainsi afficher des images différentes selon que la fenêtre principale soit cliquée ou non.
volume.bmp		Correspond aux images du bouton de volmume et les images derrière le bouton. Ces images varient en fonction de la position du bouton.
balance.bmp		Idem volume.bmp mais pour le bouton de balance.
posBar.bmp		Image de fond de la zone où avance l'indicateur d'avancement dans le morceau. Image de cet indicateur.
monoSter.bmp		Image de fonds permettant de savoir si le morceau écouté est en mono ou en stéréo. Ici, cety indicateur n'est plus visible car l'image n'est composée que d'une seule couleur...
shufRep.bmp		Image permettant de connaitre le mode d'écoute : aléatoire ou normal.
cButtons.bmp		Image des différents boutons de navigation.
eqMain.bmp		Composants de la fenètre de l'équalizer.
plEdit.bmp		Image correspondant aux différentes parties de la fenre "playlist", liste des morceaux à diffuser.
eq_ex.bmp		Barre de titre de la fenetre d'équalizer.
playPaus.bmp		Image contenant les symboles permettant de savoir si le lecteur est en lecture ou non.
text.bmp		Image comportant les caractères à afficher pour les noms des morceaux.
nums_ex.bmp		Nombres affichés pour le temps écoulé ou restant.
viscolor.txt	`239,239,239, 239,239,239, 0,128,64, 192,192,192, 0,128,64, 192,192,192, 0,128,64, 192,192,192, 0,128,64, 192,192,192, 0,128,64, 192,192,192, 0,128,64, 192,192,192, 0,128,64, 192,192,192, 0,128,64, 192,192,192, 255,255,255, 214,214,222, 181,189,189, 160,170,175, 148,156,165, 0,255,0,`	Fichier contenant les codes de chaque couleur à afficher dans le spectre. Les couleurs sont écrites en mode RVB : rouge, vert , bleu
plEdit.txt	`[Text] Normal=#E5E5E5 Current=#80FF00 NormalBG=#18985B SelectedBG=#408080 Font=Arial`	Fichier contenant les couleurs de la liste des titres à jouer. Les couleurs sont écrites en hexadécimale.

Après avoir modifié "Main.bmp" pour mieux voir l'oeil du dahu et "nums_ex.bmp" pour modifier la taille des nombres, j'ai déclaré le skin terminé !!!.
Si vous voulez télécharger ce skin Télécharger le skin du dahu Télécharger le skin du dahu skin final

Lecture de Winamp ou Xmms avec le skin

Chargement du skin avec Winamp	Chargement du skin avec Xmms

Ainsi se termine ce tutoriel... Bonne utilisation de votre skin.... N'oubliez pas qu'un skin doit avant tout être le reflet de ce que vous aimez... Alors faîtes vous plaisir en créant vos propres skins !!!!

haut