DESIGN GRAPHIQUE A. DAAIF ENSET Université Hassan II Mohammedia-Casablanca [email protected] Design Graphique Pourquoi ? Presse (journaux, revues,…) Publicité (plaquette, dépliant, flyer) Web (charte graphique, bannière…) Identité visuelle (logo, étendard…) … Deux familles d’images Numériques Image Bitmap ou matricielle Constituée d’une matrice de points appelés pixels Chaque pixel est un point de couleur codé sur un certain nombre de bits Plus le nombre de bits par pixel augmente plus la qualité de l’image est bonne et plus la taille du fichier augmente pixel Deux familles d’images Numériques Image Vectorielle. Constitué d’une suite de fonctions de dessin ou primitives (ligne, rectangle, ellipse, courbe de Bezier …) Le fichier enregistre les primitives et leur caractéristiques Il s’ensuit qu’il est plus léger et garde la même qualité après redimensionnement Design Graphique A la base, il y a la couleur. C’est quoi une couleur ? Onde électromagnétique Spectre visible (rouge violet) Au dessous les infrarouges Au dessus les UV puis les X et … Représentation de la couleur Les couleurs sont synthétisées à partir des couleurs primaires. Selon qu’il s’agisse d’affichage sur l’écran d’un ordinateur ou d’impression sur papier les modes sont différents. Sur l’écran d’un ordinateur on utilise la synthèse additive des couleurs primaires. Pour l’impression, on utilise la synthèse soustractive Représentation de la couleur Sur l’écran d’un ordinateur on utilise la synthèse additive des couleurs primaires. Représentation de la couleur Pour l’impression, on utilise la synthèse soustractive Représentation de la couleur En variant les intensités des couleurs primaires, on peut obtenir une multitude de couleurs. En fonction du nombre de bits alloués à chaque pixel, on a : 1 bit : 21 = 2 couleurs (en général Noir et Blanc) 8 bits : 28 = 256 couleurs ( ou niveaux de gris) 24 bits : 224 = 16 Millions de couleurs Modèle colorimétriques Pour représenter les couleurs en informatique, on utilise des modèles colorimétriques. Les modèles les plus utilisés : Modèle RVB (RGB) Modèle TSL (HSL) Modèle CMYK (CMJN) Modèle L*a*b (L*[r->g]*[y->b]) Modèle RGB Correspond à la valeur RGB en hexadécimal Modèle TSL Luminosité Désaturation - saturation Caractéristiques d’une image Dimensions : Largeur et hauteur en pixels Nombre de pixels = largeur x hauteur Taille en mémoire : Pour les images RVB un pixel est codé sur 3 ou 4 octets Taille = largeur x hauteur x 3 (ou x 4) Caractéristiques d’une image Résolution d’une image : Un écran d’ordinateur affiche 72 ppp pixels par pouce (1 pouce = 2,54cm) En impression, on utilise des résolutions différentes selon la qualité du rendu souhaitée. (200 à 300dpi) (dpi (dot per inch) Quelle est la taille en mémoire d’une image au format A4 (297mmx210mm) ayant une résolution de 300dpi ? A4 => 29,7cm x 21cm Surface = 623,7 cm2 1 pouce = 2,54 cm 1 cm2 = 1/2,542 pouce2 Surface = 623,7/2,452 pouce2 Surface = 96,673 pouce2 Taille = 96,673 x 300 x 300 x 4 Taille = 34 802 529 octets Caractéristiques d’une image Histogramme d’une image : Graphique qui représente la fréquence d’apparition d’une intensité. R (0->255), V (0->255), B (0->255) L’axe x représente l’intensité de 0 à 255 L’axe y représente le nombre d’apparition d’1 intensité donnée Histogramme d’une image Caractéristiques d’une image Contraste : Représente la différence entre les parties les plus claires et les parties les plus sombres d’une image. Augmenter le contraste d’une image consiste à éclaircir les parties les plus claires et assombrir les parties les plus sombres. (et recalculer les points intermédiaires) Contraste Formats d’images pour le web Les images matricielles : jpeg : Joint Photographic Experts Group gif : Graphics Interchange Format png : Portable Network Graphics Les images vectorielles : svg : Scalable Vector Graphics Observations Animation Transparence Nombre de Couleurs Compression Comparaison entre les Formats d’images Images matricielles JPEG oui 16 Millions non non IBM … GIF oui 256 Max oui 1bit oui propriétaire PNG-8 oui 256 Max oui 1bits non W3C PNG-24 oui 16 Millions oui 8bits non W3C Images Vectorielles SVG 16MC 8bits oui Basé sur XML