DESIGN GRAPHIQUE A. DAAIF ENSET Université Hassan II aziz@daaif.net Mohammedia-Casablanca aziz@daaif.net

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

Désaturation - saturation Modèle TSL Désaturation - saturation Luminosité

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

Comparaison entre les Formats d’images Compression Nombre de Couleurs Transparence Animation Observations Images matricielles JPEG oui 16 Millions non IBM … GIF 256 Max oui 1bit propriétaire PNG-8 oui 1bits W3C PNG-24 oui 8bits Images Vectorielles SVG 16MC 8bits Basé sur XML