L'image numérique

Cours PAO > Crea Genève 2010-2012

Transcript

1. L'image numérique
2. Sommaire Les 2 types d'images numériques n L’image bitmap ➜ La résolution d’image ➜ Agrandissement/réduction n L’image vectorielle Les modes colorimétriques n Mode bitmap (noir ou blanc) n Mode Niveaux de gris n Mode RVB n Mode CMJN n Mode Pantone n Mode Bichrome L'exportation des fichiers n Formats de fichiers pour l’impression n Formats de fichiers pour l’écran
3. W 1 / 3 [ bitmap vs vectoriel ]
4. n L’image numérique › 2 catégories d'images 6 Les images bitmap vs 6 Les images vectorielles
5. [ bitmap ]
6. n L’image numérique › L'image bitmap (ou matricielle) 6 Une image Bitmap est constituée d’un ensemble de points appelés pixels  : petits points carrés juxtaposés pour former les motifs. (Pixels  : abréviation de PICture ELement) Le pixel représente ainsi le plus petit élément constitutif d’une image numérique.
7. n L’image numérique › 3 types d'image bitmap 6 Noir/blanc 6 Niveaux de gris 6 Couleurs L’image « au trait » est uniquement constituée de pixels noirs et blancs : texte, plan d’architecte, dessin… L’image « tramée » est simulée à partir de points noirs et blancs de taille différente : journal, magazine… En photographie, il s’agit d’une image qualifiée de noir & blanc. Pour mesurer la luminosité, on utilise une échelle de gris; 256 tons composent cette échelle, du plus clair (blanc pur) au plus foncé (noir pur). Les valeurs de niveaux de gris peuvent également être mesurées comme des pourcentages de couverture de l’encre noire (0 % est égal au blanc, 100 % au noir). En numérique, il s’agi t d’une image 8 bits = 256 niveaux de gris. Une image en couleurs est sensée être fidèle à la réalité. Il existe 3 principales catégories d’images en couleurs (Les images en noir et blanc (1 bits), niveaux de gris (8 bits) et 256 couleurs (8 bits)) et 2 systèmes colorimétriques : RVB et CMJN.
8. 6 Une image digitalisée (numérisée) est donc divisée en pixels.
9. n L’image numérique › La résolution d'image 6 Pour l'image bitmap, le nombre des points peut varier selon la taille de l'image. On parle de résolution et de définition. Afin de définir la résolution d'une image, on détermine en général plutôt le nombre de points par unité de surface. L'unité sera définie en pouce (inch). La résolution d'une image s'exprime alors en pixels par pouce (ppp) (en anglais  : Dots Per Inch= dpi). Une résolution de 300 dpi signifie donc 300 colonnes et 300 rangées de pixels sur un pouce carré > ce qui donne donc 90000 pixels sur un pouce carré. Quand on parle d’une image, on va s’intéresser à sa résolution. Lorsque il s'agit d’un écran, on va parler de sa définition. è 1 pouce = 2.54 cm nombre de pixels nombre de pixels
10. 4 x 4 pixels 7 x 7 pixels 13 x 13 pixels Remarque: moins on a de pixel, moins l'image est définie. Exemple = le losange bleu ne peut pas être dessiné avec 4 pixels (2 x 2). n L’image numérique › La résolution d'image 6 Le test du losange bleu
11. › La résolution d'image 6 Plus la densité des points est élevée, plus le nombre d'informations est grand et plus la résolution de l'image est élevée. Plus le nombre de couleurs et la résolution d’une image bitmap sont élevés, plus le poids de l’image est donc important.
13. › La résolution d'image + Anti-aliasing Pour le confort de l'œil.
14. › La résolution d'image + Anti-aliasing
15. › La résolution d'image + Anti-aliasing
16. › La résolution d'image + Anti-aliasing Pour le confort de l'œil.
17. <<< Haute résolution Basse résolution >>> › La résolution d'image Plus la résolution est élevée et plus l'image restitue les détails - on parle de définition et de "piqué de l'image". Les deux notions (résolution et définition) restent étroitement dépendantes tout en décrivant des caractéristiques bien séparées. La résolution se caractérise par le nombre de pixels par unité de longueur, c'est en fait la densité de pixels de l'image. La résolution s'exprime en dpi. La définition est établie par le nombre total de pixels dans l'image. LxH
18. › image › image à 300 dpi à 72 dpi prévue pour prévue pour l’impression écran papier mais... Haute résolution vs Basse résolution Selon le support de communication final (ex. édition, affiche, internet), on choisira une résolution adaptée pour les images utilisées.
19. › image à 300 dpi pour l’édition : ce qui a besoin d'être lu de près (ce qui tient dans la main). › image à 150 dpi (ou moins) pour l’impression XL d'affiche, poster, bâche, etc. : ce qui peut être lu de loin. › image à 72 dpi pour la lecture à l'écran.
20. 300 dpi dpi dpi 150 72 72 Le choix d'une résolution d'image est dépendant de son support et de sa proximité avec l'œil. EDITION IMPRESSION XL ECRAN
21. › La résolution d'image pour l'imprimerie 6 On distingue alors la résolution écran et la résolution de sortie. RéSOLUTION ECRAN = 72 dpi en RVB RéSOLUTION SORTIE = 300 dpi En CMJN RéSOLUTION IMPRESSION = 70 > 200 lpi è Trame standard = 150 lpi Les trames de journaux sont entre 70 et 100 et ca peut monter à 180, 200 pour des plaquettes de luxe...
22. › Chaque moniteur a ses propres paramètres. > Les images sont donc interprétées différemment. Zooms sur les différents moniteurs existants
23. › La résolution d'image pour l'imprimerie 6 Pour l'impression, la quantité de points de trame sur une surface donnée s'appelle la linéature et est exprimée en lignes par pouce (lpi ou lpp). De plus, plus les points sont fins (et donc nombreux), plus l'image sera fine. Si on a des points de taille approchant 1/10 mm, ils ne sont pas discernables, et l'image paraît parfaite. Et tout dépend encore du style de trame utilisée. è
24. › La résolution d'image pour l'imprimerie 6 Pour l'impression "traditionnelle" en offset, on travaille avec 4 couleurs d'encre  : Cyan / Majenta / Jaune / Noir Ainsi une image est interprétée par le mélange de ces couleurs. voir document annexe "Les procédés d'impression" voir page "modes colorimétriques CMJN"
25. • 65 lpp : linéature moins fine destinée à l’impression de publicités et de bons de réduction • 85 lpp : linéature moyenne destinée à l’impression de journaux • 133 lpp : linéature de qualité supérieure destinée à l’impression de magazines en quadrichromie • 177 lpp : linéature très précise destinée à l’impression de rapports annuels et d’images de livres d’art › La résolution d'image pour l'imprimerie Zooms sur une image imprimée en quadrichromie
26. n L’image numérique › Agrandissement/réduction Rappel  : Les images Bitmap se composent d’un ensemble de pixels (colorés ou non) formant une image (ou un caractère typographique). Une image bitmap, faite de pixels, supporte mal les opérations de redimensionnement, d’agrandissement ou d'étirement au prix d’une perte d’information, appelée distorsion. On parle aussi du phénomène de « pixellisation » (en anglais aliasing) où chaque point apparaît grossi et semble créer un escalier. è
27. › 1 pixel = 1 carré › 1 carré agrandi = toujours 1 carré Ré-échantillonnage
28. n L’image numérique › Agrandissement/réduction Le procédé d'agrandissement avec ré-échantillonage, où un pixel donne lieu à un carré de pixels de même intensité, repose sur ce qu'on appelle l'interpolation au plus proche voisin (les pixels nouvellement créés prennent la valeur de leur plus proche voisin). Les couleurs sont donc réinterprétées. Un changement d'échelle, une déformation et autres transformations affectent grandement les images. Afin d'avoir une image de qualité, il faut s'assurer d'avoir la résolution optimale selon l'usage final de cette image. voir documents annexes "L'image numérique : rapport taille et résolution" "L'acquisition - Le scan"
29. Ré-échantillonnage Pixellisation
30. DONC IL EST INTERDIT* D'agrandir une image sans adapter sa résolution et sa taille * ...trés fortement déconseillé
31. [ vectoriel ]
32. n L’image numérique › 2 catégories d'images 6 Les images bitmap vs 6 Les images vectorielles
33. n L’image numérique › L'image vectorielle 6 Les images vectorielles sont représentées par des formules mathématiques interprétables par la carte graphique des ordinateurs. Exemple  : un rectangle est défini par deux points, un cercle par un centre et un rayon, une courbe par plusieurs points et une équation gérée par des courbes de Bézier.
34. › L'image vectorielle › Le dessin vectoriel consiste à organiser des points reliés entre eux, à donner des valeurs aux fonds et aux contours des formes créées et à les "animer" à l'aide des courbes de Bézier.
35. n L’image numérique › L'image vectorielle 6 Etant donné que ce genre d'image est constituée uniquement d’entités mathématiques, il est possible de lui appliquer facilement des transformations géométriques par simples calculs (zoom, étirement, ...) sans altération. è
38. › Logotypes
39. › Logotypes
40. Adobe, and Illustrator are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. © 2006 Adobe Systems Incorporated. All rights reserved. a r t w o r k c r e a t e d w i t h › La vectorisation Le dessin original Le dessin vectoriel La mise en couleur automatique ou manuel
41. › La vectorisation Maba
43. › Illustrations/Cartoons
44. › Illustration
45. › Illustration
46. › Site internet › Site et animation Flash
47. › Illustration
48. › Illustration
49. › Illustration
50. › Illustration
51. › Illustration
52. › Illustration
54. L'image numérique
55. [ couleurs ] 2 / 3
56. [ noir et blanc + valeurs de gris ]
57. n Les modes colorimétriques › Mode bitmap (noir ou blanc) 6 En stockant un bit dans chaque case, il est possible de définir deux couleurs (noir ou blanc). Pas de dégradé, pas de valeur. › ›
58. n Les modes colorimétriques › Mode Niveaux de gris. 6 Basé sur une palette de 256 valeurs de gris permettant une riche interprétation des valeurs d'une image. › ›
59. [ RVB ]
60. n Les modes colorimétriques › Mode RVB (RGB) 6 red/rouge, green/vert, blue/bleu 3 couleurs de base utilisées pour reproduire une image couleur sur un écran d’ordinateur ou de télévision. Les images provenant d’un appareil photo numérique, d’un scanner, d’internet ou d’un logiciel d’images de synthèse sont généralement codées en RVB. Grâce aux palettes de 256 couleurs ou de milliers ou de millions selon la puissance de l'ordinateur et de son écran, il est possible de définir l’ensemble des valeurs contenues dans l’image.
61. [ Quadrichromie ] * Cyan Magenta Yellow Kind (CMJN en anglais) *
62. n Les modes colorimétriques › Mode CMJN 6 Pour une impression dans la chaîne graphique traditionnelle (imprimerie), on doit convertir les couleurs en CMJN. 6 Quadrichromie  : procédé d'impression en quatre couleurs. En impression offset et en impression numérique, la reproduction quadrichromique se réalise en additionnant le Cyan, le Magenta et le Jaune plus le Noir pour réveiller les contrastes et souligner les dessins ou les caractères typographiques. La séparation des couleurs d’une photographie ou d’une illustration est réalisée en photo­ gravure ou directement via des procédés modernes de "Copy to Plate" (CTP). < Gros plan sur une image imprimée en quadrichromie
63. n Les modes colorimétriques › La quadrichromie > La "séparation"
64. n Les modes colorimétriques › La quadrichromie ‹ C+M C+M+J C+M+J+N http ://indus.graph.free.fr/Pages/PrincRepro/PrincRepro.html
65. n Les modes colorimétriques › La quadrichromie et les "Bendays" Les teintes obtenues par la superposition de différents pourcentages des couleurs CMJN sont appellées “Bendays”. http ://indus.graph.free.fr/Pages/PrincRepro/PrincRepro.html
66. [ Ton direct – Pantone ]
67. n Les modes colorimétriques › Mode Ton direct > Pantone 6 Le PMS - Pantone Matching System est la gamme de couleur la plus utilisée par les imprimeurs. Elle est devenue un standard. Ces couleurs sont normalisées; elles offrent la possibilité de réaliser des aplats et des couleurs unies. On parle de tons directs. Exemple  : impression en une seule couleur  : PMS bleu 2715.
68. n Les modes colorimétriques › Mode bichrome > Pantone 6 Le mélange de 2 couleurs en ton direct propose une image plus riche de valeurs. Il est possible, dans un deuxième temps, de traduire cette bichromie en RVB ou CMJN. Il est même possible de composer de telles images directement avec les effets et filtres Photoshop à des fins esthétiques.
69. Pour écran et impression numérique Noir & Blanc - Valeur de gris RVB Noir & Blanc - Valeur de gris CMJN Noir & Blanc Pantone (PMS) Noir & Blanc Bichromie - Trichromie Pour impression
70. Noir & Blanc Valeur de gris RVB CMJN Pantone Bichro
71. [ export ]
72. Textes Impression maison (jet d’encre) Impression bureau (Laser) Impression numérique pro (Flashage) Copy to Plate Photolithographie Impression offset Impression sérigraphique Images @! CRÉATION MONTAGE / TRAITEMENT GRAPHIQUE PRÉ-PRESSE IMPRESSION Aquisition Saisie Chaîne graphique simplifiée
73. A partir d'une image originale, on pourra... l'imprimer dans un magazine en couleurs, l'imprimer sur une affiche en noir et blanc, ou la traduire pour l'utiliser sur un site internet.
74. n L’image numérique › Fichiers pour l'impression (brochure, dépliant, packaging, affiche, etc.) 6 .psd = Format natif d'Adobe Photoshop permettant les modifications. Depuis la CS2, il permet d'être exporté vers Adobe Indesign ou Adobe Illustrator sans perdition. Il permet de conserver toutes les informations  : masque, transparence, etc. 6 .ai = Format natif d'Adobe Illustrator permettant les modifications. Il permet d'être exporté vers Adobe Indesign sans perdition. Il conserve toutes les informations  : masque, transparence, etc. 6 .pdf = Format d'exportation avec compression de fichier graphique. Format principal de transformation des données (images, textes, design,...) afin de les rendre imprimables (rasterisation). 6 .tif = Format d'exportation avec ou sans compression de fichier graphique pour image de haute définition sur une base bitmap uniquement. Il peut conserver les calques de Photoshop... pas la transparence. 6 .eps = Format d'exportation de fichier graphique pour image de haute définition sur une base bitmap ou plus communément sur une base vectoriel. Il ne conserve pas les calques de Photoshop. Ses éléments vectoriels peuvent être utilisés pour des masques et la transparence.
75. n L’image › Fichiers pour l'écran (web, powerpoint, word, excel, etc.) 6 .png = pour éléments graphiques et images avec aplats (Portable Network Graphics, ou format "Ping") une alternative libre au format GIF qui offre une réelle plus-value sur le web grâce à sa gestion des transparences. NE CONVIENT PAS POUR L'IMPRIMERIE TRADITIONNELLE !!! 6 .jpg = seulement pour les images photographiques Image en haute définition (300, 150 dpi) ou base résolution (72 dpi). Norme de compression d'images. Cette norme permet de compresser des images dans des proportions importantes. Il faut noter que cette compression s'accompagne d'une perte de qualité variable selon le taux de compression retenu et le type d'image. Il n'accepte pas la transparence. 6 .gif = pour éléments graphiques et images avec aplats Format compressé d'image convenant bien aux images comportant des aplats de couleurs, genre bande dessinée ou clipart. Il est limité à des palettes de 256 couleurs à 72 dpi. Il permet également de stocker plusieurs images dans le même fichier qui à l'affichage seront présentées automatiquement l'une après l'autre, créant ainsi une animation (gif animé). Il gère aussi la transparence. 6 .pdf = version électronique de documents imprimés préservant la mise-en-page exacte et en offrant des possibilités avancées d'interactivité et de partage. Multiplateforme (PC, Mac, etc.) Pour lire les fichiers PDF > Acrobat Reader (plug in). Pour créer des fichiers PDF > Adobe Acrobat. > attention au poids - temps de chargement 6 .swf = fichier et interfaces interactives pour l'Internet de format Flash utilisant l’animation vectorielle. (calcul de courbe) > attention au poids influant sur le temps de chargement > voir aussi fichiers .fla, .flv
76. n La compression des images exportées Gain de poids › Perte de qualité
77. La bonne résolution Le bon mode couleur Le bon format
78. RéFéRENCES La chaîne graphique - Edition Eyrolles de Kaj Johansson , Peter Lundberg , Robert Ryberg Manuel Indesign/Photoshop/Illustrator http ://www.adobe.com http ://fr.wikipedia.org http ://fr.wikipedia.org/wiki/R%C3%A9solution_%28imagerie_num%C3%A9rique%29 http ://www.pfl-cepia.inra.fr/index.php?page=image-numerique http ://tecfa.unige.ch/themes/FAQ-FL/resolution/resolution.html http ://www.imprimerie-faguier.com/trame.html http ://www.pixelvalley.com/appareil-numerique/definition-resolution.php http ://www.sartoretti.org/display.php?id1=224 http ://www.gsmonaco.com/gs_lexique.htm http ://www.cours-online.be/site/pp4.html http ://www.psill.net http ://patrick.furon.free.fr/_aideweb/_tests_images.html http ://www.eskis.fr/_BLOG/quelle-differences-y-a-til-entre-une-image-bitmap-et-vectorielle/ http ://www.webdevtalks.com/articles/difference-entre-images-bitmap-et-vectoriel-56.html http ://www.ac-grenoble.fr/arts/articles.php?lng=fr&pg=985 http ://www.ludovicjamet.com/?p=239 http ://commons.wikimedia.org/wiki/File :Phalaenopsis_JPEG.png http ://www.studiomrp.ch/photoshop/tutorial/presentation_sup.html http ://vidisite.free.fr/mes_cours/web_cou/cou_06.htm http://2.8.pagesperso-orange.fr/technique/resolution.htm http ://www.openpn.com/01/06/2010/niveaux-de-gris-couleurs/ http ://www.techno-science.net/forum/viewtopic.php?f=6&t=218&start=0 http ://membres.multimania.fr/massignontpe2003/Stockage.htm http ://indus.graph.free.fr/index.html http ://fr.academic.ru/dic.nsf/frwiki/258310 http ://www.printconcept.fr/frfr/conseils-techniques/couleurs http ://fr.wikipedia.org/wiki/D%C3%A9finition_d%27%C3%A9cran http ://gutenberg1point5.canalblog.com/tag/offset http ://www.lesintegristes.net/2011/05/06/web-resolution-72dpi/ http ://www.maba-product.fr http ://www.thelogofactory.com