Maitriser les cadres
Un article de XMIX.
Accueil → Documentation → Tutoriels → [ Maitriser les cadres ]
Ce tutoriel va approfondir le travail sur les cadres : arrondis, dégradé, effet de relief, bords personnalisés
| Page en cours de création |
|---|
Sommaire |
Introduction : Un peu de théorie
Pourquoi des cadres ? Vaste question qui en entraine une autre, qu'est-ce qu'un "cadre" ? D'après le dico:
- "Bordure de bois ou d'autre matière dans laquelle on place un dessin, un tableau, etc."
- "Espace limité (sens figuré)"
On peut donc distinguer deux notions : encadrement et cadrage. La premiere évoque pluto l'esthétisme, c'est à dire le travail sur la bordure pour mettre en valeur le contenu du cadre. La deuxième notion, surtout relative aux domaines de l'audiovisuel et de la photographie, évoque plutôt le choix de ce qui est représenté (la prise de vue).
Pour en revenir à l'informatique et aux interfaces graphique utilisateur, il s'agit de délimiter visuellement le périmètre fonctionnel d'un composant (fenêtre, barre de défilement, ...). Afin de "matérialiser" ces interfaces, un effet de perspective est souvent réalisé en utilisant des bordures qui donnent une impression de relief (en général avec un point de vue en haut à gauche de l'écran, càd que l'ombre est en bas à droite des objets graphiques).
Deux exemples très courant : les boutons et les fenêtres. Regardez sur votre écran, vous devez en voir plusieurs, avec différents types de bordure. Nous allons dans ce tutoriel voir les fonctions offertes par XMIX pour réaliser nos propres cadres et bordures.
Bordures et ombrages, présentation des paramètres
Avant de créer notre premier cadre, nous allons regarder les différents paramètres de l'éditeur. Pour cela, reprenez le skin du tutoriel précédent et éditer la skinbox de la fenêtre du player. Sélectionner ensuite le type de bordure "3".
Une bordure est composé d'une ou plusieurs ligne, chaque ligne ayant sa propre couleur. La bordure de notre exemple est composé de quatre lignes, leurs couleurs respectives sont affichées en face du label "Couleur".
Cliquez maintenant sur le bouton "Ombres".
Les ombres permettent de définir des couleurs spécifiques pour les bords bas et droit du cadre. Par défaut, les couleurs sont celle de la bordure dans l'ordre inverse mais il est possible de définir nos propres couleurs.
Vous pouvez comparer la bordure sans ombre et avec ombre dans l'aperçu de la skinbox.
Création d'un premier cadre
Jusqu'à présent nous n'avions utilisé que des bordures prédéfinies, nous allons maintenant créer une bordure à part entiere. Celle-ci sera composée d'un dégradé du jaune au noir avec un effet d'ombre.
Commençons par définir la couleur de la bordure, pour cela cliquer sur le rectangle affichant les couleurs des lignes.
Une fenêtre s'affiche qui permet de sélectionner et de modifier chaque couleur. Les couleurs sont numérotés de 0 à N-1.
Sélectionner la couleur numéro 0, cliquer sur "éditer" et choisissez la couleur jaune.
Chaque couleur peut ainsi être modifiée individuellement. Cette fenêtre permet également de faire des dégradés d'une couleur à une autre. Nous allons réaliser un gradient du jaune au noir sur nos quatre couleurs. Pour cela, choisissez "gradient de 0 à 3" et cliquer sur le point d'exclamation.
Bravo, vous venez de faire un premier dégradé. Vous pouvez cliquer sur Ok.
Occupons nous maintenant de l'ombre, pour cela cliquer sur "Ombre" (si vous aviez laissez l'ombre précédente cliquer une première fois pour déselectionner puis re-cliquer).
L'ombre est automatiquement initialisée avec l'inverse de notre gradient. Cliquer sur Ok pour appliquer cette bordure à la fenêtre du player.
Et voila le résultat.
D'un point de vue esthétique le jaune n'est pas forcément la couleur qui va le mieux avec notre fond bleu mais le but était ici de se concentrer sur la bordure. A vous de jouer pour trouver les combinaisons de couleurs idéales.
Un cadre plus complexe
Nous allons maintenant réaliser une bordure avec plusieurs gradients. Editer la skinbox de la fenetre du player et sélectionner la bordure 7. Suivez ensuite les étapes ci-dessous (cliquez sur les images pour les agrandir si besoin)
Définition de la couleur 2
Définition de la couleur 5
Création des gradients 0 à 2, 2 à 5 et 5 à 8
Suppression de l'ombre et coints arrondis à 5%
Résultat
Pour allez plus loin
Si vous souhaitez approfondir les points que nous venons de voir, vous pouvez essayer de reproduire une bordure existante. par exemple, faite une capture écran d'une fenêtre dont vous souhaitez reproduire la bordure, collez la capture dans un éditeur d'image et zoomez afin de bien voir les différentes lignes qui composent la bordure. Il ne vous reste ensuite qu'à reproduire ces lignes.
Les cadres sont surtout utilisés pour ajouter une bordure aux fenêtres mais ils peuvent aussi être utiles pour d'autre composants (boutons par exemple). A vous d'essayer !
Conclusion
Vous savez maintenant:
- Définir une bordure avec plusieurs couleurs
- Réaliser un effet d'ombrage
- Créer des dégradés de couleur dans la bordure
Le prochain tutoriel portera sur l'utilisation des images.
Tutoriels sur les Skins : 02. Sauver et charger SkinBox et Skin ← [ 03. Maitriser les cadres ] → 04. Maîtriser les images
