Dessiner un blason avec Inkscape (1)

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.

14 thoughts on “Dessiner un blason avec Inkscape (1)

  1. Merci beaucoup Amaury pour cet article très intéressant et très clair. Je n’ai pas encore suivi tous les tutoriaux mais je commence à comprendre pas mal de choses grâce à ton article. J’attend la suite avec intérêt…

  2. Bravo pour ce tutoriel, cela fait un petit moment que je souhaite passer au vectoriel. Grâce à toi, j’ai réussi mon premier écu 😉
    J’attends les suivants avec impatience.

    Sébastien

  3. Il y a longtemps que je souhaitais donner aux enfants l’envie de dessiner des blasons (j’ai fait une expérience intéressante avec des élèves de CM1/CM2 dans le Loiret avec un concours de blasons primé et soutenu par le Conseil général). Alors je me suis fait un site BLASONAR EN ÒC (blasonner en occitan). C’est pas génial, il y a sans doute des approximations, mais ça vaut peut-être la visite…

  4. Bonjour "Rinaldum",

    Je n’ai pas vraiment le temps de participer à Wikipedia, et comme je le dit au détour d’un commentaire à l’un de ces articles, si j’ai écrit ce tutoriel, c’est aussi parce que je n’aime pas le style des blasons faits sur Wikipedia (que je trouve uniformes, fades, parfois grossiers, souvent froids et trop géométriques, avec des effets dégradés discutables, clairement impersonnels. Peut-être que j’ai simplement mauvais goût.) Exposer et expliquer ici ma façon de faire permet d’offrir une alternative aux (apprentis) dessinateurs qui ne veulent pas faire du Wikipedia-like.

    Ceci dit, mes techniques d’utilisation d’Inkscape peuvent tout à fait être reprises sur Wikipedia, je vous demanderais juste de respecter la licence CC BY-NC-SA, ou, comme elle n’est pas compatible avec celle de Wikipedia, le plus simple est de faire un lien depuis la page de votre choix vers cette série d’article.

  5. bonjour,
    j’ai suivi pas à pas votre initiation, et je bloque sur la création d’une partition tranché crénelé.faut il partir d’un blason vierge créé au niveau 1, ou d’un blason tranché crée comme décrit au niveau 2 ?
    merci de votre aide

  6. Bonjour Gérard,

    Je partirais comme exposé à l’étape 4, en faisant un crénelé sur un grand rectangle, dont la largeur est plus grande que la diagonale de votre écu (premier dessin ci-dessous). Puis, sur mon écu, je sélectionne le champ et je le duplique (Ctrl+D), je colore ce nouveau champ pour bien le différencier (en bleu), et je tourne et positionne mon rectangle crénelé dessus, de façon à ce que le crénelage corresponde à la diagonale (dessin 2). Enfin, je sélectionne mon rectangle crénelé et mon champ bleu, et je fais menu Chemin->Différence. Hop, mon champ bleu est découpé suivant mon rectangle crénelé. Je n’ai plus qu’à lui appliquer un contour pour marquer la différence.

    Si vous avez trouvé une autre méthode, n’hésitez pas à en faire part ici !

  7. merci, ma méthode était plus complexe, alors n’en parlons pas !
    j’ai un autre probleme, faire dans un coupé un objet l’un dans l’autre !
    j’y arrive en prenant un cercle ou un rectangle du menu d’inkspace, mais pas avec un objet importé !
    je vous sollicite donc à nouveau, et merci par avance
    Gerard

  8. Bonjour,

    C’est très facile. Prenons un exemple : coupé de gueules et d’or à une roue de l’un en l’autre. Je commence par bien disposer la roue sur le coupé. Je la fais d’or, et je la duplique (CTRL+D). Je laisse la copie exactement au même endroit, et je la fais de gueules (deuxième image). J’ai maintenant deux roues superposés, une de gueules qui ne devra être visible que sur la partition or, et une d’or qui ne devra être visible que sur la partition de gueules.

    Je duplique la partition d’or, elle est au-dessus de la roue de gueules, elle me servira de masque. Je n’ai plus qu’à découper la roue suivant ce masque : je sélectionne la roue de gueules et le masque et je fais Objet->Découpe->Définir. Et voilà, j’ai ma roue de gueules sur la partition or. Je fais passer la roue d’or au premier plan, et je fais de même avec elle et la partition de gueules. C’est terminé !

  9. Je viens de lire votre méthode de dessin. Je n’ai pas la prétention de l’apprendre. … En tout cas le rendu est vraiment différent de ce que l’on voit habituellement. (par exemple:http://www.heraldique-europeenne.or… qui est très moderne)
    Je vois que vous travaillez sur des photos. Il se trouve que j’ai trouvé sur internet une suite de photos de blasons qui pourrait vous inspirer. Sur le site du ministère de la culture "http://www.enluminures.culture.fr/d…", recherchez la cote : "Angers – BM – ms. 0855" et ‘Angers – BM – ms. 0856".
    Cette source ne semble pas être très utilisée.
    Une analyse par Paul de Farcy (http://books.google.fr/books?id=u6f…) que je n’ai pas réussi à lire.
    Cordialement

  10. Très bon article ! Merci à vous ! Inkscape livre des outils de dessin élaborés.

    InkScape est pour moi la meilleure alternative à Illustrator. Il n’y a rien que je faisais avec Illustrator que je ne peux pas faire avec InkScape, c’est un très bon logiciel, gratuit en plus, que demander de plus ?!

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *