Maitriser les cadres

Un article de XMIX.

(Différences entre les versions)
Jump to: navigation, search
Version du 27 mars 2008 à 20:14
Loic (Discuter | contribs)
(Bordures et ombrages)
← Différence précédente
Version du 27 mars 2008 à 20:31
Loic (Discuter | contribs)
(Bordures et ombrages)
Différence suivante →
Ligne 25: Ligne 25:
== Bordures et ombrages == == Bordures et ombrages ==
-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".+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".
[[image:01_skinboxedit-cadre-style3.png]] [[image:01_skinboxedit-cadre-style3.png]]
 +
 +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".
[[image:03_skinboxedit-cadre-style3-ombre.png]] [[image:03_skinboxedit-cadre-style3-ombre.png]]
 +
 +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.
 +
 +[[Image:bordure-ombre-delim.png]]
[[image:04_skinboxedit-cadre-style-compare.png]] [[image:04_skinboxedit-cadre-style-compare.png]]

Version du 27 mars 2008 à 20:31

AccueilDocumentationTutoriels → [ 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".

image:01_skinboxedit-cadre-style3.png

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".

image:03_skinboxedit-cadre-style3-ombre.png

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.

Image:bordure-ombre-delim.png

image:04_skinboxedit-cadre-style-compare.png

image:05_player-style3.png

Création d'un premier cadre jaune

image:051_skinboxedit-cadre-style3-ombre.png

image:06_skinboxedit-linecolor1.png

image:06_skinboxedit-linecolor2.png

image:07_skinboxedit-linecolor.png

image:08_skinboxedit-linecolor.png

image:09_skinboxedit.png

image:10_skinboxedit.png

image:11_player.png

Copie d'un cadre existant

Pour allez plus loin

Conclusion