Voici à quoi ressemble le fichier gen.bmp

L'exemple utilisé correspond au skin standard de Winamp.

Les 2 premières lignes sont chacunes composées de 6 rectangles 25 x 20 pixels. Ces rectangles correspondent à la décoration de la bordure du haut du module : celui contenant le nom du module - la barre de titre.

Dans le cas où le module n'est pas sélectionné, la décoration de la seconde ligne sera utilisée. Par contre, si le module est sélectionné, ce sera la première ligne qui sera utilisée. Cela permet de distinguer si le module est sélectionné ou non. Bien sûr, il est possible d'utiliser les mêmes images dans les 2 cas, dans ce cas, il ne sera plus possible de faire la différence visuellement entre les 2 états.

Détaillons maintenant les 6 rectangles :

Le premier est le dernier servent à skinner les angles du haut du module, respectivement celui de gauche et de droite. Celui de droite contient un bouton permettant de fermer le module, en position non-cliqué. La surface réactive de ce bouton est un carré 9 x 9 pixels. Il y a 3 pixels au-dessus de cette surface réactive et 2 à sa droite.

Le cinquième rectangle sera intercalé en mosaïque horizontale autant de fois qu'il sera nécessaire entre les angles supérieurs gauche et droit.

Le troisième rectangle correspond à l'endroit où pourra être incrusté le nom du module. Suivant la longueur de ce nom, le rectangle pourra être intercalé en mosaïque horizontale. Le nom pourra très bien ne pas être affiché par un module, tout dépendra du choix du développeur du plugin utilisant le skin générique. Le titre sera intercallés quelque-part sur la barre de titre, interrompant ainsi la mosaïque horizontale de cinquièmes rectangles. Il pourra se situer au milieu, ou vers un bord, au choix du développeur du plugin.

Pour que la rupture ne soit pas trop brutale entre les cinquièmes rectangles et les troisièmes, le deuxième et le quatrième rectangle servent à créer une transition plus douce, respectivement à gauche et à droite du titre.

Dans le cas où aucun nom n'est à incruster dans la barre de titre du module, seuls les rectangles 1, 5 et 6 pourront être utilisés.

Sur les 2 lignes, l'ordre des 6 rectangles est le même.
Le premier rectangle est collé en haut à gauche de l'image. Chaque rectangle est séparé du précédent par 1 pixel vide. La deuxième ligne est séparée de la première par 1 pixel vide.

Le petit carré 9 x 9 pixels en-dessous du sixième rectangle de la deuxième ligne correspond à la décoration du bouton [fermer] quand il est cliqué.

Les 2 lignes de lettres serviront à écrire le nom du module si nécessaire. La première ligne correspond aux lettres si le module est sélectionné, la deuxième à celles si le module ne l'est pas. Les lettres peuvent très bien être les mêmes dans les 2 cas.

Les lettres doivent être de hauteur 7 pixels, mais la largeur n'est pas imposée. Vous n'êtes pas obligés d'utiliser les largeurs proposées sur cette exemple. Il pourra être nécessaire d'augmenter la largeur totale de l'image.

A gauche des A, il faut un espace de 1 pixel avec le bord de l'image de couleur unie. Cet espace sera répété entre chaque lettre et de la même couleur. De même, il y a un espace de hauteur 1 pixel entre les 2 lignes de lettres. C'est cette couleur qui sert de séparateur aux différentes lettres : les lettres ne doivent donc pas comporter cette couleur...

Attention, il ne doit pas y avoir de bavures sur ces espaces, ils doivent être totalement unis. Dans le cas contraire, le nom du module sera affiché de manière loufoque. En effet, l'emplacement des lettres est déduit de ces espaces, mais pas d'un emplacement prédéfini comme pour le reste des éléments du module.

Les dimensions des lettres doivent être les mêmes sur les 2 lignes.

Un conseil, pour que les lettres ne soient pas collées les unes contres les autres à l'affichage, il faut rajouter d'un côté (ou des deux) de chaque lettre une barre de 1 pixel de largeur (voire plus) du motif d'arrière-plan des lettres.

Le petit carré 7 x 7 pixels au-dessus des lettres correspond au motif d'arrière plan des lettres.

Les 2 rectangles 125 x 14 pixels correspondent respectivement aux angles gauche et droit du bas du module.

L'angle inférieur-droit est une surface réactive servant à redimensionner la fenêtre en hauteur et en largeur.

Le rectangle 25 x 14 pixels à droite du petit carré correspondant au motif d'arrière plan des lettres servira à remplir en mosaïque horizontale l'espace entre les 2 angles inférieur.

De chaque côté du carré "bouton [fermer] cliqué" il y a de rectangles.

Ceux de gauche de dimensions 11 x 29 pixels et 8 x 29 pixels serviront respectivement de décorations des bordures gauche et droite du module. Le motifs seront répétés en mosaïques verticales.

Ceux de droite de dimensions 11 x 24 pixels et 8 x 24 pixels serviront de jonction entre les bordures respectivement de gauche et de droite et la bordure du bas. Pas de mosaïque.

Voici à quoi ressemble le fichier genex.bmp

L'exemple utilisé correspond au skin standard de Winamp.

Les 4 carrés clairs 14 x 14 pixels et les 4 carrés foncés de mêmes dimensions serviront de décorations aux boutons des ascenseurs.

Pour le groupe des 4 carrés clairs, sur la première ligne, les carrés correspondent aux boutons haut et bas. Sur la deuxième ligne, les carrés correspondent aux boutons gauche et droite. Ces 4 carrés correspondront aux boutons non-cliqués.

Le groupe des 4 carrés foncés correspondra aux décorations des boutons cliqués. Ils sont disposés dans le même ordre que les carrés clairs.

Le rectangle clair 14 x 28 pixels correspondra aux boutons d'ascenseurs verticaux non-cliqués. Le rectangle foncé de mêmes dimensions correspondra aux mêmes boutons, mais cliqués.

Les 4 pixels du haut et du bas ne seront pas modifiés, mais le reste du bouton pourra être étiré (allongé ou diminué jusqu'à 0 pixel de hauteur). Les 10 pixels du milieu ne sont pas non plus étirés.

Le rectangle clair 28 x 14 pixels correspondra aux boutons d'ascenseurs horizontaux non-cliqués. Le rectangle foncé de mêmes dimensions correspondra aux mêmes boutons, mais cliqués.

Les 4 pixels de droite et de gauche ne seront pas modifiés, mais le reste du bouton pourra être étiré (allongé ou diminué jusqu'à 0 pixel de largeur). Les 10 pixels du milieu ne sont pas non plus étirés.

Le rectangle clair 47 x 15 pixels correspondra aux boutons de texte non-cliqués. Le rectangle foncé de mêmes dimensions correspondra aux mêmes boutons, mais cliqués.

Les 4 pixels de droite et de gauche ne seront pas modifiés, mais le reste du bouton pourra être étiré.

A droite des boutons textes, il y a 18 pixels de couleurs espacés chacuns d'un pixel.

Les couleurs commencent en (48,0). Voici les significations de chaque pixel :

x = 48 : couleur d'arrière-plan des listes
x = 50 : couleur du texte sur cet arrière-plan
x = 52 : couleur d'arrière-plan du module
x = 54 : couleur du texte des boutons-texte
x = 56 : couleur du texte sur l'arrière-plan du module
x = 58 : couleur des diviseurs de sections du module
x = 60 : couleur de la selection dans les playlistes
x = 62 : couleur d'arrière-plan de la case de titre d'une liste
x = 64 : couleur du texte de la case de titre d'une liste
x = 66 : couleur de la bordure en haut et à gauche de la case de titre d'une liste
x = 68 : couleur de la première bordure en bas et à droite de la case de titre d'une liste
x = 70 : couleur de la deuxième bordure en bas et à droite de la case de titre d'une liste
x = 72 : couleur de remplissage s'il n'y a pas de case de titre d'une liste
x = 74 : couleur d'avant-plan de la barre d'ascenseur
x = 76 : couleur d'arrière-plan de la barre d'ascenseur
x = 78 : couleur d'avant-plan de la barre d'ascenseur inverse
x = 80 : couleur d'arrière-plan de la barre d'ascenseur inverse
x = 82 : couleur de remplissage des zones entre les barres d'ascenseurs

Suppléments pour Winamp 5.xx :

Quelques points supplémentaires doivent être pris en compte pour assurer une meilleure compatibilité avec Winamp 5.xx.

x = 84 : couleur du texte de la ligne cliquée dans une liste
x = 86 : couleur d'arrière-plan de la ligne cliquée dans une liste
x = 88 : couleur du texte de la ligne selectionnée dans une liste
x = 90 : couleur d'arrière-plan de la ligne selectionnée dans une liste