DESIGN GRAPHIQUE A. DAAIF ENSET Université Hassan II

Présentation au sujet: "DESIGN GRAPHIQUE A. DAAIF ENSET Université Hassan II"— Transcription de la présentation:

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

2 Design Graphique Pourquoi ? Presse (journaux, revues,…)
Publicité (plaquette, dépliant, flyer) Web (charte graphique, bannière…) Identité visuelle (logo, étendard…) …

3 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

4 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

5 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 …

6 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

7 Représentation de la couleur
Sur l’écran d’un ordinateur on utilise la synthèse additive des couleurs primaires.

8 Représentation de la couleur
Pour l’impression, on utilise la synthèse soustractive

9 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

10 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])

11 Modèle RGB Correspond à la valeur RGB en hexadécimal

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

13 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)

14 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 ?

15 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 = octets

16 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

17 Histogramme d’une image

18 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)

19 Contraste

20 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

21 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