Sketch et les vecteurs

Sketch3 est un outil merveilleux, il brille tout particulièrement dans le domaine des formes vectorielles. Dans ce tutoriel bien fait, Peter Nowell établit les bases, puis nous apprend quelques astuces.

Par

Si vous avez ouvert cet article, j’en déduis que vous avez déjà une connaissance de base à la fois des vecteurs et de l’application de design Sketch créée par Bohemian Coding.

( NDT: si ce n’est pas le cas, vous pouvez vous référer à l’excellent tutoriel de Sébastien Gabriel).

Je vais vous montrer ici quelques secrets utilisés par les spécialistes de Sketch, dont la façon de personnaliser et de combiner des formes basiques à l’intérieur de vos propres illustrations, typos ou icônes; comment résoudre des problèmes techniques parfois incompréhensibles, même pour des designers professionnels; et comment mettre à profit des trucs et astuces dans votre workflow. Nous allons commencer avec quelques notions fondamentales et passerons progressivement aux créations plus complexes.

NDT: cet article est le premier d’une série sur l’utilisation des outils Sketch.

Comment créer une forme vectorielle

Sketch vous propose plusieurs façons de créer une forme vectorielle - en fait, à part les images importées, tout ce que vous créerez dans Sketch sera sous forme vectorielle !

image

Insérer une forme

La façon la plus simple de créer une forme est d’insérer l’une des formes géométriques préformatées, telles que le rectangle, le cercle (“ovale”) ou l’étoile. Certaines comportent des paramètres spéciaux, comme le nombre de pointes de l’étoile ou l’arrondi des coins du rectangle. Les raccourcis clavier “R” et “O” vous permettront d’accélérer votre process.

image

L’outil crayon

Si vous travaillez avec une tablette Wacom, cet outil (“Pencil”) pourra vous être très utile. Il suit votre curseur, puis affine la ligne pour en faire une forme vectorielle propre. Personnellement, en 2 ans d’expérience avec Sketch, je ne l’ai jamais utilisé.

image

Les objets texte

Vous pouvez transformer du texte en formes vectorielles grâce à la fonction “Sketch’s Convert Text to Outlines” (⌘⇧O). Les objets textes sont des sortes de formes vectorielles. Bien que le texte soit formé de lettres vectorielles, celles-ci ont été enveloppées dans un objet texte éditable. Il arrive souvent, après qu’on ait fini l’editing du texte, qu’on veuille modifier légèrement la forme des lettres - cette fonction vous permettra de convertir l’objet texte en forme vectorielle.

image

Lignes et bordures

Il est possible d’insérer une ligne droite avec l’outil Ligne (“Line”, raccourci clavier “L”), ou en utilisant les outils Pencil (raccourci clavier “P”) ou Vector (raccourci clavier “V”) pour des tracés plus complexes. Les lignes fonctionnent de la même manière, ce sont simplement des formes vectorielles qui utilisent une bordure au lieu d’une couleur de remplissage. C’est exactement comme d’avoir une bordure sur un rectangle ou un cercle, sauf que la forme n’est pas “fermée”, elle a un point de départ et un point d’arrivée distincts. Les bordures offrent beaucoup de flexibilité mais parfois vous aurez besoin de personnaliser leur forme ou de modifier leurs dimensions, sans que la bordure ne conserve la même épaisseur. La fonction “Vectorize Stroke” de Sketch transforme n’importe quelle ligne ou bordure en forme vectorielle.

image

L’outil vecteur

Si vous avez besoin de plus de flexibilité, l’outil Vector vous donne le contrôle total sur la création d’une forme.

image

Rappelez-vous que ces points ne se mettront en position full-pixel que si vous avez sélectionné cette option dans le menu déroulant de l’inspecteur (en bas dans l’image ci-contre). Si vous avez déjà créé une forme avec des point en position non arrondie, vous pouvez utiliser Layer > Round to Nearest Pixel Edge depuis la barre de menu pour repositionner chaque point sur la forme à la valeur la plus proche de full-pixel.


image

Éditer une forme

Un rectangle ou un cercle basiques sont souvent le meilleur point de départ pour créer des formes complexes. Sélectionnez une forme de votre choix et cliquez sur “Edit” dans la barre d’outils (ou faites “Enter”) pour éditer chacun de ses points vectoriels.


Associer des formes

Pour créer des icônes, des lettres et bien d’autres design, vous devrez associer plusieurs formes. Il existe deux façons habituelles de le faire, l’une est l’union (“Union”), l’autre est la soustraction (“Substraction”)

image

Lorsque vous sélectionnez plusieurs formes vectorielles, vous avez accès aux fonctions “Union” et “Substract” dans la barre d’outils de Sketch ou dans la barre de menu sous Layer > Combine. Vous pouvez encore utiliser deux autres opérations booléennes pour associer des formes - “Intersect” et “Difference” - mais même si elles s’avèrent utiles de temps à autres, les scénarios les plus courants font appel généralement à “Union” et “Substract”.

image
Les fonctions d’association de formes, d’après "Intro Document" de Sketch.

Ce qu’il y a de bien avec la façon dont Sketch gère l’association de formes est que chacune des formes originales reste disponible - elles sont devenues des “sous-chemins” d’une forme-mère. Pour voir les sous-chemins d’une forme complexe, vous pouvez cliquer sur la petite flèche à côté du nom de la forme complexe dans la liste des calques. Les sous-chemins facilitent l’édition, mais ils appellent à notre attention un point important :

L’ordre compte !

L’ordre dans lequel les sous-chemins seront organisés affectera la façon dont ils seront associés. Si vous n’avez que deux sous-chemins, ce n’est pas un problème, mais dès que vous commencez à en avoir plus, il convient de réfléchir quelques instants. Il n’y a pas de règle générale applicable à tous les cas de figure, mais voici au moins deux choses à garder à l’esprit :

  1. Partez du grand pour aller vers le petit. Commencez avec les grandes formes, puis ajoutez des formes plus petites. C’est important en particulier pour les petites formes qui sont soustraites d’une plus grande forme.
  2. Posez-vous la question : “comment est-ce que je construirais ça dans la vraie vie ?” Imaginez une table blanche qui serait votre canevas, des morceaux de papier de couleur qui seraient vos formes (dans un mode “Union” ou addition) et des morceaux de papier blanc pour les formes soustraites. Dans quel ordre disposeriez-vous les calques si vous deviez les empilez comme des formes en papier ?
image

Prenez un exemple d’icône sur votre ordi ou sur votre smartphone et essayez de la recréer avec Sketch. Il y a des chances qu’elle soit constituée de formes simples associées !

Ce que j’aurais aimé qu’on me dise

Parfois lorsque vous associez des formes vous aboutissez à un résultat bizarre impossible à réparer en ré-organisant les sous-chemins. Une des situations les plus courantes est lorsqu’on associe des formes avec “Union” et qu’on aboutit à quelque chose qui ressemble plutôt à une opération “Difference” (les deux formes sont visibles mais les parties qui se chevauchent sont soustraites).

image
Quelques exemples tirés de mes projets récents.

En fait, il faut bien comprendre que les formes vectorielles - même celles qui sont fermées - ont un début et une fin, et une direction. Tout se passe comme si votre forme était un pochoir et que votre ordinateur ait besoin de savoir où commencer et quelle direction suivre.

image

Lorsque vous associez des formes qui se chevauchent et qui suivent des directions différentes, votre ordi/Sketch peuvent péter les plombs ! Il y a plusieurs raisons qui peuvent expliquer pourquoi les directions sont différentes, mais la solution est toujours la même.

  1. Tout d’abord, supprimez le sous-chemin de la forme, en le cliquant/déplaçant hors du dossier de la forme complexe (dans le panneau des calques à gauche), ou en sélectionnant la forme complexe et en navigant vers Layers > Paths > Split dans la barre de menus.
  2. Ensuite, sélectionnez la forme que vous venez de déplacer et faites Layers > Paths > Reverse Order dans la barre de menus. Cela intervertira le point de départ et le point d’arrivée, inversant donc la direction.
  3. Associez à nouveau cette forme dans la forme complexe, et le tour est joué !

Ça m’a pris des heures pour comprendre tout ça, je suis content de vous les épargner !


image

Aplatir les formes

Cette possibilité d’éditer chaque sous-chemin à l’intérieur d’une forme plus grande vous offre beaucoup de flexibilité. Tant que vous travaillez dans Sketch, vous pouvez bénéficier de ce confort, mais à partir du moment où vous exportez votre forme vectorielle dans un autre format, comme SVG ou PDF, tous les sous-chemins seront “aplatis” en un nombre de formes aussi réduit que possible. Sketch vous offre aussi la possibilité d’aplatir une forme constituée de sous-chemins multiples, voici comment ça marche :

  • Les formes dont les bords sont en intersection seront “aplaties” en une forme unique. Des sous-chemins multiples ne font plus qu’un.
  • Les formes dont les bords ne se croisent jamais se comportent comme des sous-chemins “Union” ou “Substract”. Par exemple, la lettre “p” comprendra toujours deux sous-chemins, l’un pour le contour général de la lettre, l’autre pour pour la forme circulaire interne (soustraite du premier). Même chose pour la lettre “i”. Quand vous voudrez aplatir une forme comme celle-là, Sketch vous avertira toujours qu’il restera des sous-chemins multiples dans la version aplatie. Mais ce n’est pas un problème en soi.
image

OK, mais pourquoi pourriez-vous avoir envie d’aplatir une forme ?

  • Lorsque vous avez des sous-formes en intersection, vous pouvez avoir envie de les aplatir pour avoir une forme propre et continue. Que ce soit en supprimant des points vectoriels superflus ou en redéfinissant les courbes de bezier, c’est toujours une bonne idée de faire un peu le ménage dans votre forme vectorielle finale.
  • Avant d’exporter une forme en PDF ou en SVG, aplatissez la pour voir à quoi elle ressemblera une fois exportée. Cela vous donnera éventuellement l’occasion de supprimer quelques points vectoriels superflus, ce qui réduira la taille du fichier SVG ou PDF.
  • À chaque fois que vous opérez une rotation (“Rotate” ou “Flip”) d’une forme vectorielle dans Sketch, vous avez la possibilité de l’aplatir. Cela peut s’avérer utile quand vous appliquez Rotate ou Flip à une forme, sans pour autant que cette transformation soit appliquée au style (remplissage, bordures, ombres). Par exemple, si vous inversez (Flip) une forme selon un plan horizontal, puis appliquez une ombre décalée de 4px à gauche, la transformation Flip retournera cette ombre à droite. L’aplatissement permet de résoudre ce type de problèmes, en vous donnant une forme identique sans transformations.

Encore un point à noter, tout point vectoriel qui comportait un “border radius” (un coin arrondi) sera aplati en deux points avec des courbes de bezier. Border radius ne fait pas partie de toutes les spécifications, bien que SVG soit compatible et gardera le même arrondi après export.

Une dernière chose... une astuce

Je vous conseille fortement de créer un double caché de toutes vos formes complexes avant de les aplatir. Lorsque vous aplatissez des sous-chemins multiples il est impossible de revenir en arrière. Même chose pour les lignes et les bordures avant d’utiliser Vectorize Stroke, et pour les objets textes avant d’utiliser Convert to Outlines. On ne sait jamais si on n’aura pas à effectuer des changements à l’avenir, donc : toujours dupliquer avant d’aplatir/vectoriser.

Et maintenant, c’est à vous !


D’autres articles suivront, pour en voir d’ores et déjà la liste référez-vous à l’article original : vous pourrez suivre son auteur pour ne manquer aucun des articles (en anglais).


Ressources complémentaires en anglais

Sketch App Sources, tutoriels dans plusieurs langues et des centaines de ressources gratuites.
Learn Sketch 3, par Meng To
Sketch 3 tutorials, par Level up tuts, 16 vidéos (en anglais) pour apprendre les fondamentaux.

Ressources complémentaires en français

Sketch tutoriel 01, par Sébastien Gabriel
Créer une icône flat, par Abhijeet Wankhade


Intéressé par le design ? Sur la Cascade, retrouvez des articles et ressources, et ici des articles sur Sketch et des ressources sur Sketch.


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 © 2014.