pixel

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