Aller au menu - Aller au contenu

Icône La vectorisation avec Inkscape

Par Avatar SpaceFox
Mise à jour : 11/05/2009
Difficulté : Facile Facile Creative Commons BY
492 visites depuis 7 jours, classé 229/795
Qu'est-ce que la vectorisation ?


C'est l'action de transformer une image définie par des points colorés (bitmap, i.e. une image "standard") en une image définie par des formules mathématiques appelées "vecteurs" : lignes, courbes, etc.

Ce tuto va vous apprendre à vectoriser facilement une image.
Retour en haut
Sommaire du tutoriel :
Icône du chapitre
Retour en haut

Généralités

Avantages & Inconvénients



Les avantages


  • On peut agrandir une image vectorisée presque à l'infini, à la taille qu'on veut et sans perte.
  • Les images prennent moins de place qu'en bitmap.

Les inconvénients


  • Il est presque impossible de gérer des couleurs complexes ; la vectorisation ne convient donc que pour le dessin au trait ou colorié par a-plats (exemple : BD "traditionnelle" (pas les coloriages complexes modernes), mangas sans les trames (on peut mettre des niveaux de gris par contre), etc.)
  • Vous pouvez oublier tout de suite vos photos de vacances !

Comment fait-on ?



Pour l'exemple, je vais prendre ce dessin au trait, fait par une demoiselle pseudo-nommée dayMdel et qu'elle nous avait donné pour un antique concours de coloriage, sur un tout autre site.
Comme vous pouvez le voir, c'est un dessin « au trait » : c'est noir ou blanc, il n'y a pas de niveaux de gris, de couleurs ou de trames.

Voyons son visage :

Image utilisateur

Imaginons que je veuille ce visage, mais trois fois plus grand. Que puis-je faire ?
Retour en haut

De l'intérêt de la vectorisation

Ce qui se passe quand on agrandit une image "bitmap"



Donc, j'ouvre mon image sous Photoshop, et je teste l'agrandissement.

Au plus proche


Voici le visage grandi avec la technique du « au plus proche ». Sans commentaire.

Image utilisateur

Bicubique


Essayons donc la meilleure technique disponible sous Photoshop, à savoir celle nommée "bicubique". Voici ce que ça donne :

Image utilisateur

C'est flou. Ca bave. C'est horrible.

Diable. Photoshop ne permet pas d'agrandir proprement ce genre d'image. C'est triste. Que faire alors ?

Mais suis-je bête ! J'ai un visualisateur d'images, nommé IrfanView, qui possède des filtres très poussés de retaillage ! (d'ailleurs, je n'ai jamais compris pourquoi ils n'étaient pas inclus dans des logiciels du calibre de Photoshop...)

Filtre de Lanczos


Voici le visage grandi grâce à un "Filtre de Lanczos".

Image utilisateur

Malheureusement, si ce filtre est extrêmement efficace sur des images parfaitement propres et nettes, il a tendance à amplifier les artefacts de compression Jpeg. Résultat : ça bave.

Ce n'est pas grave, il y en a d'autres !

B-Splines


Voici le visage grandi avec la avec la technique des « b-splines ».

Image utilisateur

C'est beaucoup mieux, mais du coup... c'est flou.

Une idée réfléchie



Devant la difficulté et la faible qualité des agrandissements possibles, des gens ont réfléchi, et ont pensé à peu près ceci :
Puisque tout le dessin est constitué de traits, peut-on retrouver ces traits, puis les agrandir ? Ainsi, on aurait pas tout ces problèmes !


Eh bien oui, on peut retrouver ces traits. Ce processus s'appelle la "vectorisation", et nous allons voir tout de suite comment il fonctionne.
Retour en haut

Vectoriser avec Inkscape

Inkscape



Pour ce faire, téléchargeons un logiciel appelé Inkscape.
Pourquoi lui et pas un logiciel professionnel, genre Illustrator ?
  • Il est gratuit et libre.
  • Il contient un module de vectorisation gratuit et puissant.
  • Il fonctionne sous PC, Mac et Linux.
  • Je sais m'en servir !
Téléchargez-le et installez-le. L'installation est longue, c'est normal.
Pendant ce temps, enregistrez l'image du visage en taille normale dans un coin de votre disque dur, vous allez en avoir besoin pour les tests.

La procédure



Ouvrez la avec Inkscape. Vous avez le droit de pester contre la boîte de dialogue d'ouverture, qui est malheureusement une horreur ergonomique.
Vous devez obtenir quelque chose comme ça :

Image utilisateur

Prenez l'outil "sélection" (la flèche noire) et cliquez sur l'image pour la sélectionner :

Image utilisateur

Puis faites Chemin --> Vectoriser le Bitmap. On obtient une superbe boîte de dialogue :

Image utilisateur

On va utiliser le premier mode.
Cliquez sur « mettre à jour » pour avoir un aperçu de la vectorisation, puis jouez avec le seuil de luminosité.

Comme il y a pas mal de petits détails, on peut aller voir dans l'onglet « options » pour pouvoir les garder.

Image utilisateur

IMPORTANT ! Inkscape est un logiciel traduit en français. Trop, même.
En respectant le français, ils ont mis des virgules pour les nombres à virgule au lieu des points anglo-saxons.

Du coup, on ne peut pas mettre de points (ils ne sont pas pris en compte). Adieu les saisies au pavé numérique...

Sans trop forcer, et au bout de quelques essais, on peut trouver des paramètres qui rendent pas mal.
Personellement et pour cette image, j'aime bien avec :
  • Seuil de luminosité : 0,500
  • Supprimer les parasites : 1
  • Adoucir les coins : 1,00
  • Optimiser les chemins : 0,10

Tout ceci dépend totalement de votre image, n'hésitez pas à faire plein d'essais.
De toutes façons, pour avoir quelque chose de vraiment « propre », il faudra retravailler l'image.


Voilà l'image vectorisée et l'image normale côte à côte dans Inkscape (par défaut elles sont superposées, utilisez la flèche noire pour en bouger une, ici le bitmap) :

Image utilisateur

Remarquez qu'on a perdu en détails, surtout sur le cou ou sur les tout petits trucs.

On peut maintenant exporter notre image en bitmap, à la taille qu'on veut, en sélectionnant l'image et en faisant Fichier --> Exporter en bitmap :

Image utilisateur

Seule la partie « dimensions du bitmap » nous intéresse.
N'oubliez pas de cliquer sur « valider » pour vraiment exporter - et ce n'est pas le même « valider » que pour choisir le nom du fichier.


Voilà ce qu'on obtient :

Image utilisateur

On aurait pu faire mieux en passant plus de détails sur les réglages.

Parenthèse sur le format utilisé par Inkscape



Vous pouvez enregistrer les images Inkscape au format SVG, qui est actuellement ouvrable avec Opera, Firefox, Chrome, Safari (mais pas IE) ainsi que OpenOffice.org, Gimp et bien d'autres.
Voici le fichier du visage ainsi que celui du dessin entier.

Information à l'intention de ceux qui sont intéressé par le fonctionnement des choses


Vous savez que le XML est à la mode ?
Eh bien, éditez un fichier .svg avec votre éditeur texte préféré...
Surprise ! C'est un XML !
Vous allez pouvoir programmer vos images en console sous Linux avec VI ou Emacs ! Tout le fonctionnement interne du SVG est détaillé dans ce tutoriel.
Plus sérieusement, ce choix offre quatre avantages :
  • C'est un format standardisé et ouvert, donc stable dans le temps et implémentable librement.
  • Les images obtenues se compressent très bien (il y a même un projet de format nativement compressé avec GZip, le .svgz)
  • On peut récupérer une bonne partie d'un fichier s'il a été corrompu.
  • On peut faire des modifications directes du fichier XML, et donc le manipuler l'image avec tous les outils gérant le XML. On peut par exemple imaginer un "tableau dynamique" en SVG + Javascript.
Retour en haut
Le gros problème de cette technique est qu'elle montre très vite ses limites. L'image doit être parfaite, noir très noir sur blanc très blanc, pas de trop petits détails, pas de couleurs (et surtout pas de dégradés), etc.
De plus, il faut retoucher l'image après coup pour avoir quelque chose de parfait.

Du coup, il est intéressant et utile de pouvoir vectoriser n'importe quel type d'images. Ce sera l'objet d'un autre tuto, et il servira aussi pour les améliorations des images générées à partir de celui-ci.
Retour en haut

Partager

Retour en haut
34 commentaires pour "La vectorisation avec Inkscape"
Note moyenne : 3.50 / 4 (16 votes)
Pseudo Commentaire
Hors ligne Hydroline # Posté le 24/11/2010 à 14:47:13

J'ai trouvé si jamais ça vous intéresse il suffit de sélectionner le texte et d'aller dans le menu chemin => objet en chemin.

Bonne journée
Hors ligne Sownia # Posté le 23/12/2010 à 09:40:08

Bonjour tout le monde,

Tout comme Stigma, j'ai bien fait comme expliqué dans le tuto, mais je ne vois rien du tout dans l'aperçu. Comment cela se fait s'il vous plait ?
Merci d'avance.

P.S : c'est assez urgent.
Sonia.
Hors ligne Lalane25 # Posté le 14/04/2011 à 18:42:40
uzun köylüler canlı
Avatar

Ville : Orchamps-vennes
Pays : France métropolitaine

 C'est beau et simple. Pourquoi ce genre d'outil n'est pas intégré a Photoshop?
Dans un élan de vivacité,je dort...
 
Hors ligne kikaddict # Posté le 08/11/2011 à 18:27:08

Bonjour à tous et à toutes!
Nouvelles sur ce forum et sur l'utilisation d'Inkscape vous allez peut être pouvoir m'aider? Car j'ai un soucis :s
Je suis étudiante en géographie et on nous demande de créer une carte de l'Inde avec la proportion de boudhistes par Etat sous forme de points. Ca no soucis c'est fait. Problème après avoir terminé: je m'aperçoi que des pays tout petits ont des points qui dépassent largement leur taille! Donc pas possible de comprendre cette lecture pr quelqu'un de "normal"... Auriez vous une petite solution à ce soucis?
Car ceux qui trouvent la solution ds les étudiants auront un point bonus et je suis sûre qu'elle est simple mais j'ai beau lire tout ce que je trouve sur les livres je la trouve pas :'(

J'espère que vous pourrez m'aider :)

Merci d'avance à tous!
Hors ligne gmarion # Posté le 08/01/2012 à 15:06:53

Citation : Sownia
Bonjour tout le monde,

Tout comme Stigma, j'ai bien fait comme expliqué dans le tuto, mais je ne vois rien du tout dans l'aperçu. Comment cela se fait s'il vous plait ?
Merci d'avance.

P.S : c'est assez urgent.
Sonia.


Tu as bien sélectionné ton dessin (Ctrl-A) ? (expérience personnelle) :)

Cordialement,

gmarion

Voir tous les commentaires