Le dessin vectoriel

Ayant vu mes dessins de blasons, ici et sur HéraldiqueGenWeb, Gilles, un pionnier du blog généalogique (de qualité), s’y est mis à son tour. Récemment, en voyant les articles que je consacre aux blasons de du Paz, il m’a suggéré de faire un petit tutoriel sur le dessin de blasons tel que je le pratique, en dessin vectoriel. Voici donc une entrée en matière.

Tout d’abord, il importe de comprendre la différence entre un dessin bitmap (en français, matriciel), et un dessin vectoriel. Grossièrement, un dessin bitmap se définit comme une grille de points ayant chacun une couleur qui lui est propre. Cela représente à peu près 99,99% des dessins qu’on trouve sur internet. Une image vectorielle est elle constituée d’objets géométriques, qui sont redessinés à chaque fois qu’on affiche l’image. Chaque objet est doté de propriétés qui permettent de le dessiner (type d’objet, couleur, position…). Comme mon but n’est pas de faire un cours sur le dessin assisté par informatique, je vous renvoie aux articles de Wikipédia sur les images bitmap et vectorielles pour bien comprendre la différence entre les deux types d’images, avec leurs avantages et inconvénients. Le principal inconvénient du dessin bitmap est qu’il se dégrade très vite dès qu’on veut en changer la taille ou une couleur…

A l’inverse le dessin vectoriel permet une définition parfaite de l’image à toute les tailles, mais à chaque affichage, l’image doit être redessinée, et cela nécessite beaucoup de calculs. Autrefois, ce type de dessins étaient donc réservés aux professionnels car il fallait des machines très puissantes et des logiciels aux prix pharaoniques pour travailler en vectoriel (ou bien beaucoup de temps pour laisser le logiciel faire ses calculs…). Aujourd’hui, n’importe quel ordinateur d’entrée de gamme est bien plus puissant que ceux qui ont servi à envoyer la première fusée sur la Lune, et le mouvement du logiciel libre met à notre disposition des logiciels gratuits qui n’ont rien à envier à leurs homologues commerciaux.

Pour dessiner nos blason, nous allons donc utiliser le logiciel de dessin vectoriel Inkscape que vous pouvez télécharger gratuitement ici (téléchargez toujours les logiciels sur leurs sites officiels…). Ce tutoriel utilise la version 0.46 d’Inkscape, qui est la dernière disponible au moment de la rédaction de cet article. On trouve beaucoup d’aide sur Inkscape et son utilisation sur internet. N’hésitez pas à consulter les sites qui y sont consacrés et la documentation d’Inkscape. Mon but ici n’est pas de vous apprendre à vous servir du logiciel, car d’autres le font mieux que moi, mais de vous montrer comment on peut s’en servir pour faire de (beaux) dessins héraldiques.

Si vous ne connaissez pas déjà un peu Inkscape, il sera utile de suivre quelques tutoriaux simples avant de suivre celui-ci. Vous en trouverez de très bien ici pour démarrer (faites au moins les deux premiers, Basique et Avancé, et si vous faites aussi Formes, ce tutoriel vous semblera facile).

Dessin d’un écu simple

Préparation du modèle (mode bitmap)

Je suis très mauvais dessinateur, je ne sais faire que des bonshommes avec un cercles et quelques traits… J’utilise donc des modèles que je copie et modifie pour présenter des dessins pas trop moches… Pour ce tutoriel, nous allons dessiner un simple écu, mais avec une forme spécifique, inspirée d’un dessin de Pierre Joubert (L’héraldique, 1992, éditions Ouest-France). La première étape est la numérisation du modèle (avec un scanner pour celui-ci, mais si votre modèle est sur un document fragile, privilégiez l’appareil-photo). Si votre modèle est déjà une image informatisée provenant par exemple d’un site internet (attention aux éventuels droits de copie), cette étape est facultative.

Tout le travail de préparation se fait sur une image bitmap, avec un logiciel de dessin bitmap. Si vous voulez faire le tutoriel en même temps que vous le lisez (conseillé) avec le même modèle que moi (mais un autre fera très bien l’affaire), téléchargez-le ici. Préférez toujours travailler sur des images grandes (au moins 3 à 400 pixels de large).

L’étape suivante est la préparation du modèle. Elle est très importante, car si le modèle est de mauvaise qualité, le résultat de la vectorisation sera aussi moyen et vous aurez beaucoup de travail de reprise. Pour cela, n’importe quel logiciel de dessin traditionnel, donc bitmap, fait l’affaire, que ce soit Paint ou Photoshop… Comme ici, seule la forme de l’écu nous intéresse, nous supprimons tout le reste et ne gardons que le contour.

Le résultat semble correct, mais si on grossit l’image, on peut voir qu’elle recèle de nombreuses imperfections. C’est particulièrement vrai si on part d’une image au format Jpeg (comme mon modèle), ou d’une photo. Ci-dessous, grossis 6 fois, le coin haut à gauche de l’image et le bord en bas à droite : les contours sont loin d’être nets, il y a même des points blancs dans le contour (dus à la qualité d’impression de mon bouquin ou aux performances de mon scanner). Si on ne fait rien, l’image vectorisée suivra ces défauts et le contour ondulera au lieu d’être rectiligne, et cela nécessitera beaucoup de retouches. On les repasse donc en noir pour avoir des bords nets. Ici, l’opération se fait en moins d’une minute quand on en a l’habitude, mais sur des dessins complexes, cela peut prendre beaucoup plus longtemps. Il m’arrive régulièrement de passer 30 minutes à une heure pour repasser entièrement un contour, surtout quand le modèle est une photo aux contrastes faibles…

Maintenant que le modèle est propre, on peut s’en servir pour le vectoriser. Enregistrons notre image (de préférence au format png que jpeg), et ouvrons-la avec Inkscape.

La vectorisation (passage en vectoriel)

Notre dessin est ouvert sous Inkscape. La suite est relativement simple et facile, à partir du moment où la préparation a été sérieusement faite. Si vous avez sauté l’étape de préparation (la plus importante, n’oubliez pas), vous pouvez prendre le tutoriel en cours de route en téléchargeant ce modèle. Après ouverture de l’image (un copier-coller depuis votre logiciel de dessin bitmap vers Inkscape fonctionne si l’image n’est pas trop grande), vous avez quelque chose qui ressemble à ça :

Inkscape sait lire les dessins bitmap, mais comme il travaille avec des formes géométrique, il ne sait pas faire grand-chose de notre modèle. Demandons-lui de nous le transformer en une forme géométrique. Rien de plus facile : cliquons sur notre modèle pour le sélectionner, et dans le menu \ »Chemin\ », choisissons \ »Vectoriser le bitmap…\ ». Une fenêtre s’ouvre, ne changez rien, et cliquez juste sur OK. Fermez la fenêtre.

Vous pensez qu’il ne s’est rien passé ? Sélectionnez votre modèle et déplace-le. Inkscape lui a superposé une forme géométrique qui épouse (presque) parfaitement ses contours… Voilà, le contour est vectorisé, on peut supprimer le modèle…

Pour autant, la vectorisation n’est pas parfaite. Inkscape a mis des nœuds au milieu des segments rectilignes, il est préférable de les supprimer. De même, il a mis par endroits (là où l’écu s’arrondit avant la pointe) des nœuds durs qu’il faut rendre doux. Enfin, sur la pointe, il a mis des nœuds doux alors qu’ils devraient être durs. Notre modèle n’était donc pas parfait ;). Corrigeons tout ça… Pour ce faire, utilisez les outils encadrés en rouge et en vert ci-dessous. Si vous ne savez pas comment les utiliser, c’est que vous n’avez pas suivi les tutoriaux conseillés dans la première partie (dépêchez-vous de les faire, ils sont simples et faciles).

La simplification permet d’éliminer les éventuels défauts qui resteraient après la vectorisation, et vous donne un écu aux courbes et angles parfaits. Inkscape intègre une fonctionnalité de simplification automatique, mais malheureusement elle n’est pas encore paramétrable et dans notre cas, le résultat serait catastrophique (vous pouvez essayer pour voir)… Moins notre forme contiendra de nœuds, plus le fichier résultant sera léger et l’image rapide à afficher. Il est donc important de ne pas sauter cette étape. Voici à quoi je suis arrivé sans trop d’efforts (on peut certainement faire mieux, je vois encore 4 à 8 nœuds superflus).

Notre écu a un joli contour, mais il est vide, et… on ne peut pas le colorier. Il est en effet composé de deux chemins : un extérieur qui est noir, et un intérieur qui créé un trou. Il faudrait pouvoir colorier ce chemin intérieur. Pour cela, il faut le séparer. Rien de plus simple : sélectionnons le dessin, et dans le menu Chemin, utilisons la commande Séparer. Le chemin extérieur se sépare du chemin intérieur qui prend la couleur noire.

Il est important de comprendre que nous sommes passés d’une seule forme à deux dimensions à deux formes superposées, un peu comme si on avait maintenant une troisième dimension. La forme du bas formera le contour de l’écu, celle du haut sera le champ.

Cliquez à l’extérieur du dessin pour tout déselectionner, puis cliquez au centre pour ne sélectionner que le champ. Cliquez maintenant sur l’une des couleurs du nuancier du bas de la fenêtre de travail d’Inkscape : le champ prend cette couleur. Bravo, vous venez de faire votre premier écu avec Inkscape ! Enregistrez-le (au format .svg, qui est un format vectoriel), il vous servira de point de départ pour les futurs blasons que vous dessinerez…

Pour l’enregistrer au format .png et le réutiliser ailleurs, sélectionner toutes les formes (le contour plus le champ), et faites Fichier/Exporter en bitmap…. Changez la largeur (par défaut, la hauteur s’adapte automatiquement, le nom du fichier, puis cliquez sur Exporter. Amusez-vous à changer la largeur (50, 300, 3000…) et comparez les résultats : ils sont impeccables quelle que soit la taille de l’image…

Si vous n’y arrivez pas du premier coup, n’hésitez pas à chercher de l’aide, à refaire les tutoriaux de base, voire à demander de l’aide en commentant ce billet. Il faut beaucoup d’entraînement pour arriver à dessiner rapidement des blasons (j’ai 4 à 5 ans d’expérience avec plus de 2300 dessins à ce jour), mais une fois qu’on maîtrise les opérations décrites ici, cela devient très facile de faire de jolis dessins…

Pour la prochaine fois (disons dans 15 jours), je ferais un tutoriel expliquant comment faire quelques partitions honorables. Mais si vous avez réussi le tutoriel, vous êtes probablement déjà en mesure de les faire vous-même (voici l’écu final au format SVG pour vous entraîner) !

– Cet article est sous licence Creative Commons by-nc-sa.