Making bezier paths

Basic digitisation

This page was moved here from the TypeCooker site.

Digitisation is the process reconstructing shapes (for instance, drawings on paper) as lines and curves between coordinates. This allows the shape to be scaled and manipulated without loss of precision. Unlike bitmap or pixel images which have a limited resolution.

The most common way to draw curves with modern software is using Bezier paths. Many applications let you construct Bezier paths, you can find them in Illustrator and PhotoShop, but also in specialised font programs as RoboFont and Glyphs. Bezier paths have two kinds of points: points the line passes through, on-curve points, and points which influence the progress of the curve, but are not part of it, off-curve or “control points”.

Though any kind of shape can be constructed using these paths, the Bezier algorithm itself has a particular flavor and some peculiarities. If you follow these guidelines for constructing the paths, you will be able to control your shapes in detail and with consistency. Even if you already have experience with drawing paths, it helps to take a look.

How many points do you need to capture the essence of the shape on paper? Subtle details in your drawings can get lost when you construct a path with too few points. Too many points on the other hand mean a lot more editing and could make changes very time consuming.

Some programs offer autotracing, a function which will convert a scanned image to a set of Bezier paths. While certainly quick, the results need lots of editing afterwards and often it’s quicker to construct the paths by hand.

Why

Bezier paths can be drawn in any number of ways. But in order to get reliable, consistent results it pays to stick to this method. You need learn to translate problems in shapes to point movements. Faster editing means drawing more letters, more iterations for design, better results. Mastering these curves we give you the freedom to make any shape you want.

Basic path construction

shapes

Place points on corners. Close all paths, that is, make sure the last point of the shape is the same as the first point. Font editors give some sort of visual clue whether a path is closed.

Curves

bezier

Make sure you have 2 control points for each curve segment. Look in the drawing tool info to find out how to add and manipulate control points.

bezierthirds

For regular curve segments, the control points divide the curve roughly in thirds. This is not an exact requirement, but it makes sure the influence is balanced, which will make it easier to make changes.

Corner point

brokencurve

Two curves can connect in a broken way, a corner point. Manipulate the control points of the center point to get the control points like this.

Smooth point

smoothcurve

Two curves connect in a smooth way. If you move one control point, its twin on the opposite side will move in order to keep the connection smooth. The centre point is a flex point, it maintains a smooth connection between two opposing curves. Often font editors have an indicator for smooth connections.

Tangent point

tangent

Font editors offer a special class of points which guarantee a smooth connection between a curve and a straight segment. If the angle of the straight section changes, the angle of the control point is adjusted as well. A tangent point has a smooth connection, but only one control point.

Note: Font editors usually support tangent points, graphic editors usually do not.

Extreme points

extremes

Identify horizontal and vertical extremes in the shape. Often these places need points. In a horizontal extreme any control points are vertically aligned. In a vertical extreme the control points will be horizontally aligned. Whether or not all extremes in a shape actually need points is a point of discussion.

Circles and ovals

circle

A circle, oval or general round shape is then drawn as a closed path, with 4 curve points. Two on vertical extremes, two on horizontal extremes. The control points are vertically or horizontally aligned. This is an approximation of a circle. It will have to do.

Now make a shape

an

Follow the edge of a shape. Identify corners, curves, tangents and place them. Start a new path for each counter. In the first pass you can place most of the points in the right place. Well, roughly the right place, you need to start somewhere.

Putting points around a shape is only the beginning. The next steps are about getting the digitised shape right. A lot of tweaking, printing, testing, looking, and trying.