Initiation à linfographie

Transcription

1 Ce support de cours de l Agence universitaire de la Francophonie est distribué sous licence GNU FDL. Permission vous est donnée de copier, distribuer et/ou modifier ce document selon les termes de la Licence GNU Free Documentation License, Version 1.2 ou ultérieure publiée par la Free Software Foundation. Une copie de cette licence appelée GNU Free Documentation License est disponible sur Initiation à linfographie Formats d images Images Bitmaps et Images vectorielles Il existe deux familles distinctes d images numériques : les images de type bitmap, c est à dire point par point et les images de type vectoriel, c est à dire à base de composants géométriques. Une image bitmap est stockée sous forme de pixels, un pixel étant une unité élementaire. Une image de type bitmap est tout d abord définie par le nombre de pixels qui la compose : par exemple sur le graphique de gauche, l image est composée de 10 pixels de haut et de 10 pixels de large, soit 100 pixels (10 fois 10). Ensuite, l image est définie par le nombre de couleurs que peut prendre chaque pixel. Si on stocke chaque pixel sur un bit, alors seules deux variantes sont possibles : le pixel est etteind ou allumé. En stockant chaque pixels sur 1 octets, c est à dire 8 bits, on peut coder 2 exposant 8 couleurs différentes, chaque bit pouvant prendre 2 valeurs différentes. Avec un codage sur 8 octets, on peut coder 256 couleurs. Avec un codage de chaque pixels sur 3 octets, on peut coder 256 x 256 x 256 soient environ 16 millions de couleurs! - 1 -

2 Le principal inconvénient des images de type bitmap réside dans le fait que ces images supportent difficilement l agrandissement. En effet, si on agrandit à 200% une image bitmap, chaque pixel élementaire sera transformé en un carré de 2 pixels par 2 pixels; ce qui ne sera vraiment pas trés joli! On voit ainsi sur le graphique de droite que l agrandissement d un cercle rend visible les pixels qui constituent le bord du cercle. Une image de type vectoriel n est pas stockée sous forme de pixels mais sous forme d éléments géométriques d où la terminologie vectorielle. Pour coder un cercle, au lieu de coder chaque pixel de l image, on se contentera d utiliser des instructions du style : cercle dont la position du centre est (x=10,y=10) et dont le rayon est 5. Ainsi si on veut agrandir l image vectorielle de 200%, on se contentera de doubler la valeur du rayon et le bord du cercle sera parfaitement conservé, sans aucune distorsion. L inconvénient des images vectorielles c est qu on ne peut stocker que des éléments géométriques élémentaires et que si on veut représenter une image compliquée, on sera obligé de stocker un trés grand nombre d éléments géométriques : on aura alors une image trés volumineuse et nécessitant beaucoup de ressources de calcul pour l affichage. Par conséquent, les images vectorielles sont utilisées principalement pour des schémas ou des compositions pour lesquels on peut réaliser des transformations sans engendrer des distortions (plan d un architecte par exemple, dessins animés, etc...). Les images bitmaps quand à elles sont utilisées pour représenter des photographies. Un logiciel tel que Photoshop fonctionne avec des images bitamps et un logiciel tel que Illustrator ou Corel Draw! des images vectorielles. Format d images utilisées pour le Web Les navigateurs Internet ne reconnaissent que 2 format d images, tout deux étant des formats de type bitmaps : les formats JEPG et les formats GIF. Depuis quelque temps, les navigateurs reconnaissent également le format PNG qui est un format vectoriel dans lequel on peut combiner des images bitmaps. Cependant du fait que tout le monde n utilise pas forcément les dernières versions des navigateurs, il est fortement recommandé de n utiliser ques des images de type JPEG et GIF. Avant de parler des différences entre ces deux formats d images, nous allons discuter rapidement - 2 -

3 de la compression d image. Il existe deux grandes catégories de compression : la compression avec perte d informations et la compression sans perte d information. Comment peut on compresser une image sans perdre l information qui la constitue?tout simplement en codifiant la redondance d information! Imaginons que vous disposiez d une photographie numérique de 900 par 600 pixels d un personnage prise à l extérieur. Une bonne partie de la photo sera occuppée par le ciel qui a une couleur uniforme. La première rangée de pixel étant entièrement constituée de pixels bleu, au lieu de stocker bleu, bleu, bleu, bleu, bleu, etc fois de suite, on peut se contenter de dire compression - couleur bleu - répéter 900 fois : on vient de compresser par 300 la première rangée de pixels sans perdre de l information (la première case mémoire indique qu il s agit d un code de compression et non de la couleur d un pixel, la seconde indique la couleur qui va être répétée et la troisième le nombre de répétition). Evidemment pour que la compression sur une image soit significative, il faut que l image comporte un grand nombre de redondance de couleur, ce qui est la plupart du temps le cas. Typiquement le taux de compression sera plus faible sur une photo du public d un match de foot qui comporte peu de zones de couleurs continues que sur une photo de type paysage. Si l on veut réduire encore le poids d une image, il est possible d effectuer une compression avec pertes d informations. Prenons par exemple, une photographie d une boule de billiard éclairée par un lampe : la couleur de la boule n est pas uniforme et le bord comprend de nombreuses variantes de couleurs assez similaires. L idée est donc de coder les variantes de couleurs trés proches par une même couleur : on perdra alors de l information par rapport à l image originale mais si l oeil humain n est guère capable de voir la différence, ce n est pas trés grave. Format GIF : chaque pixel est codé sur 8 bits, ce qui signifie que l on ne peut avoir que 256 variantes de couleur sur une même image (ce qui est la plupart du temps insuffisant pour des photographies); compression de l information sans perte; permet de gérer une couleur transparente (c est à dire invisible); permet de réaliser des animations; - 3 -

4 Format JPEG : chaque pixel est codé sur 3 octets en RGB (Red, Green, Blue) / RVB (Rouge, Bleu, Vert), ce qui signifie que l on peut avoir plus de 16 millions de couleurs différentes sur une même image; ce qui permet des rendus photographiques; la compression de l information s effectue avec perte de l information mais le niveau de perte est paramétrable; ne gère ni les fonds transparents ni les animations. Comment choisir entre GIF et JPEG? Tout dépend du contenu de l image que vous souhaitez enregistrer. Dans tous les cas, il faut bien avoir à l esprit que pour un site Web, la vitesse de téléchargement d une page est cruciale : avec un modem, on télécharge à 2 ou 3 Ko par seconde et il est nécessaire d effectuer un compromis entre qualité et vitesse de téléchargement. Voici quelques règles d ordre général : pour une photographie, privilégier le format jpeg plutôt que GIF (le résultat est meilleure et moins volumineux); pour une image comportant du texte, privilégier le format GIF (avec du JPEG, le texte risque d être flou); pour réaliser des animations (du genre banderole animée), du texte, un fond transparent, utiliser le format GIF; une image JPEG enregistrée avec une qualité de 100% signifie qu il n y a pas de perte d information mais le résultat sera trés volumineux; une image JPEG avec une qualité de 70% permet un résultat correct pour un fichier bien moins volumineux; selon le type d image, on peut descendre jusqu à 50% mais en dessous le résultat est généralement médiocre

5 GIF - 9 Ko JPG qualité Ko JPG qualité 70-3 Ko Meilleur compromis Exemple d une photographie exportée selon différents formats GIF - 9 Ko Meilleur choix JPG qualité Ko JPG qualité 70-3 Ko Exemple de texte exporté selon différents formats Exportation d images pour le Web Pour les travaux pratiques, vous devez disposer d un logiciel de traitement d images. Vous pouvez utiliser Adobe Photoshop (la référence des infographistes mais produit cher et compliqué pour les débutants), GIMP l excellent logiciel libre ou encore Macromedia Fireworks (particulèrement adapté à la création de sites Web, propose des options pour s intégrer directement avec l éditeur HTML Dreamweaver et permet à la fois des manipulations bitmaps et vectorielles). Si vous disposez déjà d un logiciel de traitement d images, utilisez le, sinon vous pouvez télécharger Fireworks, version d évaluation limitée à 30 jours (19 Mo). Cliquez avec le bouton droit au dessus de la photographie de la guèpe (format JPG qualité Ko) ci-dessus puis sur "Enregistrez l image sous..." Ouvrez ensuite l image avec votre logiciel de traitement d images. Sous Fireworks, cliquez sur "Fichier", "Assistant d exportation" et comparez différents formats (GIF et JPEG) et différents niveaux de compression : les deux fenêtres de l assistant d exportation vous permettent de visualiser le rendu tout en affichant la taille de l image résultante en Ko, ainsi qu une évaluation du temps de téléchargement avec un modem. Faites de même avec l image de texte ci-dessus (à partir de l enregistrement de l image - 5 -

6 au format GIF). Par la suite, lorsque vous aurez l habitude de sélectionner le format présentant le meilleur compromis qualité / poids de l image, il est plus rapide d utiliser "Aperçu avant exportation..." dans le menu "Fichier" plutôt que "Assistant d exportation..." La problématique de la dimension des images à exporter Lors de la réalisation d un site Web, se pose un problème délicat : nous ignorons tout de la configuration des postes informatiques de nos visiteurs. Certains visiteurs disposent d écran 14 ou 15 pouces, d autres de 17 pouces ou plus. La résolution de l écran des visiteurs peut être de 640 par 480 pixels, 800 par 600, 1024 par 768 ou d avantage encore! Comme nous le verrons lors des modules "SI004 - Utilisation d un éditeur HTML WYSIWYG" et "SI005 - Mettre en forme des pages complexes avec des tableaux", lors de la réalisation de l interface graphique d un site, nous devons effectuer un compromis sur la résolution de l interface. Si nous effectuons une interface graphique dont la largeur est adapté à une résolution graphique de largeur 1024 pixels, alors les visiteurs disposant d écrans de petites tailles dervont recourir en permanence à la barre de défilement horizontal pour visualiser les pages dans leurs intégralités, ce qui est particulièrement désagréable. Au contraire si notre interface graphique est concue pour une largeur de 640 pixels, les détenteurs de grands écrans vont se sentir frustrés. Un compromis généralement adopté consiste à optimiser un site pour une largeur d écran de 800 pixels. Nous verrons par la suite dans les modules SI004 et SI005 qu en utilisant des tableaux de largeur 100%, il est possible de réaliser des interfaces graphiques qui s adaptent automatiquement aux résolutions supérieures. Exemple de l organisation d une page HTML - 6 -

7 Si l on considère le schéma ci-dessus qui représente l organisation d une page HTML. Imaginons que cette page soit optilisée pour une résolution de 800 pixels et qu une colonne de 200 pixels est dédiée au menu de navigation. La largeur maximale des images que peut contenir la zone dédiée au contenu de la page ne peut dépasser pixels soit 600 pixels. En outre, il faut prévoir le cas où le contenu est conséquent et nécessite à recourir à la barre de défilement vertical. Il faut donc soustraire des 600 pixels, la largeur de la barre de défilement : en principe la largeur est de 35 pixels mais selon les systèmes d exploitations (Windows, Unix, Macintosh) et le type de Navigateur employé par le visiteur (Internet Explorer, Netscape, Opéra, Mozilla, Safari, etc..), la largeur de la barre d ascenseur peut être plus grande. Il est donc prudent de réserver 50 pixels pour la barre de défilement. Il ne nous reste donc plus que 550 pixels maximum pour la largeur des illustrations. Si cette largeur est dépassée, alors le visiteur devra recourir à la barre de défilement horizontale avec un écran de résolution 800 par 600 pixels. Il faut donc être trés vigilant sur les dimensions des images utilisées. En outre plus une image est petite, moins elle sera volumineuse et donc plus rapide à télécharger. Comment publier une photo sur le Web? Tout d abord vous avez intérêt à utiliser une photographie de la meilleure résolution possible, puis vous recadrez l image en ne conservant que la partie pertinente (par exemple, pour un personnage, il est judicieux de recadrer la photo en effectuant un copier-coller vers un nouveau document afin de ne conserver que le personnage et supprimer les parties non pertinentes), ensuite vous devez redimensionner l image afin que sa taille soit compatible avec les dimensions requises. Il est également utile de recourir au réglage automatique des couleurs afin d optimiser le contraste et la luminosité de la photographie, surtout s il s agit d une image scannée (sous Fireworks, sélectionner l image, cliquez sur "Filtre", puis "Régler la couleur",puis "Niveaux automatiques". Si cela n est pas suffisant ou ne s avère pas concluant, jouez avec les paramètres "Luminosité/Contraste" du menu "Régler la couleur")

8 Exemple de traitement d une photographie scannée de grande dimension pour l adapter au Web Travailler avec un logiciel de traitement d images La plupart des logiciels de traitement d image sont trés gourmands en mémoire et ressource de calcul : les images créers et manipulées peuvent rapidement devenir trés encombrantes. Pour vous donner un ordre d idée, une image au format A4 pour une impression de qualité pèsera entre 30 et 60 Mo, et pourra nécessiter jusqu à 5 fois cette place en mémoire vive. Pour le Web, nous ne travaillerons généralement qu avec des images de formats restreints; ce qui ne nécessite donc pas forcément de disposer d un PC avec beaucoup de mémoire vive. Les logiciels tels que Photoshop, GIMP ou Fireworks affichent la quasi totalité des outils et palettes au premier lancement. Il est préférable de réorganiser son espace de travail et d avoir sous la main les éléments que vous utiliserez le plus souvent. Il vous suffit pour cela de déplacer les palettes à l aide de la souris et de les positionner où bon vous semble. Pour l infographie, un écran de 17" ou plus est souhaitable afin de disposer de suffisament d espace de travail pour afficher à la fois votre espace de travail et les outils et palettes courantes. Première composition graphique sous Fireworks : - 8 -

9 Lancez Fireworks, puis dans le menu fichier, cliquez sur "Nouveau". Spécifiez alors la largeur et hauteur de votre feuille de travail ainsi que la couleur du fond. Si vous ne savez pas à l avance le format d image (ce qui est probable); créez une image de par exemple 500 par 500 pixels : la taille de votre document pouvant être ajusté à tout moment. Chaque icône de la palette d outils représente un outil spécifique. Lorsque qu une flèche vers le bas est affiché dans la partie inférieure d un icône, cela signifie qu en cliquant dessus et en maintenant le bouton de la souris enfoncé, on accède à différentes options : ainsi en cliquant sur l icône rectangle, un menu contextuel s afficher et permet de sélectionner d autres formes de base telles que cercle, polygone, rectangle à bord arrondi. Sélectionnez l outil rectangle à bord arrondi et dessinez dans votre document de travail un rectangle quelconque. Pour modifier la couleur de bordure et de fond de votre rectangle, cliquez sur les icônes de la partie couleur de votre palette d outil (le rectangle doit être sélectionné). Toute une série de palettes différentes est accessible à partir du menu "Fenêtres" de Fireworks. En sélectionnant la fenêtre "Informations", vous visualisez la largeur, la hauteur, la position - 9 -

10 horizontale et la position verticale de votre objet. Vous pouvez modifier les proportions et/ou la position de votre objet directement à partir de cette fenêtre en modifiant les informations numériques. En sélectionnant la fenêtre "Objet", vous avez accès aux propriétés de l objet courant (c est à dire l objet sélectionné). Ainsi la fenêtre des propriétés associées à votre rectangle à bords arrondis permet de modifier le niveau d arrondis. Créez ensuite une nouvelle forme : par exemple un cercle. Choisissez une couleur différente de l objet précédent. Utilisez ensuite la flèche blanche de la palette d outil pour sélectionner tantôt le rectangle, tantôt le cercle : un simple clic sur un objet suffit à le sélectionner. Si vous souhaitez sélectionner plusieurs objets, dessiner avec l outil de sélection (icône flèche blanche) un rectangle qui recouvre les différents objets : tous les objets englobés dans la sélection sont alors sélectionnés et vous pouvez par exemple les déplacer simultanément. Cliquez sur "Fichier" puis "Ouvrir" et ouvrez l image de la guèpe que vous avez enregistré précédemment sur votre disque dur. Un nouveau document s affiche : sélectionnez l image bitamp en cliquant dessus avec l outil de sélectionner puis faites un copier-coller (à partir du menu édition) dans votre document comportant le rectangle et le cercle : vous disposez maintenant d une image comportant à la fois des éléments vectoriels (le cercle et le rectangle) et une image bitmap (la guèpe). Sélectionner l image bitmap, puis à partir du menu "Modification" puis "Disposez" et "Arrière plan", vous placez l image de la guèpe en arrière plan et vous êtes alors en mesure de déplacer le cercle ou le rond devant la guèpe. Attention, une fois que vous aurez exporter au format GIF ou JPEG votre création, il ne vous sera plus possible d intervenir dessus : en effet, l image sera alors entièrement sauvegardé sous forme de pixels, et il n y aura plus de différenciation entre les différents éléments de votre composition (le cercle, l image de la guèpe et le rectangle ne ferront plus qu un). Par conséquent, lors de toute création graphique, vous devez sauvegarder vos compositions au format de votre logiciel de traitement d images dans un répertoire spécifique qui servira à stocker vos sources et vous permettra donc de modifier par la suite vos créations sans avoir tout à refaire! Maintenant que nous avons vu les concepts fondamentaux de la manipulation graphique, nous allons passer à la création de pages Web avec un éditeur html Wysiwyg avant de passer à la suite. Support de cours distribué sous license GNU FDL

11 Dernière mise à jour : :42:01 Copyright (c) AUF 2004 Agence universitaire de la Francophonie, programme TIC et appropriation des savoirs Formations de Formateurs aux Technologies de l Information TRANSFER