Accueil > LeTerrier > Leçon de colorisation

Leçon de colorisation

mardi 25 août 2009, par Francois Audirac

Ou comment passer d’un dessin au trait, à une image utilisable, dans un logiciel, un site web...

Quelques grandes étapes :

  1. Numérisation de l’image
  2. Nettoyage
  3. Vectorisation
  4. Colorisation
  5. Ombres et lumières
  6. Exportation

1. Numérisation

Cette opération consiste à scanner l’image. N’utilisez pas une résolution trop importante : 300 dpi sont en général suffisant. Enregistrez cette image au format TIF pour éviter les pertes par compression (JPG...) dans un dossier particulier ("scan" par exemple).

JPEG - 20 ko
Image originale (réduite)

2. Nettoyage

Il s’agit ensuite de toiletter notre image pour la rendre propre.

Lancez Gimp [1] et utilisez dans le menu "Couleurs" l’option "Niveaux" . Le but est d’assombrir les traits et d’éclaircir les zones claires.

Pour cela, dans la fenêtre déplacer le curseur noir (1) qui se trouve à gauche vers le centre et le curseur blanc de droite (2) vers la gauche, selon les besoins. Votre image se transforme aussitôt. Faites plusieurs essais, avant de valider.

Le curseur gris (3) permet de déplacer les couleurs grises soit vers le noir, soit vers le blanc.

A l’aide de la gomme (Shift + E), effacez les traits malencontreux de l’artiste au crayon. Vous devrez aussi effacer les effets d’ombres au crayon pour ne garder qu’un dessin au trait, appelé "line art".

JPEG - 7.4 ko
Résultat après toilettage

Enregistrez cette image toujours au format TIF, sous un autre nom, ou dans un autre dossier ("nettoyees", par exemple).

3. Vectorisation

La vectorisation consiste à transformer un tracé constitué de points (disons pixels, pour simplifier) en un dessin vectoriel, c’est à dire une image capable d’être agrandie ou diminuée sans perte de qualité. [2].

Lancez Inkscape [3] et ouvrez votre image nettoyée.

Cliquez sur votre dessin pour le sélectionner (un cadre en pointillé avec des poignées autour apparait ) (1) et choisissez dans le menu "Chemin", l’option "Vectoriser le bitmap". Une nouvelle fenêtre s’ouvre.

PNG - 63.8 ko
Quelques options à tester

Il n’y a pas de règles, il faut procéder par tâtonnement. Laissez la valeur par défaut dans le champ "Seuil de luminosité" (2) et cliquez sur le bouton "Mettre à jour" (3). Une première estimation apparait dans le cadre de droite. Lorsqu’elle est satisfaisante, vous pouvez passez à quelques tests :
- Cliquez sur "Validez" (4). Le dessin est vectorisé et placé en superposé au dessus du tracé.
- Sans fermer la fenêtre de vectorisation, cliquez sur le nouveau calques créé et déplacez-le à coté du dessin original.
- Cliquez à nouveau sur le dessin original, modifiez la valeur du "Seuil de luminosité" [4] et recliquez sur "Valider". Une nouvelle vectorisation de votre image est faite.
- Vous pouvez répéter cette opération tant que vous le souhaitez.

PNG - 82.5 ko
Plusieurs tests

Astuce : vous pouvez zoomer (avec Ctrl + molette de la souris), effacer les vectorisations faites sans fermer la fenêtre "Vectoriser le bitmap".

Une fois un résultat satisfaisant obtenu, fermez la fenêtre en cliquant sur la croix en haut à droite.

Déplacez les calques pour être sûr de ne pas en avoir plusieurs superposées. Supprimez le calque original avec le dessin au trait pour ne garder que le calque vectorisé. Si vous le souhaitez, vous pouvez enregistrer cette image au format SVG. Il peut être intéressant plus tard de garder ce format original, même si ce qui nous intéresse est de pouvoir la coloriser avec Gimp.

Cliquez sur votre dernier calque, celui bien vectorisé (cadre en pointillé), et choisissez dans le menu "Fichier" / "Exporter en bitmap".

PNG - 77.4 ko
Options d’exportation

Veillez à bien sélectionner votre calque avant cette exportation.
- Vérifiez que l’onglet "Sélection" (1) est bien celui actif.
- Modifiez les dimensions de l’image finale (2) : largeur ou hauteur de 1000 pixels mini, pour un travail final correct (impression, web..).
- Cliquez sur "Parcourir" pour choisir le lieu et le nom d’enregistrement de votre image, au format PNG. Validez.
- Enfin, cliquez sur "Exporter" pour exporter votre sélection en PNG. Attention, on oublie parfois cette étape-là.

4.Colorisation

Relancez à nouveau Gimp et ouvrez votre exportation en PNG. Il est souvent nécessaire de procéder à une deuxième "toilette" pour affiner le trait, gommer des traces de vectorisation, boucher des trous... Utilisez pour cela le pinceau avec un brosse "dure" (circle) et la gomme.
- Renommer votre calque de manière explicite : "traits" ou "line-art" par exemple.

Il va s’agir maintenant de faire preuve de créativité. ;-) Pour les couleurs, le mieux est de garder une palette, notamment si des personnages récurrents apparaissent. Stocker les valeurs RVB ou HTML peut être utile.

Cas simple
La forme que vous voulez coloriser est fermée.
- Placez-vous sur le calque "traits" ou "line-art", choisissez l’outil de sélection contigüe (baguette magique U), et cliquez dans la zone choisie [5].
- Dans la liste des calques, créez un nouveau calque et placez-le en dessous de "traits" ou "line art". Placez-vous sur ce calque.
- Aller dans le menu "Sélection" et choisissez l’option "Agrandir". Augmentez la sélection de quelques pixels, 2 à 5, de sorte que votre sélection recouvre en partie l’épaisseur du trait. Validez.
- Choisissez votre couleur définitive (double-clic sur le pavé : Premier plan / Arrière plan).
- Enfin, remplissez votre sélection avec la couleur choisie : "Edition" / "Remplir avec la couleur de PP = Premier plan, ou avec le raccourci, Ctrl + , ).
- Constatez que votre remplissage passe sous le trait noir et que donc les bords visibles sont nets.

PNG - 42.4 ko
Lorsque la couleur est au-dessus du trait, elle le cache.
PNG - 45 ko
Lorsqu’elle au en-dessous du trait, elle le met en valeur.

Cas complexe
La forme que vous devez colorier est complexe (ici, le bec).
- Zoomer sur la partie à sélectionner et passez en masque rapide avec le bouton en bas à gauche de l’image ou le raccourci : "Shift + Q". Votre image devient rouge ! C’est normal...
- Réinitialisez les couleurs par défaut (avec la touche "d"), ou sélectionnez comme vous voulez la couleur blanche comme couleur de premier plan. Prenez l’outil pinceau ("P") (brosse dure - circle)
- Cliquez sur votre image, comme si vous deviez la peindre avec la couleur blanche : tout ce qui est colorié devient transparent, c’est la partie sélectionnée. Cliquez sur le masque Rapide pour observer votre sélection. Recliquez dessus pour poursuivre votre sélection complète avant de rebasculer en mode normal.
- N’ayez pas peur de mordre sur les traits noirs, au contraire.
- Désactivez le mode "Masque rapide"
- Créez un calque approprié, placez-vous dessus (mais toujours sous celui appelé "traits" et remplissez le sélection avec la couleur de votre choix.

Enregistrez votre image au format XCF (format Gimp, pour conserver les propriétés de calques...).

Procédez ainsi sur toute votre image en utilisant un calque par couleur ou par partie de votre image.

PNG - 23.6 ko
Bon, là, c’est un premier jet. On va l’améliorer.

5. Ombres et lumières

D’abord l’ombre

Pour lui donner un peu plus de consistance, on va lui apporter quelques ombres :
- Créez un nouveau calque (un seul suffira) que vous appellerez "ombres" et que vous placerez juste en dessous de "traits"
- Repérez les parties de l’image qui devraient être assombries : sous le cou, le ventre, sous les bras, sous le bec, le haut de cuisses...
- Placez-vous sur un calque, contenant ces éléments, et cliquez-droit sur le calque et choisissez "Alpha vers sélection".
- Si besoin vous pouvez réduire cette zone en rognant une partie avec l’outil lasso (F) et en appuyant sur Ctrl qui supprimer une sélection.
- Pour ajouter de l’ombre, placez-vous sur le calque "ombres".

Il existe plusieurs méthodes, en voici une approximative, mais rapide :

  • Rétablissez les couleurs par défaut ("d"), et inversez-les (x).
  • Choisissez l’outil dégradé (L) avec le noir en premier plan
  • Dans les options de dégradés, choisissez :
    • Dégradé : PP (Premier Plan) vers Transparent
    • Forme : Radial (cercle) ou linéaire selon les besoins

- Ensuite, votre sélection étant toujours active, utilisez le "clic-glisse-et-lâche" pour obtenir un dégradé de noir, plus ou moins fin. Vous pouvez l’annuler (Ctrl + Z) ou le compléter en l’ajoutant à celui existant.

PNG - 24.7 ko
Avec les ombres

Puis vint la lumière

Pour créer des zones éclairées (attention à la logique de l’éclairage qui doit se situer au même endroit), il suffit de créer un calque "lumières" et d’y ajouter quelques effets :

  • Par des traits :
    • Faire quelques traits blancs épais
    • passer le calque en mode "Lumière douce" ou "Superposer"
    • Appliquer un Filtre de flou pour adoucir encore l’effet
  • Par des calques
    • dupliquer un des calques à éclaircir
    • supprimer une de parties à ne pas éclairer
    • Passer le calque en mode "Addition"
  • Et d’autres encore...
PNG - 27.6 ko
Avec la lumière

6. Exportation

Enregistrez toujours votre image en XCF, pour ne pas perdre les informations sur les calques.

Exportez votre image au format PNG pour conserver la transparence.

Et voilà le résultat final... Mais on peut beaucoup mieux faire... CE n’est que du travail d’amateur...

PNG - 39.8 ko
Avec un fond et un contexte

P.-S.

Ci-joints, l’image originale numérisée au format TIF ainsi que le résultat final au format XCF...

Documents joints

Notes

[1Gimp est disponible pour Windows, Mac, ou sur votre distribution GNU/Linux préférée... : http://www.gimp.org

[2La plupart des images disponibles sur le site http://openclipart.org sont dans un format vectoriel : le SVG

[3Inkscape est disponible pour Windows, Mac, ou sur votre distribution GNU/Linux préférée... : http://www.inkscape.org

[4plus le seuil est grand et plus il le trait est épais et grossier

[5Vous pouvez ajouter d’autres sélections si elles doivent être coloriées de la même couleur : Ctrl + clic

2 Messages

  • Leçon de colorisation Le 25 août 2009 à 09:01, par ania

    ça c’est de la fiche pazapas pour les nul(le)s

    on a presque l’impression qu’on pourrait y arriver ... jusqu’au choix des couleurs

    ania

  • Leçon de colorisation Le 25 août 2009 à 09:35, par ania

    nathalie m’a demandé d’imprimer l’article : elle avait essayé de colorier les quatre nombres la semaine dernière et ...la galère

    ania