Graphic Design Web Design SEO Web Development HTML & CSS JavaScript WordPress Eleventy Innovation Portfolio My YouTube Channel Speedlify Presenting Multi Grid Navigation Sounds Affordable & Reliable Golden Ratio Optimizations X-height

Interacting With Bezier Curves

By: on Feb 4, 2022

The Bezier curves are used everywhere in design programs like Illustrator, Blender and typeface design applications. It gives the ability to draw smooth, beautiful curves and scale SVG graphics as well as fonts to any size. We also use it to calculate timing for CSS and JavaScript.

This was an incredible achievement in the field of software engineering and took polynomials to a whole new level.

Pierre Bezier

To create a Linear Bezier draw a line with a starting point and ending point.

Then add a third point somewhere on that line to calculate the intersection between the two points.

This third point is called a "t" value, that is a value between zero and one, similar to a percentage. This calculation between the two points is called linear interpolation, or lerp for short. The Linear Bezier formula is:
P = (1-t)P1 + tP2

Pierre BezierPierre Bezier

Now if we add another point to the line, each of the line segments will have their own interpolated points and lerping "t" values.

Now we connect the two interpolated points with another line, segment, and add a point on that line, that also lerps based on a "t" value.

Here you can see that it follows a very specific path.

This path is a Quadratic Bezier Curve and uses this formula:
P = (1−t)2P1 + 2(1−t)tP2 + t2P3

Pierre Bezier

We can repeat the same process by adding a fourth point to the line.

Here we add three points, connect them, add two points, connect those, and add the last point.

The last point will follow the path of the Cubic Bezier Curve using this formula:
P = (1−t)3P1 + 3(1−t)2tP2 +3(1−t)t2P3 + t3P4

What's beautiful about this construction is that it works no matter what points we use. We can change the shape to anything by following the same rules and it will give us a smooth path.

Interactive Bezier Curve Animation

The Cubic Bezier Curve is the most commonly used curve in graphic software. Try this interactive animation to see how the software creates the curves.

Please use a desktop or tablet browser for full functionality

Drawing Beautiful Bézier Curves

Bézier curves can be frustrating in the beginning and are a bit of an art form. Luckily there are some easy rules to follow to keep things more consistent.

Using The Photoshop Tools

Bézier Curves are made up of anchor points and handles. There are three important keyboard keys to working with the tool that are:
"Shift", "Control", "Command", "Alt" or "Option"
Using the Pen Tool in Photoshop is a pretty universal graphic tool for learning to create these vector curves, so here are some Photoshop tips to use.

Control One of the Handles

Using the Convert Anchor Tool just by clicking on the handles, or with the Direct Selection Tool by clicking on the handle while holding the "Alt" or "Option" key. To reconnect the handle back at its current state click the handle again while pressing "option".

Remove One of the Handles

Using the Pen Tool, click on the anchor point while holding the "Alt" or "Option" key.

Add Both Handles Control Back to 180 Degrees

Using the Convert Anchor Tool clicking the anchor point and drag.

Highlight Multiple Anchor Points

Using "Shift," click and drag with the Direct Selection Tool you can highlight multiple anchor points.

Create A Brush Stroke To Follow A Path

Once you have your path created, go to the Brush Tool or press "b" on the keyboard. Now set the size, hardness, opacity and so on. Then go back to the Pen Tool by pressing "p" on the keyboard. Then right click and go to "Stroke Path" and choose Brush.

Cut Out Around An Image

Trace your image with the Pen Tool then press "command" + "enter" or right click and select "Make Selection". Then once you have your selection, click on the "Add Layer Mask" button in the Layer Window.

Conclusion

Bézier curves are another great example of mathematical beauty. It’s fascinating what such a simple function on some points can achieve. Whether it is design or engineering the Bezier Curve is a really powerful tool that allows us to be creative and explore endless mathematical possibilities.

Resources