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