diff --git a/_how-tos/draw/designing-with-variable-components.md b/_how-tos/draw/designing-with-variable-components.md new file mode 100644 index 0000000..2912027 --- /dev/null +++ b/_how-tos/draw/designing-with-variable-components.md @@ -0,0 +1,59 @@ +--- +title : Designing with variable components +layout : default +permalink : /how-tos/draw/designing-with-variable-components +draft : true +order : 302 +--- + + + +Gaëtan shows how to draw the word *fontra* in a copperplate style with just one single variable component: + +------- + + +------- +Notes: + +- create one source with line metrics +- draw with basic shape tool +- Gaëtan shows two different ways of closing contours +- make only one single variable component with the name "compo" +- add glyph axes + - weight_left + - weight_right +- use the variable component "compo" to create the character "o" +- skew variable component with transformation tools by 30° +- fine-tune "o" +- add new glyph axes + - height_left + - height_right +- align with the help of a guideline +- adjust spacing +- create "a" based on "o" +- add new glyph axes + - stem_left + - stem_right +- add two more points to the contour for the stems +- add stem to "a" +- create character "n" +- add new glyph axes + - width_left + - width_right +- adjust spacing +- create character "r" +- create character "t" +- create character "f" +- add font axis "weight" +- add second "weight" source to each character +- go through the characters and adjust the weight of the stems + +-> at the end we have a nice copperplate style variable font with a weight axis made with one single variable font component. \ No newline at end of file diff --git a/_how-tos/how-tos.md b/_how-tos/how-tos.md index ad9f1fd..2a01a28 100644 --- a/_how-tos/how-tos.md +++ b/_how-tos/how-tos.md @@ -31,6 +31,7 @@ Solve a specific problems ### Draw{% comment %}order: 300{% endcomment %} - [Draw with 3 global variations axes](draw/draw-with-3-axes){% comment %}order: 301{% endcomment %} +- [Designing with variable components](draw/designing-with-variable-components){% comment %}order: 302{% endcomment %} ### Documentation{% comment %}order: 900{% endcomment %} diff --git a/videos/demo-designing-with-variable-components.mp4 b/videos/demo-designing-with-variable-components.mp4 new file mode 100644 index 0000000..58f196a Binary files /dev/null and b/videos/demo-designing-with-variable-components.mp4 differ