Les images numériques

Photos et dessins

Notions et outils de base

Par Jérôme Choain / @jcfrog

Remarque

Cette présentation évoque mais ne traite pas le cas des images vectorielles.

Une image = un fichier



Ce fichier a donc :

  • un nom (ex : "chevres.jpg")
  • un format (ex : JPG)
  • une taille (ex : 484Ko)

D'où viennent-elles?

  • appareil photo
  • scanneur
  • logiciels de création (3D, 2D)

Créer des images

Logiciels 3D / 2D

source : Pepper & Carrot, making of episode 23

Peinture numérique

Dessin numérique

Modélisation 3D et rendu

Modifier une image

Pourquoi modifier?

Retouche photo "Photoshoper"


... pour se faire plus belle

Tricher ( Fake news )

Effets spéciaux

Réparer, améliorer, recomposer...

Tous domaines

Affiches, flyers, tracts, cartes de visites, carte de voeux, faire-part, invitation, infographie, ...

Notions de base

  • Pixels et dimensions
  • Résolution
  • Couleurs
  • Transparence

Pixels et dimensions

L'oeil effectue un "lissage" qui gomme les crénelages.

On dit que cette image fait 600x338 pixels ( = 202800 pixels )

Penser mosaïque

La taille des carreaux fait la finesse de la mosaïque

Carreaux de 100 pixels

Carreaux de 50 pixels

Carreaux de 25 pixels

Carreaux de 10 pixels

Carreaux de 5 pixels

Carreaux de 1 pixels

Taille & dimensions

  • Taille = taille du fichier, en octets (ou Ko, Mo, ...)
  • Dimensions = nombre de colonnes et nombres de lignes (pixels)

Résolution

Plus la résolution est haute, plus l'image sera nette.

  • Nombre de pixels d'un capteur (ex: 12MegaPixels)
  • Nombre de pixels de l'écran (ex: 1280x1024)
  • Nombre de points par unité de surface (ex: 300dpi)

Exemple scanneur

Fichiers produits

Plus léger mais moins net

Les couleurs

Couleurs primaires IRL

IRL : In Real Life (Dans la vraie vie)

Mélanges...

+ =

+ =

+ =

...

Couleurs RVB

Même principe mais avec Rouge-Vert-Bleu

En anglais RGB pour Red-Green-Blue

Une couleur RGB est définie par :

  • un niveau de Rouge entre 0 et 255
  • un niveau de Vert entre 0 et 255
  • un niveau de Bleu entre 0 et 255

Exemples :

  • (255,0,0) =
  • (0,128,0) =
  • (255,255,255) =
  • (0,0,0) =
  • (128,255,128) =
  • (128,128,128) =

Autres codages des couleurs

Codages les plus utilisés

  • RGB (Red/Green/Blue) = RVB (Rouge/Vert/Bleu)
  • CMYK (Cyan/Magenta/Yellow/Black) = CMJN (Cyan/Magenta/Jaune/Noir)
  • HSL (Hue/Saturation/Luminosity) = TSL (Teinte/Saturation/Lumière)
  • HSV (Hue/Saturation/Value) = TSV (Teinte/Saturation/Valeur)

Usage simple

Cliquer pour choisir sa couleur

Plusieurs approches pour choisir une couleur sur une palette

Les logiciels

Exemple 1 : Krita

Exemple 2 : Gimp

Exemple 3 : Adobe Fireworks

Calques

Séparation des plans

Empilement de calques

Empilement de calques

A voir

Je ne peux inclure cette image dans cette présentation, mais si vous disposez d'une connexion internet, elle vaut le coup d'oeil.

Voir le celluloïd du livre de la jungle

Calques et objets

Transparence

Définition d'un pixel

La valeur d'un pixel peut être définie par:

  • 3 composantes "couleur" (RGB, HSL, ...)
  • un niveau de transparence

La valeur de transparence est appelée canal alpha.

Exemples avec canal alpha exprimé entre 0 et 1:

  • (255,0,0,1) =
  • (255,0,0,0.5) =
  • (120,250,200,0.3) =

Outils

Redimensionner

Changer la résolution d'une image. + petit , + grand ,

Agrandir une image détériore sa qualité.

Recadrer

Réduit l'image à une zone sélectionnée.

Sélection

Sélectionner des objets ou des pixels

Retoucher

Peindre, dessiner...

Effacer, modifier...

Effets

Textes

Stickers

Gradients

Ou dégradés de couleurs.

Images vectorielles

Chemins et remplissages

Vecteurs ou pixels?

Les masques

Le masque determine les zones d'opacités.

Compression

Une "petite" image de 1000x1000 = 1 millions de pixels.

Formats

Format Compression Perte Taille Transparence
BMP Non Non Enorme Non
JPG Oui Oui Non
PNG Oui Non Ca dépend Oui
TIFF Oui/Non Oui/Non Ca dépend Oui
GIF Oui Oui Oui

GIF animé

Liens et références