Sketch 3 : Maîtriser les courbes de Bézier

L'utilisation des courbes de Bézier est souvent compliquée. Peter Nowell nous introduit au fonctionnement et à la pratique des courbes de Bézier avec Sketch, dans ce tutoriel clair et détaillé.

Par

Dans le graphisme numérique, les ordinateurs dessinent des formes vectorielles à partir d'un ensemble de points — comme dans les jeux où l'on doit relier les points entre eux — et la plupart des programmes utilisent les “courbes de Bézier” pour créer des courbes autour de ces points vectoriels. Vous les avez peut-être déjà vues dans les outils de design et d'animation, mais comprendre leur fonctionnement permettra de s'épargner bien des soucis lorsque vous créerez vos propres formes. Sur notre lancée de Sketch et les vecteurs, cet article essaiera de démystifier les courbes de Bézier.

Comment fonctionnent les courbes

Il existe de nombreuses courbes de Bézier, qui se différencient par la façon de contrôler la courbe et par la complexité de leur dessin, mais la “courbe de Bézier cubique” est la plus couramment utilisée dans les logiciels de graphisme — et la seule méthode utilisée dans Sketch. Alors comment est-ce que ça marche ?

image

Les courbes de Bézier sont créées à l'aide de poignées (“Handle”) qui partent d'un point vectoriel (“Vector Point”). Au bout de chaque poignée se trouve un point de contrôle de la poignée (“Handle Control Point”). Ces poignées semblent attirer magnétiquement la forme vers elles. Si vous vous êtes déjà demandé comment cette attirance magique fonctionnait, jetez un coup d'oeil à cette vidéo !

Vous pouvez également en voir une version simplifiée sur CodePen :

See the Pen Drawing A Cubic Bezier Curve by Peter Nowell (@pnowell) on CodePen.

Je vous recommande vivement de passer à la nouvelle version de Sketch, 3.1, qui vient de sortir.

Utiliser les poignées de Bézier

Dans la vidéo, on se concentre sur deux points (une ligne), mais en pratique la plupart des formes vectorielles sont constituées de nombreux points. Il y a donc souvent deux poignées de Bézier qui partent d'un point — une de chaque côté. Voici quelques-unes des façons de créer une courbe à partir d'un point dans Sketch :

image

“Mirrored” est la méthode par défaut, la plus courante aussi, pour contrôler une courbe de Bézier. Cette approche utilise deux poignées qui partent du point et se situent à la même distance et sur le même angle. Les poignées semblent être “tangentes” à la courbe. L'option Mirrored part du principe que si les deux poignées sont sur le même angle, la forme aura une courbe douce, c'est à dire qu'il n'y aura pas d'angle visible sur la forme, contrairement à l'option Disconnected.

image

“Asymmetric” est similaire à Mirrored pour ce qui est de l'angle égal, mais les poignées ne sont pas à la même distance du point vectoriel. C'est particulièrement utile lorsqu'une courbe doit retomber rapidement sur un côté.

image

“Disconnected” vous permet de changer chaque poignée indépendamment l'un de l'autre. Il y a deux cas d'utilisation pour ceci :

  1. Vous voulez que la forme ait un angle visible lorsqu'elle rencontre ce point vectoriel, plutôt qu'une douce continuité.
  2. Vous n'avez besoin que d'une poignée. Vous ne voulez contrôler la courbe que d'un côté et vous ne voulez pas de courbe de l'autre. Si c'est de cette option que vous avez besoin, cliquez sur le point de contrôle de la poignée que vous voulez supprimer et appuyez sur la touche delete (ou la flèche au-dessus de 'Enter' sur votre clavier)

image

Pointes droites et angles arrondis :
Lorsque l'option Straight (droit) est sélectionnée, un point vectoriel n'a ni poignées ni courbes autour. Si on applique cette option à deux points adjacents, le chemin qui les relie sera une ligne droite. Sketch vous permet d'arrondir l'angle d'une pointe droite (aka border radius). Avec Sketch il paraît incroyablement facile d'arrondir n'importe quel angle en utilisant un simple point et une valeur de rayon (radius) : en coulisses le logiciel calcule des courbes de Bézier pour vous. Si vous voulez faire apparaître ces courbes de Bézier, il suffit d'aplatir votre forme.

image

Contrôlez vos poignées

Avec les courbes de Bézier, les vrais problèmes commencent généralement lorsqu'on cherche à savoir où placer les poignées et les points vectoriels pour parvenir au résultat souhaité. Dave Coleman, designer typographique chez AGSC a écrit un superbe article à ce sujet dernièrement, dont je résume ici les principaux points :

  • En plaçant stratégiquement vos points sur une courbe, vous pourrez réduire de manière substantielle le nombre de points dans la forme. En simplifiant sa construction, vous facilitez les éventuelles modifications et vous allégez votre fichier. Dave recommande de trouver le point le plus extrême dans une courbe et de placer votre point vectoriel à cet endroit.
  • Une fois votre point positionné, on commence à bricoler avec les poignées. En alignant les poignées verticalement ou horizontalement (“Mirrored”), les courbes seront souvent plus douces et plus simples à régler. De cette façon, vous n'avez besoin que d'une poignée et le processus devient plus aisé.
  • ...sauf dans certains cas. Parfois, pour obtenir le résultat recherché, il faudra que le point ne se trouve pas à l'extrêmité ou que les poignées forment un angle. Pas de problème. Comme toute règle, suivez-la, comprenez-la et — si nécessaire — contournez-la.

Vous serez sans doute soulagé de savoir qu'il existe un moyen facile de faire pivoter les poignées à 90° : avec la touche “shift” (⇧) enfoncée, déplacez le point de contrôle de la poignée.

image

Si, comme dans l'illustration ci-dessus, cette fonctionnalité ne marche pas comme prévu, vérifiez que les arrondis (round) sont désactivés. En effet, si vous utilisez “Round to full pixel edges” et que le point vectoriel ne se trouve pas sur un pixel exact, ou sur un demi-pixel, les poignées ne se mettront pas à 90°.

image

Une solution serait de désactiver les arrondis, au moins pendant que vous ajustez ces poignées. Une autre solution est d'assigner manuellement des coordonnées à chaque poignée, comme nous allons le voir maintenant.

image

Une fonction cachée

En travaillant sur un projet de logotype personnalisé, j'ai découvert une importante fonctionnalité cachée de Sketch : non seulement les points vectoriels ont leurs propres coordonnées, mais les points de contrôle de poignées également. C'est en partie évident puisque ces coordonnées de poignées permettent à l'ordinateur de dessiner la courbe. Mais ce qui ne l'était pas, c'est que Sketch nous permet d'entrer manuellement ces coordonnées.

image

Cette fonctionnalité passe souvent inaperçue car l'apparence des poignées ne change pas quand on les sélectionne — la seule chose qui change ce sont les valeurs des “positions” X et Y dans l'inspecteur. Grâce à cela, je peux maintenant placer les poignées exactement où je veux, et des ajustements minuscules (de fractions de pixels) sont faciles à réaliser. Essayez vous-mêmes : modifiez une courbe de Bézier en déplaçant les poignées, puis ajustez précisément la position des poignées dans l'inspecteur.

image

Astuces et raccourcis

  • En double-cliquant sur un point vectoriel, il passe alternativement du mode Straight au mode Mirrored.
  • Lorsque vous modifiez une forme, vous pouvez sélectionner le point vectoriel suivant sur le chemin en appuyant sur la touche tabulation de votre clavier. “Shift” + “Tab” pour sélectionner le point précédent. La position du point suivant dépendra de la direction de votre forme (voir plus de détails ici).
  • Lorsque vous avec sélectionné un point vectoriel, vous pouvez taper les chiffres 1, 2, 3 et 4 pour choisir les modes Straight, Mirrored, Disconnected et Asymmetric.
  • Si vous appuyez sur la touche “Command” (⌘) lorsque vous déplacez votre point vectoriel, les guides intelligents (smart guides) de Sketch sont désactivés.
  • Si vous appuyez sur la touche “Command” (⌘) lorsque vous déplacez une poignée, vous pouvez positionner celle-ci librement et indépendamment de l'autre poignée, comme dans le mode Disconnected. Attention : Si le point était réglé sur le mode Mirrored ou Asymmetric, si vous déplacez ensuite la poignée sans appuyer sur ⌘ le résultat Disconnected disparaîtra. Essayez de voir comment ça marche !

Une dernière chose. Ne vous découragez pas si les courbes de Bézier ne sont pas intuitives au commencement. Rappelez-vous simplement que :

Comme tout talent, la création de formes vectorielles aux courbes parfaites demande du temps et de la pratique.

Une bonne façon de s'exercer à ce savoir-faire est de dessiner des lettres. Prenez une photo d'une belle lettre (avec des courbes, comme G, Q, R ou une écriture manuscrite), placez cette image dans Sketch et utilisez l'outil vecteur pour tracer les contours de la lettre. Essayez de positionner vos points vectoriels aux extrêmités de la forme, utilisez des poignées horizontales et verticales, et ajustez-les en entrant manuellement leur coordonnées.
NdT : pour vous amuser, vous pouvez commencer avec ce site légèrement addictif, Shape Type.

Et n'oubliez pas de partager vos réalisations ! Utilisez #sketchbezier sur Twitter et Instagram. J'en ajouterai quelques-unes également. Le monde a besoin de belles courbes !


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

Tous les articles sur Sketch parus dans La Cascade


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.
Shape Type, un petit site vous permettant de dessiner des lettres avec des courbes de Bézier. Attention, c'est addictif !
Une superbe vidéo de démonstration pratique des conseils donnés dans l'article, Peter Nowell dessine une lettre.
Une liste de tutoriels sur les courbes de Bézier

Ressources complémentaires en français

Sketch tutoriel 01, par Sébastien Gabriel
Créer une icône flat, par Abhijeet Wankhade
Créer une interface de login avec Sketch, par Armando Sotoca
Sketch et les vecteurs, par Peter Nowell


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.