Créer un Skin, premiers pas

Un article de XMIX.

(Différences entre les versions)

Version du 9 mars 2008 à 12:08

Accueil → Documentation → Tutoriels → [ Créer un Skin, premiers pas ]

Ce tutoriel est un guide d'initiation à la création de Skin. Les principes de base seront présentés pas à pas à traver un petit exemple de personnalisation des fenêtres du player.

Introduction

Avec XMIX, la création de skin est extrêmement simple grâce à son éditeur intégré. Quelques minutes suffisent pour créer un skin de base. En effet, des fonctions prédéfinies permettent de définir rapidement des effets élaborés tels que bordures, coins arrondis, gradient et autre.

Intéressé ? Alors c'est parti !

Hellow world, notre premier skin

Nous allons voir dans cet exemple comment donner rapidement une apparence personnalisée au Player. Cela permettra de se familiariser avec les fonctions principales de l'éditeur.

Etape 1, décharger le skin actif

Nous allons créer un skin à part entière. Par défaut XMIX charge le skin standard. Nous allons modifier la configuration pour ne charger aucun skin. Pour cela, aller dans les options (Control+C), panneau "Apparence" et choisissez :

disposition "< Aucun >"
skin par défaut "< Aucun >"

Puis cliquer sur Ok et relancer le player (il est nécessaire de redémarrer le player pour décharger le skin courant).

Etape 2, lancer l'éditeur

Nous voila mainteant avec un player sans skin. Plutot sobre non ?

Lançons maintenant l'éditeur de skin (Control+E)

Etape 3, découverte de l'éditeur de skin

L'éditeur est composé :

d'une série d'onglets (en haut) qui représentent chacun une fenêtre.
d'une liste (à gauche) qui présente les composants visuels de la fenetre selectionnée.

La première colonne ce la liste indique le nom du composant et la deuxième son type. La croix rouge à coté du composant indique qu'il n'y a pas de définition graphique pour ce composant. La définition graphique d'un composant s'apelle une SkinBox et correspond aux paramètres de tracé d'un composant. Un skin est donc en fait un ensemble de SkinBox.

Revenons à notre liste. La premiere ligne de celle-ci correspond à la SkinBox de la fenêtre elle-même (le composant porte d'ailleur le même nom que la fenêtre, "Player"). C'est ce composant que nous allons éditer, pour cela double-cliquer dessus. Une nouvelle fenêtre s'ouvre : l'éditeur de SkinBox.

Etape 4, édition de notre première skinbox

L'éditeur de SkinBox est composé :

d'un ensemble d'onglets (en haut à gauche) qui regroupe les propriétés visuelles du composant. Nous allons y revenir dans les étapes suivantes.
de deux onglets "Preview et "Test" (en haut à droite) qui permettent respectivement d'afficher un aperçu de la SkinBox et de tester le composant (cela n'est pas toujours possible, notamment dans le cas de composant de type "fenêtre").

Etape 5, créer une bordure

Nous allons maintenant créer une bordure autour de notre fenêtre. Pour cela, sélectionner l'onglet "Cadre". Les deux propriétés principales d'un cadres sont:

les arrondis : permet d'obtenir des coins arrondis (sera vu plus tard).
la bordure : permet de définir le tracé en bord de fenêtre ainsi que différents effet (gradient, ombre, ...)

Pour chacune de ces propriétés une liste déroulante permet de choisir des valeurs prédéfinies. Choisissez la bordure 6, et clicker sur le bouton "Ombres".

L'aperçu affiche le cadre que nous venons de créer.

Etape 6, créer un fond en dégradé

Nous allons maintenant donner un fond à notre fenêtre. Selectionner l'onglet "Fond". Les types de fonds possibles sont:

Couleur : il s'agit d'une couleur unie
Gradient : dégradé de deux couleurs
Image : image graphique externe

Sélectionner "Gradient".

Pour rester dans les tons du cadre, nous allons utiliser un dégradé du noir au bleu. Cliquer sur le carré blanc afin de choisir une autre couleur.

Etape 7, changer la couleur du dégradé

Choisissez la couleur indiquez ci-dessous et cliquer sur Ok.

Etape 8, changer le type dégradé

Nous allons maintenant changer le type de gradient. Choisissez "Cercle en bas à droite" (cliquer 2 fois sur la fléche de droite).

Cliquer maintenant sur Ok (en bas à droite) afin d'appliquer cette SkinBox à la fenêtre du Player.

Etape 9, bravo !

Et voila vous venez de réaliser votre premier Skin, plutôt simple non ?

Vous pouvez remarquez que plusieurs points seraient à améliorer, notamment:

La positions des boutons , slidebar et autres
Certains boutons ont un petit contour blanc qui ne va pas avec le fond plutôt sombre

Les autres tutoriels vous apprendrons à corriger ces défauts.

Pour allez plus loin

Si vous souhaiter approndir les points que nous avons vu, vous pouvez:

Appliquer le même cadre et la même bordure aux fenetres Playlist et InfoTag
Essayer d'autres style de bordure (étape 4)
Essayer d'autre couleur et type de gradient (étapes 5 à 8)

Conclusion

Nous savons maintenant comment donner un cadre et un fond aux différentes fenêtres. Le prochain tutoriel vous apprendra a sauver vos skinbox afin d'éviter de refaire les même manipulations pour chaque fenêtre. Vous apprendrez également à sauver un Skin complet.

Tutoriels sur les Skins : [ 01. Créer un Skin, premiers pas ] → 02. Sauver et charger SkinBox et Skin →

Récupérée de « http://xmix.free.fr/wiki/index.php?title=Cr%C3%A9er_un_Skin%2C_premiers_pas »

 Nous savons maintenant comment donner un cadre et un fond aux différentes fenêtres. Le prochain tutoriel vous apprendra a sauver vos skinbox afin d'éviter de refaire les même manipulations pour chaque fenêtre. Vous apprendrez également à sauver un Skin complet.
+<HR>
+'''[[Tutoriels|Tutoriels sur les Skins]]''' :
+[ 01. Créer un Skin, premiers pas ] &rarr;
+[[02. Sauver et charger SkinBox et Skin]] &rarr;