Présence autochtone III (Inkscape)

Ça sent le printemps ! Et avec le beau temps qui revient, ça me donne envie de travailler sur notre jardin historique. J’ai donc parti des semis.

Mais tant qu’il ne fera pas assez chaud, il n’y a pas grand chose d’autre à faire, sinon peut-être avancer ma carte «Présence autochtone». J’ai ajouté quelques marqueurs trouvés dans un guide du promeneur pour le Vieux-Québec. Mais éventuellement, je souhaiterais remplacer le marqueur par défaut dans Leaflet par un marqueur personnalisé.

Dans ce tutoriel, nous allons donc expérimenter avec Inkscape, un gratuiciel de dessin vectoriel. L’installation est standard. La première chose à connaître, ce sont les «propriétés du document» sous Fichier.

C’est ici qu’on peut notamment déterminer la taille de notre canevas.

La deuxième chose à connaître, ce sont les calques. Par défaut, il n’y en a qu’un seul dans Inkscape quand on l’ouvre. Pour voir les calques, choisir Calque/Calques.

Tout ce que l’on va dessiner sera associé à ce calque. Mais on pourrait en créer un nouveau et associer d’autres formes à celui-ci. Pour ajouter un calque, cliquer sur le signe +.

Nous avons maintenant deux calques. Nous allons dessiner un carré dans le calque 1 et un triangle dans le calque 2. Pour dessiner un carré, sélectionner l’outil approprié à gauche.

Il suffit de maintenir le clic gauche de la souris pour voir apparaître un carré. Pour créer un carré parfait, utiliser l’outil de sélection.

Puis, dans le nouveau ruban qui apparaît en haut de la fenêtre, donner une même valeur à la largeur et à la hauteur, soit ici 150mm.

Pour donner une couleur à notre carré, on peut simplement cliquer sur le spectre en bas de la fenêtre. Il y a d’autres façons, comme on verra plus loin.

Nous avons maintenant un carré orange dans le calque 1. Sélectionner le calque 2 dans la fenêtre des calques, puis l’outil polygone/étoile.

Dans le nouveau ruban qui apparaît en haut de la fenêtre, on choisit polygone et on règle les sommets à 3.

Si on clique sur notre canevas, on voit apparaître un triangle auquel on donne une couleur bleu. On remarque qu’il n’y a qu’une seule poignée à notre triangle, qui nous permet de lui faire faire une rotation et de modifier sa taille.

On peut faire des choses vraiment tripantes avec l’outil polygole/étoile en modifiant les paramètres du ruban supérieur. Exemple, ces réglages…

… donneront ce résultat:

Quant au paramètre «Hasard», il ouvre un monde de possibilités assez folles! Exemple:

Mais revenons à notre simple triangle bleu. Avec l’outil de sélection, déplaçons-le sur notre carré orange. Maintenant, dans la fenêtre des calques, on peut déterminer si le triangle est au-dessus ou en dessous du carré simplement en changeant l’ordre des calques avec les flèches vertes.

Le mode de fondu va aussi changer la relation entre les calques.

Normal:

Produit:

Éclaircir:

On peut aussi jouer avec l’opacité du calque.

Pour obtenir ceci:

Explorons maintenant un autre outil, soit l’éditeur de dégradé.

En maintenant le clic gauche de la souris enfoncé, on dessine un trait à travers notre carré orange.

Nous obtenons déjà un dégradé. On peut ajuster ce dégradé dans la fenêtre Fonds et contour (Maj+Ctrl+F).

Si on clique sur notre triangle bleu, le même dégradé lui sera appliqué.

On peut créer des dégradés plus complexes en ajoutant des noeuds à notre ligne de dégradé, et ce, en double-cliquant dessus.

On peut maintenant ajouter des couleurs à notre dégradé, en sélectionnant un de nos nouveaux noeuds, puis en choisissant une couleur.

On peut éditer chaque couleur que l’on ajoute à notre dégradé dans la fenêtre Fond et contour. On peut ainsi changer la couleur en modifiant les valeurs des rouge, vert et bleu (RVB), la teinte, la saturation et la luminosité (TSL), de même que le flou et l’opacité.

Quand l’outil dégradé est sélectionné, un ruban apparaît en haut qui offre d’autres possibilités, comme un dégradé radial.

Ce qui donnerait sur notre triangle ceci:

On peut également ajouter (toujours en double-cliquant) des noeuds pour complexifier notre dégradé.

Nous allons maintenant voir comment dessiner des lignes à main levée (F6), avec l’outil approprié.

Une fois l’outil sélectionné, un ruban apparaît en haut qui me permet de modifier mon tracé, en réglant le lissage et le format.

Ce qui me permet de dessiner de belles courbes.

Je peux modifier l’épaisseur du trait dans la fenêtre Fonds et contour (Maj+Ctrl+F).

Je peux améliorer mon tracé en ajoutant des noeuds, avec l’outil approprié.

Une fois l’outil sélectionné, mon curseur se transforme en un fin pointeur et un nouveau ruban apparaît en haut. Le pointeur me permet de sélectionner le segment entre deux noeuds et la fonction «Insérer de nouveaux noeuds» me permet d’ajouter un nouveau noeud au milieu.

Ce qui va me permettre de travailler avec précision mon dessin, en tirant sur chaque noeud.

Pour plus de précision, on peut ajouter une grille dans les Propriétés du document (Maj+Ctrl+D).

On aura soin de s’assurer que le bouton «Aimenter aux grilles» (à droite de la fenêtre principale) est enfoncé.

Dès lors, nos noeuds vont s’aimenter à la grille.

On peut aussi ajouter une grille axonométrique, qui permet de faire du «faux 3D» (dixit Joshua).

En ajoutant quelques lignes sur la grille, on arrive à créer une impression de dimension.

On peut ensuite ajouter rapidement de la couleur aux aires délimitées par nos lignes avec l’outil approprié.

Ce qui nous donnera ceci:

J’aurais pu arriver à un résultat semblable plus rapidement avec l’outil de boîte 3D.

Ajoutons de la couleur à un des côtés de notre boîte.

Le menu Filtres offre aussi des options intéressantes. Supposons que l’on voudrait donner une impression de mouvement à un objet, on choisirait Flou dans Filtres.

On édite ensuite le flou horizontal.

Pour obtenir l’effet désiré.

Il y a beaucoup de choses dans le menu Filtres et je vous encourage à les explorer. L’éditeur de filtres permet de paramétrer les différents filtres que vous ajoutez à un objet et régler la variance de chacun.

Revenons à la fenêtre Fonds et contour (Maj+Ctrl+F). Supposons que l’on a une ligne à laquelle on a ajouté des noeuds, selon la méthode décrite plus haut. On pourrait éditer cette ligne dans Style du contour. Par exemple, on pourrait définir la ligne comme étant pointillée, avec un marqueur central particulier.

Ce qui nous donnerait ceci.

On pourrait aussi créer son propre marqueur. Disons que j’ai dessiné cela:

En sélectionnant l’objet, puis dans Objet, Objet comme marqueur,

je fais disparaître mon objet, mais je le rend aussi disponible dans le menu marqueur du Style de contour de ma ligne précédente.

Abordons un autre sujet. On peut créer des objets texte avec l’outil approprié.

Le ruban qui apparaît en haut permet de régler la police, la taille mais aussi la position x, y, z de chaque lettre

pour obtenir des effets vraiment intéressants.

Vous pouvez aussi transformer votre objet texte en chemin.

Ensuite, dans l’éditeur d’effets de chemin (Maj+Ctrl+7), on ajoute un effet (en cliquant sur le signe +) et on choisit Courber.

On sélectionne le chemin de courbure par noeuds.

On ajoute des noeuds à la ligne qui apparaît maintenant au centre de notre mot (selon la méthode vue ci-haut). En jouant avec les noeuds, on peut déformer notre texte.

On pourrait aussi déformer par enveloppe.

Ce qui offre des possibilités tout aussi intéressantes.

Il est également possible de vectoriser un objet matriciel, par exemple une photo de Bonaparte trouvée dans le Web.

La fenêtre qui s’ouvre alors offre différents modes et options avec lesquels il faut expérimenter dépendamment du résultat recherché.

Si on retourne à notre image et que l’on clique dessus pour la déplacer, on réalise que sur notre image d’origine, il y a maintenant un objet vectoriel.

On peut se débarasser de l’objet matriciel. Et nous allons travailler un peu l’objet vectoriel. Je dessine un cercle (peu importe sa couleur) sur mon image.

Ensuite, je sélectionne l’image et le cercle en maintenant Contrôle et Majuscule enfoncés, puis je choisis de définir la découpe:

J’obtiens ceci:

Si nous l’exportions vers le format SVG (pour Scalable Vector Graphics ou en français «graphique vectoriel adaptable»), on pourrait déjà s’en servir comme d’un marqueur dans QGIS. Nous verrons un peu plus loin comment exporter vers SVG. Pour l’instant, on pourrait s’amuser à créer un pavage de clones:

Les réglages suivants (avec une couleur sélectionnée dans l’avant-dernier onglet)…

… nous donneront ceci:

En passant, pas besoin de retourner dans les propriétés pour ajuster le canevas quand notre projet le déborde; il suffit de sélectionner tous les objets puis d’ajuster la taille de la page à la sélection.

Il y a beaucoup plus dans Inkscape et je vous invite à aller consulter la superbe série de 28 tutoriels par Aaron Nieze (en anglais, par contre). Mais maintenant que nous avons les bases d’Inkscape, essayons-nous à dessiner un marqueur personnalisé pour notre carte autochtone. Comme les raquettes entrent dans la composition des armoiries de la nation des Hurons-Wendat, et parce qu’une raquette a en soi un peu la forme d’un marqueur, j’ai choisi d’en faire une, simplement en vectorisant une image trouvée en ligne et en lui donnant une couleur tranchant avec mon fond de carte.

Ensuite je l’ai enregistrée en choisissant le format svg.

Si mon projet était dans QGIS, dans la symbologie, je pourrais définir les marqueurs de ma couche comme étant la raquette.

Ce qui me donnerait cela:

Si mon projet n’a pas été réalisé avec QGIS mais (comme c’est le cas ici) programmé avec Leaflet, je dois ajouter quelques lignes de code.

  var ClubStadacona = L.marker ([46.812114, -71.210944], {title: 'Club Stadacona', icon: RIcon});
//Au moment de créer mon marqueur, j'ajoute une référence à mon icône. Ainsi, chaque marqueur pourrait avoir une icône différente, si c'est ce que l'on souhaite...

Je définis ensuite dans la feuille de style CSS mon icône.

  var RIcon = new L.Icon({
    iconUrl: "raquetteBleue.svg",
    iconSize: [35, 51],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
  });

Bien sûr, le fichier svg doit se trouver dans le même dossier que mon projet, au même niveau que la page d’accueil, soit ici index.html. Le résultat donne cela:

Ça sera à améliorer sûrement, mais, pour l’heure, je pense que ça montre les possibilités qu’offre Inkscape, en général, et dans les SIG, en particulier. C’est ce qui conclut notre tutoriel, «édition quarantaine».