Maitriser les cadres
Un article de XMIX.
| Version du 27 mars 2008 à 21:14 Loic (Discuter | contribs) (→Copie d'un cadre existant) ← Différence précédente |
Version du 27 mars 2008 à 21:19 Loic (Discuter | contribs) (→Copie d'un cadre existant) Différence suivante → |
||
| Ligne 83: | Ligne 83: | ||
| == Copie d'un cadre existant == | == Copie d'un cadre existant == | ||
| - | [[Image:01_skinboxedit-border02.jpg|thumb|100px|left|Légende]] | + | [[Image:01_skinboxedit-border02.jpg|thumb|200px|left|Légende]] |
| - | [[Image:01_skinboxedit-border.jpg|thumb|100px|left|Légende]] | + | [[Image:01_skinboxedit-border.jpg|thumb|200px|left|Légende]] |
| [[Image:02_skinboxedit-linecolor01.jpg|thumb|100px|left|Légende]] | [[Image:02_skinboxedit-linecolor01.jpg|thumb|100px|left|Légende]] | ||
| [[Image:03_skinboxedit-linecolor01.jpg|thumb|100px|left|Légende]] | [[Image:03_skinboxedit-linecolor01.jpg|thumb|100px|left|Légende]] | ||
Version du 27 mars 2008 à 21:19
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érimetre fonctionnel d'un composant (fenetre, 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 fenetres. 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
Avant de créer notre premier cadre, nous allons regarder les différents paramétres. Pour cela, reprenez le skin du tutoriel précédent et editer la skinbox de la fenêtre du player. Selectionner 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éfinie, nous allons maintenant créer une bordure à part entiere. Celle-ci sera composé 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 selectionner et de modifier chaque couleur. Les couleurs sont numérotés de 0 à N-1.
Sélectionner la couleur numéro 0, cliquer sur "editer" 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.
Copie d'un cadre existant
