Créer un Skin, premiers pas
Un article de XMIX.
| Version du 7 mars 2008 à 13:02 Loic (Discuter | contribs) (→Hellow world, un premier skin) ← Différence précédente |
Version actuelle Drshiva (Discuter | contribs) (→Conclusion) |
||
| Ligne 1: | Ligne 1: | ||
| - | ← <small>[http://xmix.free.fr/wiki/index.php?title=Tutoriels Revenir]</small> | + | <small>[[Accueil]] → [[Documentation]] → [[Liste des tutoriels|Tutoriels]] → [ Créer un Skin, premiers pas ]</small> |
| - | Ce tutoriel est un guide pour la création de Skin. Aprés avoir présenté les grands principes, un petit exemple sera étudié pas à 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. Cet exemple sera repris dans les autres tutoriels. | ||
| - | {| rules="all" style="border: 0px solid #999; padding-right: 0.5em;" cellspacing="0" cellpadding="4" | ||
| - | |-bgcolor="#FF8080" | ||
| - | ! '''Page en cours de création''' | ||
| - | |} | ||
| + | == Introduction == | ||
| - | == Principe == | + | 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. |
| - | 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. Intéressé ? avant de se lancer voyons d'abord les grands principes. | + | Intéressé ? Alors c'est parti ! |
| - | La représentation graphique de chaque composant visuel de l'interface XMIX peut être redéfinie. | + | == Hello world, notre premier skin == |
| - | Il s'agit avant tout d'imaginer l'interface que vous souhaitez réaliser, au moins dans ses grandes lignes (forme, zones transparentes, bordure). Il est quasimment possible de tout faire, en effet le fond d'une fenetre peut être définit avec une image, ce qui laisse une liberté totale. De plus, des fonctions prédéfinie permettent de dessiner des bordures, des coins arrondis et autre. | + | 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. |
| - | Une fois que nous savons dans les grandes lignes ce que nous voulons faire, il va s'agir de: | + | === Etape 1, décharger le skin actif === |
| - | *Créer le fond de chaque fenêtre. | + | 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, allons dans les options (Control+C), panneau "Apparence" et choisissons : |
| - | :Deux possibilités, soit utiliser une couleur unie ou un dégradé, soit utiliser une image. Créer une image pour le fond et les boutons (grâce à une recherche sur le web, une capture écran des logiciels qui ont un bon look ou bien grâce à des logiciels | + | *disposition "< Aucun >" |
| - | *Associer des images aux composants (boutons, slidebar et autres) des fenetres | + | *skin par défaut "< Aucun >" |
| - | *Ajuster la positions des composants | + | |
| - | *Finitions esthétiques | + | |
| + | [[Image:01_Config_NoSkin.png]] | ||
| - | ''Remarque: il peut être pratique de partir d'un skin existant qui ressemble à notre futur skin'' | + | Puis cliquons sur Ok et relançons le player (il est nécessaire de redémarrer le player pour décharger le skin courant). |
| - | Avant de se lancer, les éléments pourront vous être utiles (non nécessaire pour ce tuto) : | ||
| - | * Un logiciel d'édition d'images : Gimp, Photoshop, paint, ... | ||
| - | * Quelques d'icônes et images (à moins que vous n'envisagiez de tout dessiner). Pour cela, visitez la [[Collection d'images pour les Skins]]. | ||
| + | ===Etape 2, lancer l'éditeur=== | ||
| - | Voila pour la théorie, maintenant un peu de pratique. | + | Nous voila maintenant avec un player sans skin. Plutôt sobre non ? |
| - | == Hellow world, un premier skin == | + | [[Image:02_Player_NoSkin01.png]] |
| - | Objectif : faire notre premier skin | + | Lançons maintenant l'éditeur de skin (Control+E) |
| - | {| rules="all" style="border: 1px solid #999; padding-right: 0.5em;" cellspacing="0" cellpadding="4" | + | <br> |
| - | |-bgcolor="#DFDFDF" | + | |
| - | ! Actions !! Aperçu | + | |
| - | |- | + | |
| - | | Nous allons partir du skin "SmallShip" || [[Image:01_choix_skin_small02.PNG|center]] | + | |
| - | |- | + | |
| - | | Lancer l'éditeur (Control+E) || [[Image:03_skin_editor01_small.PNG|center]] | + | |
| - | |- | + | |
| - | | Choisir une fenêtre redimenssionable || [[Image:04_skinbox_editor_redim02.PNG|center]] | + | |
| - | |- | + | |
| - | | Définir un gradient || [[Image:05_skinbox_editor_gradient02.PNG|center]] | + | |
| - | |- | + | |
| - | | Ajouter un cadre || [[Image:06_skinbox_editor_cadre03.PNG|center]] | + | |
| - | |- | + | |
| - | | Cela donne || [[Image:07_skin_editor_skinmodif01.PNG|center]] | + | |
| - | |- | + | |
| - | | Changeons la taille de la fenetre || [[Image:08_skin_editor_skinmodif01-redim.PNG|center]] | + | |
| - | |- | + | |
| - | | Ajoutons l'écran || [[Image:09_skin_editor_select-ecran.PNG|center]] | + | |
| - | |- | + | |
| - | | Positionnons l'écran || [[Image:10_skin_editor_positionnement.PNG|center]] | + | |
| - | |- | + | |
| - | | Cela donne || [[Image:11_skin_editor_skinmodif01-posecran.PNG|center]] | + | |
| - | |} | + | |
| - | Bravo ! | + | ===Etape 3, découverte de l'éditeur de skin=== |
| - | == Boite à outils == | + | 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 fenêtre selectionnée. | ||
| - | Une collection d'images et de modèles standards est en cours de création afin de faciliter la création des skins: | + | La première colonne de la liste indique le nom du composant et la deuxième son type. La croix rouge à côté du composant indique qu'il n'y a pas de définition graphique pour ce composant. La définition graphique d'un composant s'appelle une ''SkinBox'' et correspond aux paramètres de tracé d'un composant. Un skin est donc en fait un ensemble de SkinBox. |
| - | * [[Collection d'images pour les Skins]] | + | |
| - | Sur le [http://xmix.free.fr/phpBB3/viewforum.php?f=24 forum des contributions], vous trouverez plusieurs Skins qui pourront servir de base afin de réaliser vos propre skin. | + | [[Image:03_SkinEditor_NoSkin02.png]] |
| + | |||
| + | Revenons à notre liste. La premiere ligne de celle-ci correspond à la SkinBox de la fenêtre elle-même (le composant porte d'ailleurs 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"). | ||
| + | |||
| + | [[Image:031_SkinBox_Intro01.png]] | ||
| + | |||
| + | ===Etape 5, créer une bordure=== | ||
| + | |||
| + | Nous allons maintenant créer une bordure autour de notre fenêtre. Pour cela, sélectionnons l'onglet "Cadre". Les deux propriétés principales d'un cadres sont: | ||
| + | * les arrondis : permet d'obtenir des coins arrondis (cela sera vu plus tard). | ||
| + | * la bordure : permet de définir le tracé en bord de fenêtre ainsi que différents effets (gradient, ombre, ...) | ||
| + | |||
| + | Pour chacune de ces propriétés une liste déroulante permet de choisir des valeurs prédéfinies. Choisissons la bordure 6, et cliquons sur le bouton "Ombres". | ||
| + | |||
| + | [[Image:04_SkinBox_DefBorder01.png]] | ||
| + | |||
| + | 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. Sélectionnons 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électionnons "Gradient". | ||
| + | |||
| + | [[Image:05_SkinBox_DefBgGrad-A01.png]] | ||
| + | |||
| + | Pour rester dans les tons du cadre, nous allons utiliser un dégradé du noir au bleu. Cliquons sur le carré blanc afin de choisir une autre couleur. | ||
| + | |||
| + | ===Etape 7, changer la couleur du dégradé=== | ||
| + | |||
| + | Choisissons la couleur indiquée ci-dessous et validons en cliquant sur Ok. | ||
| + | |||
| + | [[Image:06_SkinBox_DefBgGrad-SelectColor01.png]] | ||
| + | |||
| + | ===Etape 8, changer le type dégradé=== | ||
| + | |||
| + | Nous allons maintenant changer le type de gradient. Choisissons "Cercle en bas à droite" (cliquer 2 fois sur la flèche de droite). | ||
| + | |||
| + | [[Image:07_SkinBox_DefBgGrad-B01.png]] | ||
| + | |||
| + | Cliquons maintenant sur Ok (en bas à droite) afin d'appliquer cette SkinBox à la fenêtre du Player. | ||
| + | |||
| + | ===Etape 9, bravo !=== | ||
| + | |||
| + | Et voilà vous venez de réaliser votre premier Skin, plutôt simple non ? | ||
| + | |||
| + | [[Image:08_SkinEditor_NewSkin03.png]] | ||
| + | |||
| + | Vous pouvez remarquer 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 apprendront à corriger ces défauts. | ||
| + | |||
| + | == Pour aller plus loin == | ||
| + | |||
| + | Si vous souhaitez approfondir les points que nous venons de voir, vous pouvez: | ||
| + | *Appliquer le même cadre et la même bordure aux fenêtres Playlist et InfoTag | ||
| + | *Essayer d'autres styles de bordure (étape 4) | ||
| + | *Essayer d'autres couleurs et types de gradient (étapes 5 à 8) | ||
| + | |||
| + | == Conclusion == | ||
| + | |||
| + | Nous savons maintenant comment donner un cadre et un fond aux différentes fenêtres. Le prochain tutoriel montrera comment sauver ses skinbox afin d'éviter de refaire les mêmes manipulations pour chacune d'elles. Il montrera également comment sauver un Skin complet. | ||
| + | |||
| + | |||
| + | <HR> | ||
| + | '''[[Tutoriels|Tutoriels sur les Skins]]''' : | ||
| + | [ 01. Créer un Skin, premiers pas ] → | ||
| + | [[Sauver et charger SkinBox et Skin|02. Sauver et charger SkinBox et Skin]] | ||
| + | |||
| + | [[Catégorie:Tutoriel]] | ||
Version actuelle
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. Cet exemple sera repris dans les autres tutoriels.
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 !
Hello 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, allons dans les options (Control+C), panneau "Apparence" et choisissons :
- disposition "< Aucun >"
- skin par défaut "< Aucun >"
Puis cliquons sur Ok et relançons le player (il est nécessaire de redémarrer le player pour décharger le skin courant).
Etape 2, lancer l'éditeur
Nous voila maintenant avec un player sans skin. Plutôt 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 fenêtre selectionnée.
La première colonne de la liste indique le nom du composant et la deuxième son type. La croix rouge à côté du composant indique qu'il n'y a pas de définition graphique pour ce composant. La définition graphique d'un composant s'appelle 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'ailleurs 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électionnons l'onglet "Cadre". Les deux propriétés principales d'un cadres sont:
- les arrondis : permet d'obtenir des coins arrondis (cela sera vu plus tard).
- la bordure : permet de définir le tracé en bord de fenêtre ainsi que différents effets (gradient, ombre, ...)
Pour chacune de ces propriétés une liste déroulante permet de choisir des valeurs prédéfinies. Choisissons la bordure 6, et cliquons 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. Sélectionnons 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électionnons "Gradient".
Pour rester dans les tons du cadre, nous allons utiliser un dégradé du noir au bleu. Cliquons sur le carré blanc afin de choisir une autre couleur.
Etape 7, changer la couleur du dégradé
Choisissons la couleur indiquée ci-dessous et validons en cliquant sur Ok.
Etape 8, changer le type dégradé
Nous allons maintenant changer le type de gradient. Choisissons "Cercle en bas à droite" (cliquer 2 fois sur la flèche de droite).
Cliquons maintenant sur Ok (en bas à droite) afin d'appliquer cette SkinBox à la fenêtre du Player.
Etape 9, bravo !
Et voilà vous venez de réaliser votre premier Skin, plutôt simple non ?
Vous pouvez remarquer 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 apprendront à corriger ces défauts.
Pour aller plus loin
Si vous souhaitez approfondir les points que nous venons de voir, vous pouvez:
- Appliquer le même cadre et la même bordure aux fenêtres Playlist et InfoTag
- Essayer d'autres styles de bordure (étape 4)
- Essayer d'autres couleurs et types de gradient (étapes 5 à 8)
Conclusion
Nous savons maintenant comment donner un cadre et un fond aux différentes fenêtres. Le prochain tutoriel montrera comment sauver ses skinbox afin d'éviter de refaire les mêmes manipulations pour chacune d'elles. Il montrera également comment sauver un Skin complet.
Tutoriels sur les Skins : [ 01. Créer un Skin, premiers pas ] → 02. Sauver et charger SkinBox et Skin
