Création et manipulation d'images numériques (1)

Introduction

Les images (numériques) contribuent grandement à la popularité des pages sur le Web. Elles ajoutent du graphisme, de la couleur et permettent de représenter de l'information (contenu) de manière différente au texte seul. Plein de logiciel de dessin permettent de créer et manipuler des images numériques. Nous allons utiliser le logiciel Paint Shop Pro 5 (PSP5) comme bon outil-support de ce cours.

Pourquoi créer et manipuler des images numériques?

L'information visuelle non textuelles (graphiques, images, etc...) permet d'une part d'enrichir esthétiquement un document pédagogique, et d'autres part de représenter de l'information différemment d'un texte, voire de représenter de l'information qui ne pourrait pas être décrite textuellement. Et ce, que ce soit un document papier/traditionnel ou éléctronique.

L'intérêt d'être capable de créer et de manipuler ses propres images numérique est donc une compétence essentielle pour les rédacteurs de matériel pédagogique pour le Web.

Objectifs

A la fin de ce cours vous devriez :
  1. pouvoir choisir, en fonction de vos besoins, parmis les différents types d'images numériques et les formats d'images,
    • choisir entre images Bitmap et images Vectoriels,
    • choisir entre le format GIF et le format JPG,
  2. être capable de choisir et d'utiliser les fonctions principales d'un logiciel de dessin, i.e. Paint Shop Pro,
    • créer un nouveau fichier (image),
    • enregistrer un fichier (image),
    • retrouver et ouvrir un fichier (image) existant,
    • utiliser des outils de dessin tel que...
      • le pinceau,
      • la loupe,
      • le pot de peinture,
      • le texte,
    • la palette de couleur,
    • capturer une image à l'écran,
  3. être capable d'insérer une image dans vos pages Web.

A propos des images numériques

Dessin classique vs Image numérique

Choisir entre images Bitmap et images Vectoriels

Bitmap vs Vectoriel
Images Bitmap
  • Les pages Web sont composées exclusivement d'images bitmap.
  • Celles-ci sont composées de pixels (1 pixel = unité graphique atomique) qui sont arrangées selon une grille.
  • Lors d'un agrandissement de l'image, les pixels apparaissent comme de petites aires carrées de couleur.
  • Chaque pixel a une profondeur (bit depth) qui représente le nombre de couleurs différentes qu'il peut avoir.
  • La profondeur d'un pixel peut varier entre 2 et 16'000'000 de couleurs...
    • 2 couleurs (codé sur 1 bit),
    • 16 couleurs (codé sur 4 bit),
    • 256 couleurs (codé sur 8 bit),
    • 32'000 couleurs (codé sur 24 bit),
    • 64'000 couleurs (codé sur 24 bit),
    • 16'000'000 couleurs (codé sur 24 bit),
  • La résolution d'une image = le nombre de pixels par inch (pixel/inch), sur un écran standard la résolution est de 72 pixel/inch.
Images Vectorielles
  • Les informations de l'image sont composées par des vecteurs.
  • Ces vecteurs sont des commandes qui permettent de dessiner des formes particulières.
  • Le codage d'une ligne contient...
    • un point de départ,
    • un point d'arrivée,
    • l'épaisseur,
    • un motif,
    • une couleur.
  • PSP5 peut ouvrir des images vectorielles car il les convertit en images bitmap.
  • Exemples de logiciels vectoriels...
    • Word,
    • Corel Draw,
    • etc.

Choisir entre le format GIF et le format JPG,

Format d'image : GIF vs JPEG
Format GIF
(Graphical Interchange Format)
Surtout utilisé pour des schéma et des dessins avec peu de couleur.
  • ASPECTS POSITIFS
    • compression algorithmique (Lempel-Ziv_Welsh) très efficace,
    • format d'image le plus populaire sur le Web,
    • possibilité de définir 1 couleur comme étant transparente.
  • ASPECTS NEGATIFS
    • 256 couleurs différentes uniquement,
    • donc inaproprié pour des images avec beaucoup de couleurs.
exemple de compression GIF : 0=pixel blanc & 1=pixel noir.
Format JPEG
(Joint Photographic Experts Group)
Aproprié pour des photos et les images de grandes tailles
  • ASPECTS POSITIFS
    • jusqu'à 16.7 milions de couleurs différentes,
  • ASPECTS NEGATIFS
    • perte de détails lors de la compression,
N.B. Depuis 2 ans environ on entend parler du nouveau format d'image PNG (Portable Network Graphics) pour le Web, meilleur que le format GIF (plus de 256 couleurs & plus d'une couleur transparente) mais tout de même moins efficace que le format JPEG pour les photos. Pour l'instant on ne trouve quasiment pas d'images PNG sur le Web, le standard étant encore trop récent.

être capable de choisir et d'utiliser les fonctions principales d'un logiciel de dessin, i.e. Paint Shop Pro,