Créer des hypermédias en situation pédagogique

2/06/01

La charte graphique

· L'espace écran : C'est l'espace dégagé pour l'affichage. Pour un cédérom c'est généralement la totalité de l'écran (800*600). Sur le Web, c'est plus variable car cela dépend de l'utilisateur et de la configuration du navigateur. Vous ignorez quel navigateur utilise votre lecteur et quelle est sa configuration : Utilise-t-il une barre des tâches toujours visible ? Quelles barres d'outils de son navigateur conserve-t-il ? A moins de forcer le plein écran vous aurez bien du mal à définir une cohérence graphique de votre page écran et vous devrez prendre en compte les ascenseurs ! Ne pensez plus 800*600 mais plutôt 750*450. Si vous utilisez les ascenseurs 750*1200 au maximum.
Bernard.gobert

Quelques liens

Cours de Jussieu sur les images numériques abordables et pratiques.
Palettes prédéfinies chez palletman sans oubliez ce merveilleux site qu'est chroma.
Pour les sites dédiés à la création graphique, ils sont nombreux, vous pouvez dans un premier temps découvrir Praktica, Imdk, Graphiland et Tarentule. Il vous suffira ensuite de suivre les nombreux liens. Ne paniquez pas devant l'extraordinaire qualité graphique de certains sites : ce sont des professionnels ! Si vous ne devez retenir qu'un conseil: faites simple ! Gommez ! Jusqu'à ce qu'il ne reste que l'essentiel. Faites-vous aussi plaisir en jouant avec l'inutile, car, comme le dit le Cyrano de Rostand "C'est bien plus beau, lorque c'est inutile"

En créant un maillage d'équilibre sur une feuille vous pouvez définir des zones (taille de l'image, du bloc texte…) qui vont se répondre de manière harmonieuse. C'est la technique utilisée par les architectes grecs dans la conception d'un temple.Cette rigueur, utile au début doit être compensée par une certaine fantaisie… on utilise dans ce cas des redondances dites "de sourire". A un rectangle noir de 20 sur 14 placé en haut à gauche répondra " en souriant " un cercle blanc d'un diamètre de 14 placé en bas à droite… Exercez votre œil en observant la mise en page de certains magazines ou de quelques webzines célèbres.
Solution 1 :Définissez votre espace de travail (800*600 par exemple) Tracez diagonales et médiatrices. Vous obtenez 4 espaces de 400*300… continuez à tracer médianes et médiatrices… On peut dire que tout espace pouvant être défini à partir des unités obtenues entretient un rapport d'harmonie (en jaune sur la figure) avec les autres.
Solution 2 (préférable) On divise l'espace en 3 en longueur comme en hauteur… et on fait le même travail. Il vous suffit ensuite de placer cette grille en arrière plan : elle vous servira de guide de taille pour définir la taille de vos objets et blocs de texte et de guide de placement pour en définir l'emplacement.
Ces deux solutions s'adressent à des débutants solitaires… rien ne vaut le regard d'un professeur d'arts plastiques qui vous offrira des solutions originales et légères.

Sur ordinateur on fuit comme la peste les polices à empattements comme le Times pour préférer les polices bâton comme l'Arial ou le Verdana. On évite les écritures fantaisistes (script) en particulier avec des majuscules. On fixe avant toute chose ses choix de manière équilibrée : Titre 20 G Sous titre / sur titre 16 Intertitre 13 G texte 12 légende 11 ital. (-4 , -3, -2, -1) . On obtient ainsi une hiérarchie équilibrée… N'oubliez pas la graisse (gras / maigre) et les couleurs. La définition des styles de texte est un préalable à toute conception et fait partie intégrante de la charte graphique.

Evitons deux erreurs féquentes: la première consiste à multiplier les polices de caractères (une ou deux au maximum et jouez avec les tailles et le style), la seconde consiste à penser qu'on renforce la lisibilité d'un titre en l'écrivant en capitales. C'est faut! Restez en minuscule et augmentez la taille et la graisse de la police.

Pour former l'ensemble des couleurs on utilise les 3 couleurs primaires (rouge, jaune, bleu ou jaune, magenta, cyan ) ainsi que le noir et le blanc. Les couleurs secondaires sont un mélange égal de deux couleurs primaires (orange, vert, violet). Les couleurs tertiaires sont un mélange entre des couleurs primaires et secondaires contiguës : orange + un peu de jaune = jaune-orange, orange + un peu de rouge= rouge-oranger. Ces couleurs se situent sur le cercle 3.En ajoutant un peu de blanc on obtient des teintes (cercles intérieurs). En ajoutant un peu de noir on obtient des nuances (cercles extérieurs). Les couleurs complémentaires sont celles qui s'opposent dans le cercle (vert -rouge). Couleurs monochromatiques = couleur+nuance+teinte

Une charte graphique des couleurs simple consiste à jouer sur les couleurs complémentaires. Il suffit de tracer à partir d'une couleur un triangle équilatéral pour obtenir les 3 couleurs complémentaires. On peut aussi jouer sur une gamme monochromatique et travailler sur les teintes et les nuances... question de goût!

N'oubliez pas que les couleurs sont très fortement connotées. Le rouge est lié à la passion, un camaïeu de bleu clair ou glacé tendra vers la pureté, le noir peut être morbide ou très élégant, le jaune est dynamique…

En matières de couleurs les théories sont nombreuses et il est difficile de tracer une gamme cohérente si on ne possède pas cette sensibilité propre aux artistes. Le professeur d'arts et là aussi le plus souvent indispensable. On peut tout à fait établir une charte des couleurs cohérente en utilisant des couleurs incompatibles… tout dépend des surfaces utilisées par les unes et les autres. N'hésitez pas à consulter des sites comme Chroma qui vous donneront quelques pistes.

Une image informatique semble codée à partir d'un mélange des couleurs rouge, vert et bleu (RVB). Il s'agit en fait d'un code. Sans entrer dans le détail, il faut savoir que le codage se fait sur 256 possibilités : en informatique tout se base sur le comptage hexadécimal (on progresse ainsi 1/0, 8, 16, 32, 64, 256, 65 336, 16 777 216 ou 256x256x256). Pour concevoir une couleur on peut dont faire varier sa teinte (de 0 à 255), sa saturation (de 0 à 255) et sa luminosité (de 0 à 255) et obtenir plus de 16 millions de possibilités, bien supérieures à ce que l'œil peut percevoir.
La même couleur peut donc être codée en utilisant des palettes RVB, TSL et même CMJN (cyan, magenta, jaune, noir)qui sera réservée pour les travaux d'impression (on parle de quadrichromie). Sur le Web, afin que toutes les couleurs s'affichent à l'identique sur toutes les plates-formes on utilise une palette Web (proposée par défaut par Dreamweaver ou Flash) et ne comptant que 204 couleurs.
En informatique le vert ci-dessous n'existe pas on dira RVB 0,153,0 ou TSL 80,240,72…