Un espace de travail vectoriel : Inkscape

jeudi 4 octobre 2012, par ID

Un jour, alors que je devais mettre en place des présentations Powerpoint pour un client et qu’il me fallait les pictogrammes à utiliser, j’ai reçu un fichier png avec toute la collection pour ainsi dire sur la même feuille. Sur le coup, j’ai trouvé l’idée idiote. En fait, non. Les icônes avaient été faites avec le logiciel de dessin vectoriel Illustrator. En me mettant, enfin, à jouer avec l’équivalent open-source Inkscape, je me suis rendue compte qu’il était très nettement préférable, en effet, de tout mettre sur un même document. Mais on peut perfectionner l’idée... parce que détourer des éléments dans un fichier png n’est pas la meilleure solution.

 Astuce 1 : enregistrer chaque picto en bitmap

Pour simplifier, une image bitmap est une image numérique [1]. Quand Inkscape vous propose d’exporter en bitmap, il va générer un fichier png utilisable tel quel à peu près n’importe où.

L’astuce consiste à enregistrer (donc exporter en bitmap pour Inkscape) les éléments en fichiers séparés

  1. on groupe si on veut les éléments constitutifs du pictogramme, mais ce n’est pas nécessaire, on sélectionne,
  2. on va sur fichier Exporter en bitmap :
    Menu Ficher d’Inkscape
    On peut aussi utiliser le raccourci clavier Maj+Ctrl+E pour exporter l’image.
  3. dans la boite de dialogue, on va chercher l’endroit, on donne un nom [2], et on choisit la résolution [3], 72 ppp pour un site internet. La taille de l’image sera modifiée en fonction de la résolution sans perte de qualité pour les éléments vectoriels [4].
Inkscape : réglage exporter image
Indiquer la résolution en fonction de la destination du fichier. Pour changer la taille de l’image, il faut le faire en passant par les barres d’outils du logiciel.

Le temps que cette opération prend sera très, très nettement compensé par la suite. En fait, ça prend moins de temps qu’un détourage bien propre, un copier-coller dans un nouveau fichier et un enregistrement de l’image.

 Astuce 2 ; : ajouter aussi les couleurs sur la feuille de travail

Si l’objectif est de travailler sur un site internet, de réfléchir à une charte graphique..., bref de suivre une palette de couleurs bien définies, autant ajouter sur la feuille de travail celles que l’on utilise avec, en ce qui me concerne pour un site internet, les références RVB et le nom hexadécimal, mais on peut aussi noter les références CMJN [5] si on veut.

Rouge, turquoise et bleu : références de couleurs
Les deux « f » finaux des références hexadécimales indiquant l’intensité de la couleur (100% ici).

Quand je dois faire, comme ici, un document avec des captures d’écran et des éléments qui vont mettre en valeur un endroit de l’image, j’utilise Gimp pour les captures et je mets tous les éléments illustratifs du billet ou du tutoriel (support, guide, etc.) sur la même feuille. Il restent ainsi tous « à portée de main » et modifiables à volonté.


[1C’est aussi un format d’images Windows : .bmp, mais on va oublier dans le contexte de ce billet.

[2Descriptif de préférence et sans accents ni espace si on veut utiliser lesdites images pour internet

[3C’est-à-dire le nombre de pixels par pouce, la finesse et le poids de l’image changent en fonction de la résolution.

[4Par contre les fichiers liés ou incorporés peuvent poser problème.

[5Cyan, Magenta, Jaune, Noir pour une impression en quadrichromie.