Sketch 3 : l'outil Scissors

L'application de dessin vectoriel Sketch brille par sa simplicité. Peter Nowell présente l'outil "ciseaux", moins connu que d'autres, et fait un point très intéressant sur les formes et les lignes.

Par

Vous avez sans doute déjà remarqué l’outil “ciseaux” (scissors) dans la barre d’outils de Sketch (Layer/Paths/Scissors) et vous vous êtes peut-être posé la question de savoir ce que ça pouvait bien être. Vous avez peut-être même expérimenté les ciseaux, et cela n’a fait qu’ajouter à votre confusion.

La première fois que j’ai essayé l’outil Scissors, j’ai remarqué qu’il pouvait supprimer la bordure d’un côté d’une forme. Je me suis dit “donc c’est un outil qui me sera utile lorsque je voudrai n’avoir que trois bordures sur un rectangle” — cool, en fait c’est un besoin qui n’est pas si inhabituel. J’ai aussi observé que les ciseaux pouvaient transformer un segment courbe en ligne droite. Mais à chaque fois que j’essayais d’utiliser Scissors sur plus d’un segment de la forme, les résultats étaient imprévisibles. En fait, pas tant que ça…

Il se trouve qu’il y avait un trou dans la façon dont je comprenais le fonctionnement des formes vectorielles. Voici ce que personne ne m’avait jamais dit :

3 formes vectorielles, et les points ayant servi à les construire

Quant on pense à une forme, on imagine un cercle, un rectangle ou une forme complexe qui peut être remplie de couleur. Mais les ordinateurs, eux, voient les choses différemment. Ils les voient comme des chemins (paths). Les chemins ont un début et une fin, ainsi qu’une direction que suit le “crayon” de l’ordinateur.

Prenons un rectangle par exemple. Le chemin peut commencer au coin supérieur gauche, descendre en bas à gauche, puis continuer en bas à droite, remonter en haut à droite et terminer à son point de départ. Ce qu’il est important de noter, c’est que le chemin se termine au point où il a commencé. C’est un chemin “fermé”, et c’est exactement ce que nous appelons une “forme”.

un rectangle non fermé, le point d’arrivée n’est pas le point de départ

Mais que se passe-t-il si le chemin se termine ailleurs ? Dans ce cas, nous avons un chemin “ouvert”, ce qu’en termes simples nous appelons une ligne.

une ligne avec des points
Pour les ordinateurs, les formes et les lignes sont la même chose — ils sont simplement des chemins. Certains ouverts, d’autres fermés.
une autre ligne avec des points

Dans Sketch, que vous insériez une forme, une ligne ou un vecteur, tous sont des chemins. Vous avez dû deviner maintenant ce que fait l’outil Scissors — il découpe une ouverture dans un chemin, entre deux points vectoriels. Si vous avez un chemin fermé (une forme), cela l’ouvrira (et en fera une ligne).

image

L’utilisation de Scissors est simple :

  1. Sélectionnez l’outil dans la barre de menu (Layer/Paths/Scissors) ou dans le menu déroulant de “Tools” dans la barre d’outils. ( Les ciseaux n’apparaissent pas par défaut dans la barre d’outils, vous pouvez les ajouter via View/Customize Toolbar)

  2. Survolez un segment de votre chemin. Cliquez pour le supprimer.

Si, plutôt que d’ouvrir un chemin, vous souhaitez le fermer, entrez dans le mode “Edit” (en double-cliquant le chemin ou en sélectionnant “Edit” dans la barre d’outils) et cliquez sur le bouton “Close Path” en haut à droite de l’inspecteur. Vous pouvez utiliser le même bouton pour ré-ouvrir le chemin, mais l’outil Scissors vous donne plus de flexibilité.

image

Conceptuellement, l’ouverture d’un chemin est simple, toutefois les résultats ne seront peut-être pas toujours ceux que vous attendez. Voici un certain nombre de choses à prendre en considération :

La conséquence de l’ouverture des chemins

Les remplissages (fills) ou backgrounds

Votre chemin a peut-être un remplissage, réalisé avec un dégradé ou une couleur solide. Si tel est le cas, les chemins ouverts seront affichés comme si les points de départ et d’arrivée étaient connectés par une ligne droite. Le remplissage sera appliqué comme s’il s’agissait d’une forme fermée (A). Si des segments de chemin chevauchent la ligne droite reliant le début et la fin, vous obtiendrez un effet bizarre (B).

image

Bordures ou traits (strokes)

Les bordures ne seront appliquées que du début à la fin du chemin. Contrairement aux remplissages, les bordures ne connectent pas le point final et le point initial. C’est logique puisque les chemins ouverts sans remplissage sont ce que nous appelons des “lignes”.

image

La fin d’un chemin ouvert peut avoir des angles droits ou arrondis. Sketch les définit comme des fins, alors que SVG les appelle des “chapeaux” ou des “capuchons” ou des “limites” (line caps). C’est le sujet d’un autre article, mais je le mentionne car les lignes ou les formes ouvertes en comporteront toujours. Vous pouvez y accéder via l’icône en roue dentée de Borders dans l’inspecteur.

Rappelez-vous qu’un chemin n’a qu’un seul point initial et un seul point final — il ne peut pas être ouvert en plus d’un endroit. Donc si votre chemin est déjà ouvert et que vous supprimez un segment, à côté de la partie ouverte, cette partie devient simplement plus grande. Mais si vous supprimez un segment ailleurs dans le chemin (par exemple quelque part au milieu), le chemin se divise en deux. Ces deux morceaux sont appelés des sous-chemins et ils continueront d’être groupés ensemble dans Sketch. Pour en savoir plus sur les sous-chemins, vous pouvez consulter cet article.

image

Quand utiliser Scissors ?

Vous vous rappelez la première expérience avec Scissors, où je disais qu’il pouvait supprimer la bordure d’un côté d’une forme ? Eh bien ce n’est pas une bonne utilisation des ciseaux. Lorsque vous utilisez un remplissage, le chemin devrait toujours être fermé. Si vous voulez contrôler la bordure séparément, je suggère de dupliquer la forme et d’utiliser un calque pour la bordure et l’autre pour le remplissage. Si vous voulez cacher une partie de la bordure ou de la forme, un masque sera la meilleure solution.

Alors, quand doit-on utiliser Scissors ? Il n’y a qu’un seule bonne réponse. C’est lorsque vous voulez transformer un chemin fermé en chemin ouvert — transformer une forme en ligne. On peut également l’utiliser dans cette petite astuce que je décris dans cette vidéo, pour modifier le point de départ d’un chemin vectoriel…

Je travaille actuellement à un cours complet sur Sketch et d’autres articles suivront. Si vous le souhaitez, je peux vous tenir au courant au fur et à mesure de leur publication.


Intéressé par Sketch ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur Sketch parus dans La Cascade.


original paru le dans Medium.

Sur l’auteur : est designer, basé à San Francisco, il conçoit des applications, des sites web, des livres, et bien d’autres choses. Il aime aussi voyager et apprendre les langues étrangères. Vous pouvez suivre son travail sur Peter Nowell Design et sur Twitter.

Traduit avec l’aimable autorisation de Medium et de l’auteur.
Copyright Peter Nowell © 2015.