What Are The Two Types Of Lines You Can Draw With The Bezier Tool?

                
Mastering the Bézier Curve in Sketch
                
Interruption through the confusion and start making beautifully curved vector shapes.
In digital graphics, computers describe vector shapes using a collection of points — a sort of connect-the-dots — and most programs use "Bézier curves" to create curved lines around those vector points. You lot may exist familiar with their appearance in design and motion graphics tools, simply understanding how they work will take out some of the pain and confusion when you're trying to create a particular shape. Edifice off our understanding of vector shapes, this article will demystify designing with Bézier curves.
How Curves WorkAlthough in that location are dissimilar types of Bézier curves (differentiated past how the bend is controlled and the complexity with which information technology is drawn), "cubic-Bézier" is the most usually used in graphics software — and the only method used in Sketch. So how does cubic Bézier piece of work?
                                      
Bézier curves are created by                handles                that extend from whatever                vector signal. At the terminate of each handle is the                handle command point. These handles seem to magnetically pull the shape toward them. If you've ever wondered how this magical magnetic pull works, dork out with the short video below!
                These graphics were made using Sketch, SVG Animation, and some other nifty tricks. Check out a simplified                  CodePen                  here: http://codepen.io/pnowell/pen/gqLbc              If y'all have no involvement in knowing how computers depict Bézier curves simply skip to the following sections, which provide practical tips for all levels.
                I highly recommend that you apply Sketch 3,                                                  version 3.one or higher.                              
Using Bézier Handles, in ExerciseThe example in the video above focuses on two points (a line), whereas most vector shapes have considerably more than points. As such, there are often                two                Bézier handles extending from a point — one on each side. Hither are some of the ways to create a curve around a vector point in Sketch:
                                  
"Mirrored" is the default and most mutual method of controlling a Bézier curve. This approach uses two handles that extend the aforementioned distance from the vector bespeak,                at the aforementioned angle. The handles seem to form a unmarried line that is "tangent" to the curve. The Mirrored option is based on the fact that if both handles are at the same angle, the shape will have a completely smooth curve; in other words, there will be no visible corner/signal along the shape every bit is the instance with the Asunder option.
                                  
"Asymmetric" is like to Mirrored in that the handles are at the same angle, although the handles do non have to be the same distance from the vector point. This is especially useful when a curve needs to taper off more rapidly on ane side.
                                  
"Disconnected" allows you to change each handle independently of the other. In that location are two apply cases for this:
You would like the shape to have a noticable angle/corner when it hits that vector bespeak, rather than creating a smoothen curve through the bespeak.
You may only desire one handle; control over a curve on one side of the bespeak, and no bend on the other side. If this second selection is what you're after, click on the handle control betoken you lot'd like to remove and press the "delete" key.
                                      
                Direct Points & Rounded Corners:
                When the                Straight                option is selected, a vector point has no handles or curve through it. If two vector points with this pick are adjacent to each other, the path between them volition exist a straight line. Sketch gives you the option to round the corner of any Straight point (aka border radius). Although Sketch makes it appear incredibly like shooting fish in a barrel to round any corner with a single signal and radius value, under the hood the software is actually acheiving this past calculating Bézier curves for you. Pretty neat! If you want to reveal these Bézier curves, simply                flatten                your shape (described here).
                                  
Go Your Handles Under Control!One of the nearly disruptive things about Bézier curves is where to identify handles and vector points in order to acheive your intended result. Designer and lettering artist Dave Coleman of the AGSC recently wrote a great article about this, and I'll summarize a few of his chief points.
If you strategically place vector points along a curve, you lot can substantially reduce the amount of points in the shape. The more simply your shapes are constructed, the easier they will exist to alter, and the smaller your filesizes will be. Dave recommends                  finding the "outermost point" along a curve, and placing your vector bespeak there.
With your points in position, information technology's time to fiddle with the handles. Past                  aligning the Bézier handles vertically or horizontally, curves will oftentimes be smoother and faster to fine-melody. Considering yous only need to motility the handle along one axis, the whole process of making curves becomes easier.
…Except, occasionally, when it doesn't. Sometimes a curve can't be fully reproduced unless Bézier handles are at an off-bending, or the vector point isn't positioned at the outermost indicate. This is OK. Like all guidelines, follow them, understand them, and — when necessary — suspension them.
Y'all may be relieved to know that at that place'southward a quick fashion to                snap Bézier handles to 90° angles: just hold downwards the "shift" key while dragging a handle control point.                If, similar in the graphic below, this characteristic isn't behaving as expected,                look to see if "rounding" is turned off. If instead you lot're using "Round to full pixel edges" or "half pixel edges",                and                the vector point is not at an exact pixel or half-pixel position, the handles will not snap to xc° angles.
                                                      
                                                      
              
Ane solution is to turn off rounding, at to the lowest degree as long as you're adjusting those particular handles. Another solution is to manually assign each handle's coordinates, as described in following section.
                                  
A Life-Saving Subconscious FeatureWhile working on a custom logotype project, I discovered an important hidden feature in Sketch:                non only exercise vector points have their own coordinates — and then do each of a point'due south Bézier handles ("handle control points"). Function of this seems obvious, because those handle coordinates are essential for the computer to draw the curve. What wasn't obvious is that Sketch allows y'all to manually enter those coordinates.
                                      
This characteristic is like shooting fish in a barrel to miss considering the appearance of the handles doesn't change when they are selected — the only thing that changes are the X and Y "position" values in the Inspector. Being able to gear up a handle's coordinates solved these conundrums and gave me the peace of heed that my Bézier handles were                exactly                where I wanted them. Furthermore, miniscule adjustments (measuring fractions of a pixel) became like shooting fish in a barrel to make. Endeavor this out for yourself; modify a Bézier curve by dragging the handles, then fine-tune the handle positions in the Inspector.
                                      
More Tips and Shortcuts                  Double-clicking a vector point                  volition alternate it between Straight and Mirrored modes. Y'all may be familiar with this from other applications.
When editing a shape, you tin can                  select the next vector point                  along the path by hitting "tab" on the keyboard. "Shift" + "tab" will select the previous indicate along the path. Whether the "next betoken" goes clockwise or counterclockwise around your shape depends on the shape'southward direction (described in more than item here).
When a vector point is selected hitting the                  i, 2, three, and 4 number keys                  on the keyboard to cycle between straight, mirrored, disconnected, and asymmetric modes.
If y'all hold down the "Command" (⌘) key while moving a vector point, Sketch will                  ignore "smart guides"                  that would otherwise aid y'all align the bespeak vertically or horizontally with other ones.
Property downward the "Command" (⌘) cardinal while moving a Bézier handle will allow you to                  position that handle freely                  and independently of the other handle as though the vector point is using Disconnected mode. Keep in mind that if the point had been using Mirrored or Asymmetrical modes, moving a vector handle                  without holding down                  the control key will discard the Disconnected result. Give it a try and run across how it works!
One last affair. Don't be discouraged if Bézier curves don't seem intuitive at first. Simply recall:
Like any skill, creating perfectly-curved vector shapes requires repetition & exercise.
                A great way to practice                these skills is by tracing letterforms. Take a photo or drawing of a cute letter (something curved, like a "G", "Q", "R", or anything from a script alphabet), bring that image into Sketch, and utilise the vector tool to trace the outline of the letterform. Try to position your vector points at the outermost places on the shape, utilise vertical and horizontal handles, and fine-tune them past manually entering coordinates.
                And don't forget to share what you make!                Use                                  #sketchbezier                                on Twitter and Instagram. I'll post some likewise. The world needs more beautiful curves!
                Exist the kickoff to know                                  when I publish new design articles and resources.
                    I just released                  
                Sketch Master                  — online preparation courses for professionals learning Sketch. Yous'll learn tons of tricks and practical workflows, by designing real-world UI/UX and app icon projects.