INKSCAPE - Créer une icône simple

NIVEAU APPRENTI

Cet exercice propose une introduction à diverses manipulations de base avec Inkscape, de la création au remplissage des formes, en passant par la manipulation des chemins. Au final, nous obtiendrons une icône de bonne qualité.

Inkscape 0.46
Ubuntu Intrepid Ibex

ÉTAPE 1

Appréhender les formes de base

Ouvrez un nouveau document. Rendez-vous dans Fichier > Propriétés de document, et entrez des dimensions de 128×128 pixels.

Allez au menu Affichage > Zoom > Page pour centrer la vue sur votre nouvelle zone de travail.

Maintenant que votre espace de travail est adapté à la création d’icône, munissez-vous de l’outil de création de rectangle (F4), et tracez votre première forme sans contours. (Nota: pour ne pas afficher les contours, rendez-vous dans Objet > Remplissage et contour, et supprimez le contour sous l’onglet du même nom).
Utilisez la barre d’options de l’outil pour entrer les valeurs suivantes: 60 pixels de largeur, pour 20 pixels de hauteur.

A présent, cliquez sur l’outil de création de polygones/étoiles, et cochez l’option Polygones. Réduisez le nombre de sommets à 3 et appliquez un arrondi à 0,300.
Maintenez la touche Ctrl enfoncée pour contraindre la forme à respecter des angles de 45°, et tracez votre triangle.

Reprenez l’outil de sélection et transformation (F1), et, dans un premier temps, ajustez les dimensions de votre triangle avec la hauteur de votre rectangle Puis sélectionnez vos deux formes, cliquez sur l’outil d’alignement et alignez-les sur leur axe horizontal.

Sélectionnez le rectangle seul, puis cliquez sur l’outil d’édition des noeuds (F2). Des points de manipulation apparaissent autour de votre forme. Saisissez le point rond, qui permet d’arrondir les angles d’une forme, et utilisez-le sur votre rectangle.

Sélectionnez vos deux formes, cliquez sur l’outil d’édition des noeuds (F2) et convertissez-les en chemins. Des points de contrôle apparaissent alors autour des objets, qui permettront leur manipulation.

ÉTAPE 2

Manipulation des noeuds et chemins

Une fois les objets transformés en chemins et toujours sélectionnés, ajustez-les.

Puis sélectionnez-les tous les deux et rendez-vous dans Chemins > Union pour les fusionner en une seule forme.

La forme compte maintenant trop de noeuds. Avec l’outil d’édition des noeuds (F2), supprimez le groupe de noeuds qui formaient auparavant la hauteur gauche de votre rectangle.

Créez un rectangle de 15 pixels de large, et disposez-le comme ci-dessous.

Transformez-le en chemins comme nous l’avons vu précédemment, puis avec l’outil de sélection de noeuds, ajoutez deux noeuds sur les hauteurs de votre nouveau rectangle. Pour cela, sélectionnez tour à tour chacun des segments et cliquez sur Insérer un nouveau noeud dans le segment sélectionné.

Sélectionnez ces deux nouveaux noeuds puis cliquez sur Rendre les noeuds symétriques. Déplacez légèrement les noeuds vers la droite.

Sur chacun de ces noeuds, tirez sur les vecteurs de façon à faire adopter aux segments une courbe harmonieuse.

ÉTAPE 3

Exemples d’actions sur les chemins

Sélectionnez les deux objets, copiez-les, puis appliquez-leur un Chemin > Intersection.

Collez en place vos éléments (Edition > Coller sur place), et appliquez à ces objets un Chemin > Différence. Vous obtenez deux éléments distincts.

Sélectionnez l’objet coupé en deux, et appliquez-lui un Chemin > Séparer, puis remplissez chacun de vos trois objets comme vous l’entendez.

ÉTAPE 4

De l’intérêt des calques

Sélectionnez vos trois objets, et appliquez-leur une rotation. Pour cela, cliquez une seconde fois sur votre sélection pour faire apparaître les flèches giratoires. N’oubliez pas qu’en maintenant la touche Ctrl, vous contraignez votre rotation à des angles de 45°.

Remplissez-les des couleurs souhaitées.

Copiez vos objets, faites apparaître la fenêtre des calques (Calque > Calques), cliquez sur le “+” pour en ajouter un nouveau que vous nommez Ombres, et collez en place.

Fusionnez vos objets (Chemins > Union), dupliquez ce nouvel objet (Edition > Dupliquer), et décalez cette nouvelle forme vers la gauche, puis le haut. Pour mieux visualiser la superposition des formes, vous pouvez changer la couleur de l’une d’entre elles.

Sélectionnez ensuite ces deux formes, et appliquez-leur une différence. Puis passez le calque en mode Produit.

Sur un nouveau calque à 40-50% d’opacité que vous nommerez Lumières, créez un nouveau rectangle arrondi blanc, auquel vous faites opérer une rotation.

Sur le même principe, ajoutez d’autres reflets.

Revenez sur votre calque principal, celui qui contient votre crayon sans ombres et reflets, sélectionnez le tout avec Ctrl+A (dont l’action se limite au calque courant), dupliquez le tout, puis unissez le tout (Chemins > Union) et remplissez de noir.

En cliquant une seconde fois sur votre forme, affichez les flèches de transformation. Outre la rotation, ces flèches proposent aussi de manipuler la perspective. Utilisez ces flèches pour donner à votre objet la perspective d’une ombre projetée.

Remplissez cette forme avec un dégradé du noir au transparent. Pour cela, dans les options de remplissage de l’objet (Objet > Remplissage et contour), choisissez l’option de remplissage en dégradé.

Pour éventuellement en modifier les couleurs, utilisez cet autre exercice comme support.

Depuis la version 0.46, vous pouvez également modifier les couleurs du dégradé directement depuis votre document, en sélectionnant l’outil de création et édition des dégradés. Cet outil permet aussi de manipuler le vecteur de dégradé: changez la position des noeuds, ajoutez ou supprimez-en pour donner à votre dégradé l’intensité que vous souhaitez.

Passez votre ombre à l’arrière-plan (Objet > Mettre tout en bas), et au besoin réduisez-en l’opacité.

ÉTAPE 5

La création de l’icône

Sélectionnez tous vos objets (avec un rectangle de sélection pour ne pas limiter la sélection à un calque), et en maintenant Ctrl, agrandissez vos objets jusqu’à les adapter à la taille de votre document de 128×128 pixels.

Rendez-vous dans Affichage > Aperçu d’icône. Une nouvelle fenêtre vous propose de prévisualiser votre crayon selon les tailles d’icônes standard. Lors de la création d’icône, il est important de se rappeler que la taille de l’affichage (a fortiori lorsqu’il s’agit d’un document vectoriel) ne reflète pas la qualité de l’export en bitmap: l’aperçu que propose Inkscape est donc un outil très efficace, car il permet de retoucher l’icône à un zoom important, tout en gardant un oeil sur le résultat de l’export.

Faites des ajustements si besoin est, en gardant à l’esprit que la plupart du temps, vos icônes seront utilisées dans un format inférieur à 128×128 pixels. Concentrez-vous donc sur la lisibilité des icônes plus petites, dès 48×48 pixels.

Une fois que vous êtes satisfait de votre icône, reste à l’exporter. Pour cela, rendez-vous dans Fichier > Exporter en bitmap. La fenêtre qui s’ouvre se décompose en nombreuses options :

1- Les onglets proposent divers préréglages pour l’exportation. Selon que vous choisissez d’exporter la page (1), le dessin (2) ou la sélection (3), le format bitmap s’adapte. Vous pouvez entrer vous-même des valeurs dans l’onglet Personnalisé (4). Vous pouvez également y sélectionner une unité (5).
Pour cet exercice, la préselction “Page” est la mieux adaptée puisqu’elle respecte le format 128×128 pixels de notre document.
L’unité en pixels est également ici celle qui convient le mieux.

2- La taille du bitmap met en rapport les dimensions (6) et la résolution en dpi (7). Par défaut, elle est à 90 dpi, qui est la résolution standard dans Inkscape.

3- Le chemin d’exportation (8) permet classiquement de choisir l’endroit où vous souhaitez enregistrer votre fichier bitmap. Par sécurité, pensez à ajouter l’extension .png derrière le nom de votre fichier.

La création de cette icône “prête à l’emploi” vous a donné l’occasion de survoler les actions de base d’Inkscape. Pour la suite, à vous d’approfondir!