Comment dessiner des formes et exporter des graphiques vectoriels (SVG)

Dessiner des formes et exporter en SVG en sept étapes

1. 1

   Créer un nouveau document

   Rendez-vous sur lilcactus.app et choisissez Fichier› puis Nouveau… Tapez 800 dans le champ Largeur et 800 dans le champ Hauteur, cliquez sur la nuance en damier sous Arrière-plan pour un arrière-plan transparent, puis cliquez sur Créer.

   

2. 2

   Dessiner un cercle

   Appuyez sur U pour choisir l’outil Forme. Dans la barre d’options (la bande sous les menus), choisissez Ellipse dans la liste Forme ; la liste Mode doit indiquer Forme. Maintenez Maj ou ⇧ et faites glisser sur la plus grande partie de la zone de travail : un cercle noir apparaît sur un nouveau calque nommé Forme. Les nouvelles formes sont remplies avec la couleur de premier plan.

   

3. 3

   Régler sa taille, sa position et sa couleur exactes

   Quand le cercle est sélectionné, le panneau Propriétés affiche ses réglages dynamiques. Tapez 100 dans les champs X (px) et Y (px), et 600 dans les champs Largeur (px) et Hauteur (px), en appuyant sur Tab après chaque valeur : le cercle est maintenant centré avec une marge de 100 px.

   Plus bas, dans la section Fond, cliquez sur la nuance de couleur, tapez 2E7D5B dans le champ hexadécimal et cliquez sur OK. Le cercle devient vert.

   

   

4. 4

   Dessiner une étoile blanche aux pointes arrondies

   Appuyez sur D puis sur X pour que le blanc devienne la couleur de premier plan. Choisissez Étoile dans la liste Forme de la barre d’options, puis réglez Points sur 5, Rayon intérieur sur 50 et Rayon de l’angle sur 24. Maintenez Maj ou ⇧ et faites glisser depuis environ le quart du cercle jusqu’aux trois quarts : une étoile blanche aux pointes adoucies apparaît sur son propre calque. Pour la placer exactement, tapez 250 dans les champs X (px) et Y (px) et 300 dans les champs Largeur (px) et Hauteur (px) du panneau Propriétés.

   

   

5. 5

   Modifier l’étoile plus tard

   Les formes restent dynamiques. Le calque de l’étoile sélectionné, tapez 6 dans le champ Points du panneau Propriétés et appuyez sur Tab : l’étoile se redessine avec six branches, à la même taille et avec les mêmes angles arrondis. Les champs Largeur (px) et Rayon (px) (le rayon des angles) fonctionnent de la même façon.

   

6. 6

   Ajouter un anneau blanc

   Cliquez sur le calque du cercle (Forme) dans le panneau Calques. Dans le panneau Propriétés, section Contour, réglez Peindre sur Couleur, cliquez sur la nuance et choisissez le blanc (FFFFFF). Dans la section Géométrie du contour, tapez 16 dans le champ Largeur (px) et réglez Position sur Intérieur, pour que l’anneau reste à l’intérieur du cercle de 600 px.

   

   

7. 7

   Exporter en SVG et enregistrer le projet

   Masquez d’abord le calque vide Arrière-plan avec son icône en forme d’œil dans le panneau Calques : sinon, le SVG reçoit pour lui une minuscule image transparente, que les autres applications importent comme un objet en trop. Choisissez ensuite Fichier› puis Exporter› puis SVG… et cliquez sur Exporter. Le SVG garde chaque forme sous forme de tracé vectoriel : elle reste nette à toutes les tailles sur un site web ou dans une autre application de graphisme, et l’arrière-plan reste transparent.

   Pour garder les formes modifiables dans Lil Cactus, choisissez aussi Fichier› puis Enregistrer sous› puis Projet Lil Cactus… (Ctrl+Maj+S ou ⇧⌘S) ; ensuite, Fichier› puis Enregistrer met ce fichier à jour. Fichier› puis Enregistrer sous› puis Photoshop (.psd)… les conserve en calques de forme vectoriels, mais à la réouverture du PSD, ce sont des tracés modifiables, sans leurs réglages dynamiques d’angles et de branches.

   

Formes et options

• Rectangle : le champ Rayon de l’angle de la barre d’options arrondit ses angles, pour les boutons et les cartes.
• Ligne : faites glisser d’une extrémité à l’autre, puis réglez la couleur et la largeur du contour et les Extrémités (plates, arrondies ou carrées) dans le panneau Propriétés. Une nouvelle ligne est tracée avec la couleur de premier plan ; si elle n’apparaît pas, c’est que cette couleur est celle du document : choisissez une autre couleur de contour dans ce panneau.
• Polygone et Étoile : le champ Côtés ou Points, et pour une étoile, le Rayon intérieur, qui règle la profondeur des branches.

La liste Mode de la barre d’options détermine ce que crée un glissement : un calque de forme (Forme), un tracé que vous pouvez convertir en sélection ou en contour (Tracé), ou de la peinture sur le calque actif (Pixels), qui n’est plus modifiable comme une forme.

Combiner et remodeler des formes

Pour découper une forme dans une autre, sélectionnez le calque de forme et réglez la liste Opération de la barre d’options sur Soustraire avant de dessiner : la nouvelle forme devient un trou dans la forme sélectionnée, sur le même calque. Combiner l’ajoute, Intersection ne garde que la zone commune et Exclure garde tout sauf la zone commune. Remettez Opération sur Nouveau calque pour des formes séparées.

Pour déplacer des points un par un, cliquez avec le bouton droit sur le bouton de la plume dans la barre d’outils, choisissez Sélection directe et faites glisser un point de la forme sélectionnée. Une forme combinée ou remodelée devient un tracé libre : sa liste Forme dans le panneau Propriétés indique Tracé modifiable, et elle n’a plus de réglages dynamiques d’angles ou de branches. Voir comment utiliser l’outil Plume.

Ce que conserve un export SVG

• Les calques de forme, avec leurs fonds en couleur ou en dégradé linéaire, radial ou réfléchi, leurs contours et leurs pointillés, deviennent des tracés vectoriels. Une forme avec un dégradé Angle ou Losange devient une image.
• Le texte devient des contours de lettres vectoriels quand la police le permet.
• Les photos, les styles de calque comme les ombres portées, et les masques deviennent une image pour ce calque seulement.
• Un calque visible dont le mode de fusion n’est pas Normal, un masque d’écrêtage ou un calque de réglage transforme tout le SVG en une seule image, sans vecteurs. De même pour un document Lab ou en niveaux de gris, ou un document avec un profil colorimétrique autre que celui par défaut qui contient du texte, de la transparence ou des dégradés. La boîte de dialogue d’export vous le signale avant l’export.

Pour un fichier purement vectoriel, limitez-vous à des calques de forme et à du texte simple en mode Normal, et masquez les calques vides.

Résoudre les problèmes courants

La forme est noire

La couleur de premier plan était le noir. Changez le fond dans le panneau Propriétés, ou réglez la couleur de premier plan avant de dessiner.

Ma nouvelle forme a percé un trou dans l’ancienne

La liste Opération de la barre d’options est réglée sur Soustraire. Annulez avec Édition› puis Annuler (Ctrl+Z ou ⌘Z), choisissez Nouveau calque et dessinez à nouveau.

Le cercle est ovale

Tapez la même valeur dans les champs Largeur (px) et Hauteur (px) du panneau Propriétés.

Si vous venez d’un autre logiciel

Photoshop

Les outils de forme (U) et les réglages de forme dynamique du panneau Propriétés.

Formes et graphiques vectoriels : questions et réponses