les fondements du traitement des images numériques fixes
TRANSCRIPT
Les fondements du traitement desimages numériques fixe s
Année 2006 - 2007
APRES-MIDI
I – Approche de la conception d’un projet graphiqueMise en application au travers d’un travail en groupe sur un exercice imposé
II – Approche de la réalisation d’un travail graphique personnelMise en application au travers d’un travail en groupe sur projet personnel
MATIN
1 – Processus de production de projets multimédia
- 1 Schéma Général approche par métiers- 2 Quelques questions à ne pas oublier lors de la conception
II – Le traitement des images
- 1 Schéma général traitement des images et flux de production- 2 Deux familles d’images : Bitmap et vectorielles- 3 Formats de fichiers images – Tableau comparatif Photoshop Illustrator- 4 Définition rapide d’un pixel- 5 Caractéristiques techniques des images numériques
- 6 Passage d’un logiciel à l’autre : Mode d’importation et d’exportation - Conservation des attributs
A – Définition / Résolution / Taille B – Contrôle et modifications de ces caractéristiques dans Photoshop et IllustratorC – Le rééchantillonnageD – Codage de la couleur et de la transparenceE – Poids d’une image La compression des images – Fenêtre « Enregistrer pour le Web »
Programme Année 2006 - 2007
1II – La gestion des fichiers Images : Présentation d’Adobe Bridge
Images
Produits
Site InternetCd-RomDVDAnimations
Chefferie de projet Ecriture multimédia
1 2 3 4 5 6
1 - Écriture du projet
2 – Définition des cibles / Analyse des marchés
3 – Réalisation du cahier des charges / Répartition des tâches
4 – Constitution des médias (contenants et contenus)
5 – Intégration des médias
6 – Validation du projet
I – Processus de production des projets multimédia
II – Traitement des images1 - Schéma Général
ACQUISITIONTRAITEMENTPRODUCTION UTILISATION FINALE
Scanners
APN
Sites Internet
Moniteur
UC / Système
Logiciels
Imprimante
Sites Internet
Presses / photocopieuses
Produits nomades
II – Traitement des images1 - Schéma Général
ACQUISITIONTRAITEMENTPRODUCTION UTILISATION FINALE
Scanners
APN
Sites Internet
Moniteur
UC / Système
Logiciels
Imprimante
Sites Internet
Presses / photocopieuses
Produits nomades
1
CaractéristiquesÀ contrôler
FormatsFichiers
2 Taille
3 Résolution
4 Affichage
5 Poids
6 Couleurs
7
CaractéristiquesÀ contrôler
8 CalibrageCouleurs
9 ContraintesLogiciels
10 UtilisationFinale
CohérenceVisuelle 1
2
3
5
6
2 - Images Bitmap et vectorielles
Il existe deux types d’images numériques : Bitmap et vectorielles
- Les premières utilisent une grille (mosaïque) composée de pixels auxquels sont attribuées une position et une valeur chromatique spécifique. C’est ce qui différencie fondamentalement les images numériques des photographies qui sont dîtes « à tons continus ». Les images bitmap sont dépendantes de la résolution et contiennent donc un nombre fixe de pixels.
-Les graphiques vectoriels sont composés de lignes et de courbes définies par des objets mathématiques appelés vecteurs. Les vecteurs décrivent une image selon ses caractéristiques géométriques. Ils sont indépendants de la résolution. Ces graphiques ne seront traduits en pixels que lors de leur « optimisation » au format image compressé.
-Avantages et inconvénients
Les images vectorielles ont deux avantages / aux images bitmap :
- Aucune perte de qualité quelque soit la mise à l’échelle : Les images composées d’objets géométriques sont insensibles aux problèmes d’échelle et donc moins sujets aux problèmes de pixellisation que leurs homologues bitmap. Les lignes et contours d’objets sont recalculées et non pas recomposées à partir de points. Les formes sont d’autant plus lisses et le crénelage est moins fort sur les images à faible résolution (72 dpi) et de taille importante. C’est pourquoi il est préférable d’opter pour un logiciel de traitement d’images vectorielles (comme par exemple Illustrator) pour créer des images « lisses » et dont l’échelle est susceptible de varier de façon importante suivant le support sur lequel est posé l’image.
Lorsque l’on agrandit une image bitmap, le logiciel a deux possibilités : soit il conserve le nombre de pixels qui compose l’image, la mosaïque se fait donc plus « lâche » (crénelage), soit il augmente le nombre de pixels. L’ordinateur ne peut pas inventer la couleur des pixels ainsi créés il le fait donc « comme il peut »(rééchantillonage) ce qui se traduit obligatoirement par une perte de qualité de l’image.
- Sélections d’objets et gestion des calques facilitées :
Pour sélectionner un objet précis dans un logiciel bitmap (Photoshop par exemple) il est recommandé de l’isoler sur un calque spécifique sans quoi vous risquez de ne pas pouvoir le saisir sans son environnement, c’est-à-dire avec les autres formes autour de lui ou qui le chevauche. Dans un logiciel vectoriel chaque objet et défini par un fond et un contour. Ils peuvent être saisi indépendamment les uns des autres et déplacer aisément d’un calque àl’autre en les faisant tout simplement glisser. Le travail de calques est donc plus simple dans Illustrator que dans Photoshop et vous observerez que les outils de sélection sont bien plus nombreux et plus complexes dans ce dernier (sélection totale ou sélective, baguette magique, lassos…)
Les images bitmap ont cependant un gros avantage / vectorielles :
- La proximité avec la photographie : Les images bitmap permettent des effets visuels réalistes et bien plus vastes que les objets vectoriels souvent considérés comme trop lisses et trop froids. Les effets comme granulage, flou et bien d’autres ne sont disponibles que dans Photoshop. C’est pour cette raison que les logiciels bitmap ont souvent la préférence des artistes et des infographistes. La bonne méthode consiste bien évidemment à aborder ces deux logiciels dans une approche combinée afin de tirer profit de leurs avantages respectifs. Ceci est d’autant plus vrai qu’au fil des versions les fonctions vectorielles et bitmap tendent de plus en plus à faire leur apparition dans les deux logiciels. La dernière version « CS » en est une fois de plus l’illustration avec la possibilité dans Illustrator de vectoriser automatiquement une image Bitmap.
3 - Formats des fichiers Image http://www.freelance2hire.com/questions/res_extensions.htmhttp://www.commentcamarche.net/video/affich.php3
Format natif de Photoshop. Comporte des images bitmap et des calquesAdobe Photoshop.PSD
Format d'image matricielle du logiciel PC Paint et Lotus Graphies (PIC) ainsi que du logiciel Macintoch Paint
Fichiers PICT.PIC ou PCT
Images non compressées issues par exemple d‘APN ou scanners. Ce format est le plus lourd de tous mais ne détériore pas du tout les images. C'est le format standard du module de dessin des accessoires de Windows (Paint)
Alpha MicrosystemsBitmap
.BMP
Format de sortie pour l'impression papier et le flashage. Les fichiers restent modifiables car il conserve les calques. Ce format est très répandu chez les imprimeurs car il s'émancipe des problèmes liés aux polices de caractères
EncapsuledPostScript
.EPS
Format acrobat. Généré par de nombreux logiciels il peut contenir plusieurs pages et images. Ce sont des fichiers relativement légers visualisables par la plupart des ordinateurs. Les fichiers sont verrouillés, malgré cela, Illustratorpeut ouvrir ces documents page par page. Note quand on ouvre un PDF dans Photoshop transforme et pixellise la page en image. Illustrator conserve la mise en page, les graphiques vectoriels et Bitmap, la recherche de texte est possible et on peut parcourir le document à partir de liens électroniques. Cependant il pixellise les images et les transforme en bitmap
Printer Drive File.PDF
Ce fichier ne contient qu'une seule image. C'est un PDF généré directement àpartir de Photoshop
Photoshop PDF.PDP
Format natif d'Illustrator. Comporte des images vectorielles et des calquesAdobe Illustrator.AI
ContenuNomExt
Format compressé des fichiers SVGScalable VectorGraphics
.SVGZ
Fichier graphique natif du logiciel Fireworks (Macromedia). Format souvent utilisé pour créer rapidement des images et boutons - notamment survolées -pour des sites Internet. Les .png sont directement intégrables dans Dreamweaver. Seul format avec le Gif capable de gérer les transparences
Portable Networks Graphics
.PNG
Permet d'exporter des fichiers vectoriels pour une animation dans FlashShockwave Flash Object
.SWF
Formats de fichiers compressés
Autres formats exploitables dans Illustrator et Photoshop
La compression s'effectue sur la palette de couleurs. Ce format est idéal pour les images vectorielles avec aplats de couleurs. Il peut contenir plusieurs images (animations) cependant si on ouvre une animation Gif dans Illustrator seule restera la première image
Graphic Image Format
.GIF Gif89a
Format d'image compressé avec possibilité de régler le degré de destruction du document. Très apprécié du web cependant ce mode de compression est un des plus destructeur. Pour les systèmes d'exploitation pouvant utiliser plus de 3 lettres en extension du fichier on trouve .jpeg ce qui n'est pas le cas des systèmes DOS
Joint PhotographersExpert Group
.JPG ou JPEG
Fichier issu généralement des APN il contient les niveaux de lumière enregistrés par les capteurs. est un format haute résolution beaucoup plus compact que le format TIFF (fichiers 2 fois plus petits). L'image n'a pas subi de compression et la profondeur des couleurs est supérieure au 24 bits du format TIFF ou JPEG ni de traitement interne et le rendu des couleurs est très naturel
Raw Raster Images(Plug-in Adobe Camera Raw)
.RAW
ContenuNomExt
Format VidéoFilmstrip.FLM
Format de fichier graphique du logiciel Photo CD de Kodak Compression de très haute qualité comprend 5 images pour chaque scan, de tailles différentes depuis 128 x 192 à 2048 x 3072
Photo CD Kodak.PCD
Fichiers graphiques du logiciel Paintbrush de Zsoft (utilisé dans le module Paintde Windows 3.X) Format encore largement utilisé par de nombreux logiciels graphiques. Format bitmap permettant d'encoder des images dont la dimension peut aller jusqu'à 65536 par 65536 et codées avec 2, 16, 256 ou 16 millions de couleurs
-.PCX
Format graphique d'images sous forme de matrice de points du logiciel Truevision Targa
Targa.TGA
Format graphique de Compuserve très répandu sur Internet permettant de stocker des images bitmap (raster) de taille importante (plus de 4 Go compressées), sans perdition de qualité
Tagged Image File Format
.TIF TIFF
Format conçu en XML destiné à l'enregistrement de graphismes 2D interactifs animés. Il est adapté aussi bien aux éléments vectoriels qu'au texte et aux images bitmap. Il traite les transformations, la transparence, les masques et les filtres. Les fichiers SVG peuvent être trés facilement associés aux codes Html et JavaScript dans les pages web
Scalable VectorGraphics
.SVG
ContenuNomExt
Fichiers contenant des ordres permettant de reconstruire des données graphiques. Par exemple un métafichier vectoriel contiendra la description sous forme de vecteurs d'une image au lieu de l'image elle-même
Computer Graphies Metafile
.CGM
Format graphique standard de Windows contenant les informations vectorielles, pantones, infos pour l'impression…nécessaires à la reconstitution d'une image
MétafichierWindows
.WMF
Format enregistrant aussi bien les informations vectorielles que celles sur les bitmap. De nombreuses applications n'intègrent pas encore ce format
Enhance MetafileFormat
.EMF
Format enrichi de mise en page supporté par la majorité des logiciels de traitement de texte permettant de conserver les styles de caractères, leur enrichissement (gras, italique...) ainsi que la mise en page (alignement, tabulation...) lors de la conversion des textes
Rich Text Format.RTF
Format des pages WebHyper TextMaskup Language
.HTM
Logiciels de dessin vectoriels utilisés par les architectes pour dessiner des plans de bâtiments et de maisons (Vectoriel)
Autocad(Autodesk)
.DWG
Fichiers graphiques du logiciel Autocad d'Autodesk (vectoriel)AutoCad DrawingInterchangeFormat
.DXF
Logiciels de dessin vectoriels utilisés par les architectes et les dessinateurs industriels pour dessiner des plans et des pièces industriels
Corel Draw.CDR
Freehand 4 à 9.FH4…9
Pixar.PXR
ContenuNomExt
3 suite - Tableau comparatif Photoshop / Illustrator ( ENTREES)
3 suite - Tableau comparatif Photoshop / Illustrator ( SORTIES)
ILLUSTRATOR PHOTOSHOP
4 - Un pixel c’est quoi ?
Un pixel (abrèvation dePICture ELement) est le plus petit élément constitutif d'une image numérique. C’est un point qui, mis avec d’autres dans une mosaïque constitue une image. L'ensemble de ces pixels est contenu dans un tableau à deux dimensions constituant l'image.
Chaque pixel est affecté d’une position repérée dans un tableau par ses coordonnées [0;0] d’un repère (X;Y) correspondant au balayage de l’écran de votre moniteur par le faisceau d’électrons (de gauche à droite et de haut en bas). Les électrons viennent frapper de petits éléments phosphorescents (luminophores) qui constituent les pixels et qui émettent de la lumière.En plus de sa position, chaque pixel est définit par sa lumière, sa teinte (couleur) et son contraste qui lui donnent son aspect visuel*.Note : ceci est vrai pour les écrans cathodiques mais pas pour les écrans LCD qui sont rétro éclairés par des néons), c’est pourquoi ils peuvent être plats.
5 - Caractéristiques techniques des images numériques
A - Définition / Résolution / Taille
Il ne faut pas confondre Définition d’une image (nombre de pixels) et résolution :
On appelle Définition le nombre de pixels constituant l’image à savoir le nombre de colonnes que multiplie le nombre de lignes. Une image possédant 640 pixels en largeur et 480 en hauteur aura un définition de 640 par 480 (640X480).
La résolution exprimée en dpi (Dots Per Inch ou ppp points par pouces en français) indique le nombre de pixels par unité de surface ou taille réelle de l’image).
Un pouce = 2,54 cm. La résolution indique donc combien l’on met de pixels dans 1 pouce carré.
Connaissant la résolution et la dimension en pixels de l’image, on peut calculer sa taille réelle telle qu’elle sera imprimée.
Exemple : une image de 144 X 144 pixels à une résolution de 72 dpi mesurera 4 pouces carré soit un carré de 2 pouces de côté donc 5,08 cm X 5,08 cm
La résolution de référence de 72 dpi correspond à un pixel de 1pouce/72 = 0,353mm correspondant à un point pica (unité typographique anglo-saxonne)
Les images numériques que vous allez traiter ou créer peuvent avoir quatre sources : Elles proviennent soit d’un scanner, soit d’un appareil photo numérique, soit d’un site internet, soit de votre propre ordinateur si vous les créez dans un logiciel de création d’images. En ce qui concerne les images que vous allez créer vous choisirez vous- même la taille, la résolution le mode colorimétrique et le format du fichier au départ et à la sortie de vos logiciels de création d’images.
Pour les images venues de « l’extérieur » la meilleure façon de connaître ces informations c’est de les ouvrir dans Photoshop.
B – Contrôle de ces caractéristiques dans Photoshop CS
Menu : Fichier / Nouveau
1
1 – Nom de l’image2 – Formats prédéfinis*3 – Définition de l’image (L X H)4 – Résolution (en DPI)5 – Mode colorimétrique / Niveau de codage6 – Couleur d’arrière plan
7 – Profil Colorimétrique8 – Forme des pixels9 – Poids de l’image
2
3
4
5
6
9
7
8
* En mode Presse-papiers Photoshop ouvre votre espace de travail à la taille, à la résolution et au mode colorimétrique de l’image que vous souhaitez ouvrir et qui est copiée dans le presse papier.
B – Contrôle de ces caractéristiques dans Illustrator CS
Menu : Fichier / Nouveau
1
1 – Nom de l’image2 – Définition de l’image (L X H)3 – Orientation mise en page4 – Mode colorimétrique
2
3
4
Le choix du niveau de résolution dans Illustrator se fait à la sortie par l’intermédiaire du menu Fichier / ExporterL’attribution d’un Profil colorimétrique se fait par l’intermédiaire du menu Édition / Attribuer un profil…
Menu : Image / Taille de l’image…
1 – Modification de la définition de l’image :
- Cas 1 : la case « Rééchantillonnage » n’est pas cochéePhotoshop ne modifiera pas le nombre de pixels qui compose l’image. Il est FIXELa partie « Dimensions » qui correspond à la Définition est donc FIXE.
- La modification de la taille physique du document (modification des valeurs Largeur et/ou Hauteur) entraîne automatiquement une modification proportionnelle de sa résolution. Le poids du document reste FIXE comme le nombre de pixels- Les cases Mettre les styles à l’échelle et conserver les proportions sont inaccessibles, les dimensions de l’image ne peuvent pas être modifiées de façon disproportionnelle
1
B – Modifications de ces caractéristiques dans Photoshop CS
La qualité de l’image ne variera pas,seuls ses dimensions d’impression varieront
Note : La taille d’affichage à l’écran ne sera modifiée uniquement dans le cas où la Définition de l’image a été modifiée – ce n’est pas le cas ici
Retour au valeurs initiales : Alt (PC) ou Option (Mac + Réinitialiser
1 – Modification de la définition de l’image :
- Cas 2 : La case « Rééchantillonnage » est cochéePhotoshop peut modifier le nombre de pixels qui compose l’image. Il est VARIABLE
- La modification de la taille de l’image (àrésolution fixe) entraîne une modification proportionnelle du nombre de pixels et du poids du document
- La modification de la résolution (à taille fixe) entraîne une modification proportionnelle du nombre de pixels et du poids du document
La taille physique et la Résolution peuvent être réglées de façon indépendantes
- La case conserver les proportions permet de modifier la taille du document de façon disproportionnelle (déformation de l’image)
Menu : Image / Taille de l’image…
1
B – Modifications de ces caractéristiques dans Photoshop CS
La qualité de l’image, ses dimensions physiques et son poids varient
B – Modifications de ces caractéristiques dans Illustrator CS
La question du rééchantillonage ne se pose pas dans Illustrator puisque la nature des images composées dans Illustrator est vectorielle et non pas bitmap. Il n’y a donc pas de mosaïque des pixels.
La modification de la taille de l’image et de sa résolution passe par les menus spécifiques :
Modification de la taille d’impression
Menu : Fichier / Format du document…
Mais ce menu modifie la taille de la page seulement. Si des objets vectoriels dépassent les limites de la page les dimensions de celle-ci s’adapteront à la surface utilisée par l’ensemble des objets.
Il faut donc mettre à l’échelle les objets vectoriels afin que ceux-ci ne débordent pas du cadre de l’image.
Il faudra donc être vigilant aux dimensions du document à l’ouverture.
Modification de la Résolution
C’est lors de l’exportation que la résolution de l’image se règle dans Illustrator.
Menu : Fichier / Exporter…
3 Formats standards sont proposés :
72 DPI format standard des images du Web
150 DPI pour une Résolution dite « moyenne » équivalente à la linéature de trame que l’on trouve dans les impressions papiers
300 DPI pour des impressions Haute Définition (2 fois la linéature de trame)
Il est possible de rentrer toute autre valeur personnalisée
La taille d’impression, d’affichage et le poids de l’image dépendront des paramètres choisis dans ces menus
Le rééchantillonnage est l’opération qui consiste à modifier le nombre de pixels (et par conséquence la taille d’affichage d’une image à l’écran) qui composent une image.
-On parle de sous-échantillonnage lorsque l’on réduit le nombre de pixels
-On parle de sur-échantillonnage lorsque l’on augmente le nombre de pixels
L’opération de rééchantillonnage modifie la résolution de l’image. Par conséquence elle peut se traduire par une perte de qualité au niveau des détails et de la netteté de l’image (pixellisation)
Le filtre Accentuation de Photoshop permet dans une certaine mesure de retrouver la netteté de certains détails perdue lors du rééchantillonnage.
L’ajout ou la suppression de pixels peut se faire suivant plusieurs méthodes. Il faut donc choisir une méthode d’interpolation parmi plusieurs proposées.
A noter qu’il est impossible d’améliorer la qualité d’une image de basse résolution car l’augmentation de la résolution n’apporte aucune information supplémentaire. La seule alternative possible est de réduire sa taille afin d’obtenir un rapport Taille/Résolution satisfaisant.
C – Le Rééchantillonnage
Les méthodes d’interpolation (par ordre croissant de qualité) :
- Au plus proche : La méthode consiste à attribuer à chaque pixel manquant ou à ajouter la valeur (Teinte –saturation – Lumière) du pixel qui lui est le plus proche (par convention le plus à gauche et le plus haut). Cette méthode est rapide mais peu précise. Elle peut s’avérer efficace pour les illustrations contenant des bords non lissés (formes carrés) afin de produire un fichier plus petit. Cependant, cette méthode peut produire des effets d'escalier.
C – Le Rééchantillonnage
Original72 DPI
Au + proche1 pixel
sous-échantillonnage : sensibilité accrue au bruit sur-échantillonnage : sensation de discontinuité
Les méthodes d’interpolation (par ordre croissant de qualité) :
- Bilinéaire : La méthode consiste à attribuer à chaque pixel manquant ou à ajouter la moyenne des valeurs chromatiques des 4 pixels avoisinants. Cette méthode est un peu plus lente que la précédente mais plus précise.-sous-échantillonnage : Baisse de la sensibilité au bruit -sur-échantillonnage : disparition des discontinuités dans les niveaux de gris
- Bicubique : La méthode consiste à attribuer à chaque pixel manquant ou à ajouter la moyenne des valeurs chromatiques des 16 pixels avoisinants. Cette méthode permet généralement de meilleurs résultats que les deux précédentes mais nécessite un temps de calcul plus long par le logiciel
-Bicubique plus lisse : Méthode préconisée lorsque l’on utilise la méthode Bicubique dans le cadre de l’agrandissement d’une image. Le résultat est alors plus doux que la méthode Bicubique simple
-Bicubique plus net : Méthode préconisée lorsque l’on utilise la méthode Bicubique dans le cadre de la réduction de la taille d’une image accompagnée d’un renforcement de la netteté (préservation des détails). Le résultat est alors plus doux que la méthode Bicubique simple
C – Le Rééchantillonnage
- A savoir :
Rééchantillonner revient à combiner deux maillages de taille différents (3 matrices de pixels). C’est le cas quand on modifie la taille d’une image, qu’on zoom ou qu’on fasse tourner une image…En conséquence :
- Cas général (rééchantillonnage)Le rééchantillonnage accentue le phénomène de bruit sur les images. Ce phénomène est à l’origine de la pixellisation des images qui correspond à l’apparition de détails involontaires sur la bordure des traits. Il rend généralement les images plus floues
-Agrandissement (sur-rééchantillonage)Zoomer d’un facteur entier (200% par exemple) dégrade moins l’image qu’un facteur non entier (223% par ex.)
Réduction (sous-échantillonnage)- Le rééchantillonnage dans le cadre d’une réduction de la taille d’une image fait disparaître une partie des détails
-Le repliement spectral : lorsqu’une image comporte de fines structures répétitives comme des rayures par exemple, le rééchantillonnage déforme de façon plus ou moins importantes (en fonction de la méthode choisie) ces structures géométriques
- La rotation d’une image peut faire apparaître des bandes claires et sombres à l'horizontale ainsi qu’une pixellisation des traits lorsqu’ils sont inclinés
C – Le Rééchantillonnage
Au plus proche75%
Bilinéaire75%
Bicubique75%
Exemple 3 méthodes
Au plus proche 77% Bilinéaire 77% Bicubique 77%
Exemple Réduction
Original100%
Bruit dans les hautes fréquences (paravent)Marches d’escalier sur diagonales(bord tissu et table)
Images à peu près similaires (disparition du bruit dans le paravent et des marches d’escalier)Il y a une sorte de moyenne implicite sur plusieurs échantillons équivalant à un filtragedes hautes fréquences. Ceci est d'autant plus vrai que le facteur de réduction est non entieret proche de 1. Les contrastes sont plus forts dans la version bicubique.
Original
Au plus proche75%
Bilinéaire75%
Bicubique75%
Exemple de repliement spectral
Pour aller plus loin dans l’interpolation il existe des logiciels spécifiques. Le champ et l’utilisation de ces outils relève généralement d’une activité de photographe professionnel.
- Altamira Print Pro ( un Plug-in Photoshop)- Extensis « Pxl Smart Scale » ( un autre Plug-in Photoshop)- S-Spline Pro de Shortcut très répandu chez les photographes
C – Le Rééchantillonnage
La chaîne de production informatique est composée de périphériques (scanners, imprimantes…), d’un système, d’une carte graphique, de logiciels de traitement d’images…qui ont tous leur propre modes de gestion de la couleur. C’est pourquoi il est nécessaire de veiller à la bonne harmonie entre tous ces éléments afin de garantir une bonne conservation des couleurs d’une image.
La couleur ou l’intensité du pixel est codé sur un certain nombre de bits. On appelle ce codage la profondeur de codage. Il en existe en fait plusieurs :
- Bitmap noir et blanc : Chaque pixel est codé sur 1 bit. Il peut donc avoir deux couleurs soit noir soit blanc
- Bitmap 16 couleurs ou 16 niveaux de gris : Chaque pixel est codé sur sur 4 bits, ce qui donne 2 exposant 4 possibilités = 16 couleurs ou niveaux de gris allant du noir au blanc
- Bitmap 256 couleurs ou 256 niveaux de gris : chaque pixel est codé sur 1 octet ce qui donne un dégradé de 256 gris différents ou 256 couleurs différentes
- Palette de couleurs (colormap) : Il est possible de définir une palette ou table de couleurs, contenant l’ensemble des couleurs pouvant être contenues dans une image. Si une couleur est présentedans l’image et pas dans la palette, la couleur de l’image sera remplacée par la couleur de la palette la plus proche de celle de l’image. Chaque couleur de la palette est associée à un indice, l’image va contenir un tableau de nombres indiquant l’indice de la couleur à utiliser. Les couleurs sont généralement codées sur 8 bits soit 256 couleurs. Cette technique est différentes du bitmap 256 couleurs dans la mesure où la palette de couleurs est générée à partir des couleurs existantes dans l’image. On parle alors d’images en couleurs indexées
D – Le codage de la couleur
- Couleurs vraies (True Color) : l’ensemble des teintes est reconstituée à partir de trois couleurs le Rouge, le Vert et le Bleu. Chaque couleur est codée sur une échelle de 0 à 256, c’est-à-dire sur 256 valeurs, ce qui correspond à 1octet. Un bit étant la valeur binaire de base (0 ou 1). Un octet est composé de 8 bits. Chaque bit ayant 2 valeurs possibles, le nombre de combinaisons, donc de valeurs possibles pour 1 octet est 2 exposant 8 soit 2X2…8 fois = 256.Sachant que nous avons besoin des trois couleurs Rouge, vert et bleu pour recomposer l’ensemble du spectre chromatique visible, chacune étant codée sur 8 bits, cela nous donne un nombre de combinaisons possibles de 2 exposant 8 X 2 exposant 8 X 2 exposant 8 = 16777216 possibilités, 2 exposant 24. C’est pourquoi on parle de couleurs 24 bits ou 16 millions de couleurs. Il est possible de rajouter une quatrième composante permettant d’ajouter une information de transparence ou de texture, chaque pixel est alors codésur 32 bits.
La profondeur du codage de la couleur a un impact direct sur le poids des images, c’est entre autre pour cela qu’il existe différents niveaux de profondeur.Pour calculer le poids d’une image il suffit de calculer le nombre de pixels qui la compose et de multiplier ce résultat par le poids de chaque pixel :
Exemple : une image de 640 X 480 = 307 200 pixels pèsera :- N&B : 307200 X 1/8 octet /1024 = 37,5 Ko- 256 coul : 307200 X 1 octet /1024 = 300 Ko- 65 000 coul – 16 bits : 307200 X 2 octets /1024 = 600 Ko-True Color : 307200 X 3 octets /1024 = 900 Ko
D’où la nécessité d’avoir sur sa carte graphique une certaine quantité de mémoire vive. Une image 1024X768 en True Color pèse 2.3 Mo et nécessite donc 4 Mo de mémoire vive.
D – Le codage de la couleur
Il existe deux modes de transparence :
- Une transparence simple qui consiste à définir dans la palette d’une image indexée un indice comme transparence. Dans ce cas vous n’avez qu’un seul niveau de transparence et les effets d’ombres sur un fond transparent n’est pas possible. C’est le cas du format GIF qui se sert d’une palette de 256 couleurs dont une est réservée à la transparence (comme le format PNG8)
- Une transparence par couche Alpha (Alpha Channel) qui consiste à rajouter pour chaque pixel un octet définissant le niveau de transparence qui pourra donc avoir 256 niveaux différents. C’est le cas du format PNG 24. Les dégradés de transparence sont ainsi possibles. Ce processus est appelé alpha blending.
D – La Transparence
Nous avons vu que le poids d’une image dans Photoshop ou Illustrator peut être modifié dans le cas du rééchantillonnage ou de la variation de la taille. Cependant, les modifications de poids les plus importantes interviennent lors des opérations de compression, c’est-à-dire, à la sortie lors du changement de format de l’image.La compression ou optimisation consiste à réduire la taille physique des blocs d’informations qui composent une image. Le compresseur utilise pour cela un algorithme propre au type de données à compresser. Un décompresseur est nécessaire pour reconstruire les données originelles grâce à l’algorithme inverse de celui utilisé pour la compression.
Dans Photoshop et Illustrator l’accès à ces « compresseurs » se fait généralement par la fenêtre « Enregistrer pour le Web » qui met à disposition les 4 formats d’optimisation GIF, JPG, PNG 8 ou 24, SWF, SVG et WBMP ainsi qu’une palette d’options de réglage. Cette fenêtre est identique dans les deux logiciels.Il faut distinguer la compression sans perte d’information de celle avec perte qui détruit certaines informations pour avoir le meilleur taux de compression possible. C’est le cas du JPG. Dans ce cas le retour au fichier original est impossible.
Il existe de nombreuses méthodes de compression. Les plus répandues sont :
- La compression RLE (Run Lenght Encoding) est basée sur la répétition d’éléments. Elle est efficace pour les images composés de nombreux éléments redondants. Elle est utilisée pour les images BMP, PCX et TIFF- La compression de HUFFMAN classe les différents symboles à compresser suivant leur fréquence d’apparition. Cette méthode donne de bons résultats en particulier pour les images monochromes comme les fax.- La compression LZW est basée sur la substitution des de motifs à encoder par un code d’affectation. Cette méthode, particulièrement rapide, est utilisé pour l’archivage : formats ZIP, et les images TIFF, GIF et PNG. Méthode particulièrement adaptée aux aplats de couleurs.
E – Poids d’une image La compression des images – Fenêtre « Enregistrer pour le Web »
-La compression JPEG a un des meilleurs taux de compression (rapport de 20 à 25 : 1 sans perte notable de qualité). Elle est bien plus efficace pour les images photographiques (comportant de nombreux pixels de couleurs différentes) que pour les images géométriques (comportant des aplats et peu de nuances de couleurs) sur lesquelles les différences de nuances dues à la compression sont très visibles.Elle se passe en 4 étapes:- Rééchantillonnage de la chrominance car l’œil ne peut pas discerner de différence de nuances au sein d’un carré de 2X2 points- Découpage de l’image en blocs de 8X8 points et application de la fonction DST Discrete Cosinus Transform- Quantification de chaque bloc : application d’un coefficient de perte (ration taille/qualité) et élimination ou diminution des valeurs de haute fréquences afin d’atténuer les détails (codage RLE)- Encodage de l’image : compression avec la méthode Huffman
Format SWF (Schockwave Flash Object) : Format d’image natif du logiciel Flash. Nous ne traiterons pas ce format car il est la plupart du temps réservé A TORT à l’animation vectorielle.
Format WBMP (Wireless BitMaP) : Format d’image du langage WML utilisé pour les navigateurs WAP. Ces images sont composées de 2 couleurs uniquement le blanc (transparent) et le noir, sont codées sur 1 Bit et ne peuvent donc pas être compressées. Elles sont adaptées au écran à faible résolution et au débit réduit.Note : Le protocole pour intégrer une image WBMP à une page WML est identique à celui du HTML. On se sert donc de la balise<img>Il faut veiller à ce que vos images ne dépassent pas un maximum de 0.5 Ko soit 500 octets (sinon vous risquez de saturer la mémoire du terminal) et à ne pas dépasser une taille supérieure à celle des écrans les moins larges.
E – Poids d’une image La compression des images – Fenêtre « Enregistrer pour le Web »
E – La Fenêtre « Enregistrer pour le Web »
1
1 – Onglets 2 – Outils 3 – Infos
2
4
6 7
4 – Formats 5 – Paramètres 6 – Couleurs
3
5
7 – Taille
E – La Fenêtre « Enregistrer pour le Web »
1 – Présentation générale
Adobe Bridge est un explorateur de fichiers permettant de prévisualiser tous les formats d’images avec des vignettes modulables, des métadonnées et des mots clés personnalisés.Il est disponible séparément ou dans Photoshop, Illustrator, InDesign et GoLiveIl permet :- d’afficher, rechercher, trier, classer, gérer et traiter des fichiers image. Créer, renommer, déplacer et
supprimer des fichiers - d'accéder facilement à des fichiers natifs de type PSD, AI, INDD et PDF, ainsi que des fichiers d'autres applications (Adobe ou autres marques)- de faire glisser les éléments dont vous avez besoin dans vos compositions et d'en afficher un aperçu- de gérer ses fichiers images tout en poursuivant son travail de retouche dans Photoshop- de faire pivoter des images ou exécuter des commandes par lots- Avec Adobe Photoshop, vous pouvez ouvrir et modifier des fichiers Camera Raw à partir de Bridge, les enregistrer dans un format compatible avec Photoshop et même modifier les paramètres d'une image directement dans la boîte de dialogue Camera Raw sans avoir à ouvrir Photoshop- de comparer directement des images- de personnaliser des vignettes et manipuler des palettes- de synchroniser à partir de Bridge les paramètres de couleur entre les applications- de choisir des images professionnelles disponibles par le biais d’Adobe Stock Photos (achat d’images libres de droits)
III - La gestion des fichiers Images : Adobe Bridge
Année 2006 - 2007
II – Fenêtre d’ouverture de Bridge
A
B
III – Ouverture de Bridge
Pour ouvrir Bridge à partir d’une application Adobe : Menu Fichier / Parcourir…
Sinon aller chercher l’application « Bridge.exe » à l’endroit où il a été enregistré. Par défaut : C:\ProgramFiles\Adobe\Adobe Bridge
IV – Fonctionnalités de Bridge
A – Mode de présentation et redimensionnement des vignettesLe réglage de la taille des vignettes se fait automatiquement par le simple déplacement du curseur.Différents modes d’affichage sont possible en fonction de la nature du projet sur lequel on travaille :
- Mode Vignettes :Visualise les fichiers images sous la forme des miniatures de l’explorateur WindowsIndications par défaut : Titre + extension, Date de créationType de fichier non visualisable : Word, Excel, pages html
- Mode Film Fixe :Visualise des images sous forme d’une pellicule avec un aperçu agrandi pour l’image sélectionnéeIndications par défaut : Titre + extension, Date de créationType de fichier non visualisable : Word, Excel, pages html Possibilité de visualiser les PDF page par page et les films (wmv…)
- Mode Détails :Visualise les images sous la forme d’une liste verticaleIndications par défaut : Titre + extension, Date de création, Date de modification, Taille du
fichier, type de documentType de fichier non visualisable : Word, Excel, pages html
Avantages de Bridge :La visualisation des imagesLa possibilité de gérer et créer des métadonnéesLa possibilité de filtrer les images visualisables par le biais d’étiquettes, de mots clés ou d’étoile
Année 2006 - 2007
Mode de fonctionnement :Travail en groupe sur un projet « commandé » par le formateur
Durée :1 heure : 30 minutes de préparation et de réflexion + 30 minutes de présentation (10 minutes par groupe)
Déroulement :5 minutes de questions libres pour définir les besoins du commanditaireRépartition en groupes : Réflexion sur le projet, les contraintes techniques et rédaction des objectifs et des moyens utilisés pour y parvenir
Sujet :Une personne ne connaissant rien à l’informatique vous demande de réaliser UN élément graphique de votre choix pouvant représenter son association dans le but d’en faire la promotion au grand public. Cet élément doit refléter le plus fidèlement possible l’esprit de son association
1 - Rédigez un argumentaire succinct de votre approche et de vos choix graphiques2 - Donnez les caractéristiques techniques du ou des éléments que vous avez conçu3 - Indiquez au prescripteur quels sont les supports et médias sur lesquels il pourra utiliser et reproduire l’élément graphique que vous lui avez livré4 - Si vous le souhaitez, représentez sur papier le visuel de cet élément
Note :
Le choix de l’élément graphique est laissé entièrement libre. Cela peut-être une photo, une illustration, un film, une page Internet. Le but étant de voir quelles sont les contraintes inhérentes à chaque élément choisi en matière de support et de diffusion des images.
I – Approche de la conception d’un projet graphique
2 – Approche de la réalisation d’un travail graphique personnelAnnée 2006 - 2007
Mode de fonctionnement :Travail en groupe sur un projet personnel
Durée :3 heures dont 45 minutes de présentation avec échange entre le groupe qui présente et le reste des stagiaires : critique positive, propositions, suggestions
Déroulement :Si nécessaire,10 minutes de questions au formateur pour définir les besoins et les contraintes de son projet personnel Répartition en groupes par projet commun : Réflexion sur le projet, les contraintes techniques, les objectifs et les moyens utilisés pour y parvenir
Objectif :Élaborer les bases de la charte graphique et des besoins en termes d’images de son projet personnel.Rédaction du cahier des charges et liste des images nécessaires avec leurs caractéristiques techniquesRéalisation des images à produire dans Photoshop et IllustratorAppui technique du formateur pour les non initiés aux logiciels graphiques
Note :
Dans la mesure du possible, répartition dans les groupes des personnes ressources maîtrisant ou connaissant les logiciels graphiques