1.1 Drawing a proper skeleton
1. Open Glyphs App
Create a New File, ( command + N ) go to Font Info then name it and save it:
When you have the App open, the default view is a grid of Glyphs that shows placeholder letters of each characters of the Basic Latin Alphabet in a box. In order to start editing / drawing letterforms, double click on any of them. This will open up the workspace and that’s where the party begins 😉
2. The basic tool(s) you need
Simple: Draw (P) and Select (V).
Now, to draw the paths, all you are going to need is the pen tool (press P on the keyboard) and the selection tool (press V). Alternatively you can click on and select the pen tool and selection tool from the top menu bar with the cursor, however I recommend getting used to the keyboard shortcuts to speed up switching between these two, it will happen quite frequently!
In this example, we are going to draw a freehand (rather free”mouse”) cursive uppercase “C”. Let’s place the starting point by clicking on the working area. Right after this, you will notice the placeholder letter background will disappear and you are left with a blank square. Well that’s ok, you can use your own background to trace (more about backgrounds and layers in a later chapter). For now let’s just continue from scratch as follows:
“The edge of a circle with infinite radius is a straight line”Euclides
Points are called nodes and they are needed only where the path changes its direction and straight for a while, this is called the extrema. The rest is controlled by the Bezier handles, as it’s in their names – they “handle” it.
Recommended path direction is counter clockwise, but you may change path direction any time later if needed (to avoid compatibility issues, overlapping contours etc. more about these in later tutorials).
3. Draw the paths first,
don’t worry about making them perfect – Edit later.
An important rule of drawing paths is that you don’t need to get everything perfect and smooth for the first move, the goal is to sketch out a rough skeleton quickly. Why not draw perfect outlines for the first time?
- That is impossible
- Wasting time trying to draw nice curves without seeing the whole context (even when tracing around background, just wrap around the outlines firts, then tweak it and fit on the original sketch)
- At the end of the day, (or at the beginning of the next)you will notice something with fresh eye and have to edit anyway …
4. Shortcuts and tips for editing curves and paths to achieve nice results:
While editing, click on either the nodes or the handles to change their position, you can even adjust the handles’ distance separately by the smallest unit by tapping the arrow key once.
Tip: Bezier handles are adjustable separately(!)
what’s even cooler, they can also be adjusted by even just one unit by tapping the arrow keys (super useful for fine tuning.)
Select node and press the arrow keys:
1 tap = 1 unit move
1 tap while holding shift = 10x steps
1 tap while holding command = 100x steps
Keep holding shift to make sure handles are aligned both horizontally and vertically:
To be continued…
- Drawing outlines with Glyphs1.1 Drawing a proper skeleton 1. Open Glyphs App Create a New File, ( command + N ) go to Font Info then name it and save it: When you have the App open, the default view is a grid of… Read More »Drawing outlines with Glyphs
- “The Running Fox” – Animation with variable font technology – Part 2This tutorial is way more exciting and less complicated than Part 1 was! In this one we are about to “capture” this little fellow over here (animation pauses on hover): f 1.2 Animation 1. Animated variable font files in HTML and… Read More »“The Running Fox” – Animation with variable font technology – Part 2
- Animation with variable font technology – Part 11.1 What does “Variable” mean? 1. Masters, Master Compatibility and Interpolation Variable fonts are basically single font files with multiple masters and instances with different properties that can be adjusted manually in graphic editor softwares (or with html and css if… Read More »Animation with variable font technology – Part 1