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. Une multitude de logiciels de dessin permettent de créer et manipuler des images numériques. Nous allons utiliser le logiciel Paint Shop Pro 5 (PSP5) comme outil-support pour 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, que ce soit dans un document imprimé 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,
  2. être capable de choisir et d'utiliser les fonctions principales d'un logiciel de dessin, i.e. Paint Shop Pro,
  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.

Les fonctions principales d'un logiciel de dessin, Paint Shop Pro

 Dans un premier temps il faut que vous soyez capable de créer une nouvelle image, de l'enregistrer puis de la réouvrir. Comme dans la plupart des logiciels, la gestion des fichiers dans PSP se fait à partir du menu fichier dont vous voyez une capture d'écran ci-dessous.

Gestion de fichier dans PSP5
  • NEW : créer un nouveau fichier-image
    1. Dans le menu fichier (eng.file) choisir l'option nouveau (eng.new).
    2. Spécifier la largeur et la hauteur en pixels de la nouvelle image.
    3. Préciser la profondeur de couleur.
    4. Indiquer une couleur de fond pour l'image.

  • SAVE : enregistrer un fichier-image
    1. Dans le menu fichier (eng.file) choisir l'option enregistrer (eng.save).
    2. Choisir le format d'enregistrement du fichier (GIF / JPEG).
    3. Donner un nom au fichier a enregistrer plus original que celui proposer par defaut.

  • OPEN : ouvrir un fichier-image
    1. Dans le menu fichier (eng.file) choisir l'option ouvrir (eng.open).
    2. Chercher l'image sur le disque ou la disquette et l'ouvrir.

Une fois que vous avez ouvert ou créer un nouveau fichier-image, vous pouvez commencer à dessiner en utilisant les différents outils de dessins qui vous sont proposé.

Utiliser des outils de dessin

La palette d'outils (image ci-dessus) regroupe tous les outils de desssin que vous pouvez utiliser dans PSP5. Chaque outils de dessin peut-etre paramétré grâce au panneau de control (voir ci-dessous). Vous pouvez par exemple changer la largeur du trait, sa diffusion etc.


N.B. Si le panneau de control n'est pas visible, vous pouvez l'afficher en choisissant dans le menu 'View' l'option 'toolbars' puis 'control panel'.

Il est bien sûr aussi possible d'effectuer des traits de couleur différentes.

La palette de couleur

 La palette de couleur vous permet de choisir une couleur pour une prochaine action. Il existe plusieurs manière de choisir une couleur.
  1. Vous choisissez une des couleurs prédéfinies (en haut à gauche).
  2. Vous choisissez une couleur en utilisant le cercle de couleur (en haut a droite).
  3. Vous entrez le code couleur en fonction des composantes RGB (Red, Green, Blue).
  4. Vous entrez le code couleur en fonction de la teinte (Hue), saturation (Sat) et de la luminosité (light) de la couleur voulue.

Une possibilité intéressante de PSP5 est de pouvoir capturer ('photographier') des parties de votre écran, par exemple pour créer les illustrations d'un tutoriel visant à l'apprentissage de l'utilisation d'un logiciel.

Capturer une image à l'écran
  • Dans le menu 'Capture', choisir l'option...
    • 'Setup...' pour configurer les paramètres de la capture d'écran.
    • 'Start' pour effectuer une capture avec les paramètres prédéfinis.

Insérer une image dans vos pages Web

Une fois que vous êtes satisfait de votre dessin vous pouvez faire en sorte qu'il apparaisse dans votre page Web.

Images et page Web
Code HTML pour insérer une image : <img src="mon_dessin.gif">