Wednesday 4 September 2019

Text along a circle II [path directions explained]



Of all blog entries, my 'Text along a circular path' tutorial gets the most hits.
In the statistics section of this blogspot i can see what people searched for, and apparently putting text on a path is a big problem (popular search terms are circular text and curved text).

One of the more esoteric aspects of text along path is putting two aligned sets of text on the same circular path, but with each set of text going in a different direction.

Gimp's native 'Text along path' functionality can only do this with fonts that are perfectly centered on all characters.

With ofnuts text along path plug-in installed, this is much easier, because you get a lot of different Height Reference options, how to map your text to the path.

But this doesnt help with finding out how to change direction of your text.

So here is the secret:

paths have a direction and a starting point.

In Gimp 2.8, the direction of a circular selection converted into a path is clockwise. To make things really complicated, its the other way around in Gimp 2.10 (this is a bug and has been fixed in Gimp version 2.10.20).

At a clockwise direction and a Baseline 'Height Reference' the text is mapped on top, while at anti-clockwise its mapped to the bottom, or when we have a closed path, like a circle, to the inside.

The starting point of a path is naturally where you created the first node, but in a circular selection converted to a path, its not so easy to determine.

Thats why i used the method of rotating the text path into place in the old tutorial.

There is another method, ofnuts taught me years ago on GC, how to get easy centered text on to a circular path. Instead of letting Gimp dictate the starting point of a circle, we cut out a little segment to get an open path.
If we combine this with text that is centered, it will sit perfectly aligned on the path.

With circular text its best to work with a square canvas, or if that is not an option, center the circle perfectly over two guides.
If you draw your elliptical selection with 'Expand from centre' and 'Fixed Aspect Ratio of 1:1' from the point where the guides cross, you will get a perfect circle.


With this selection converted to a path, you have your basic skeleton path.

Now place a guide near the bottom of the active path and add nodes with the Path Tool where the guide intersects with the circle (a click while holding down CTRL adds nodes).
To delete nodes and segments, click while holding down CTRL + Shift.


Now we have an open path with a clear beginning and an end !

(Btw, in your real art project, this deleted segment can be a lot smaller, which is better for accurately flipping the path. In Inkscape i just split the bottom node instead of cutting out a segment. But this works because Inkscape circles have only four nodes, unlike the circular Gimp path, which has many nodes, because it doesnt "know" its a circle.)


If we put text on this path, while using the centered option, it will be perfectly aligned (however, depending on the font and the letters you use, this still might need a little adjustment with the Rotate Tool, because there is a difference between what is perfectly centered and what looks visually centered).


Now a really convenient new feature in ofn-text-along-path is the option to reverse the path direction (called 'Reverse stroke direction'). This was added in 2017 and is a great workaround for the Gimp 2.10 path direction bug.

So if you try to put text on a path in Gimp 2.10, and it comes out as in the image below, you must use the 'Reverse stroke direction' option to get it on top of the path.


Of course, instead of using the 'Reverse stroke direction' you can also do the oldfashioned technique of flipping the path horizontically with the 'Flip Tool' in Path Mode and get the same result.

A third way of changing the path's direction is installing ofn-path-edits, which has a 'Reverse Stroke' option and other tools for advanced path editing.


Lets continue with our example and add a second set of text.
I flipped the skeleton path vertically (it also requires a slight re-position with the Move Tool because the open circle isnt perfectly square) and then added another set of text but this time with the 'Top of caps' option.


Alternatively you could maintain the Baseline 'Height Reference' and compensate with the 'Vertical adjust (px)', but that approach takes a lot of trial and error.

Before this tutorial ends, lets have a quick look at Inkscape and what path directions do.
The big advantage of putting text on a path in Inkscape is that its all live and always adjustable.

But whats especially interesting for our purposes is that Inkscape has an option to display a path's direction (you can see little arrowheads on the path).


When the path is reversed, the centered text is mapped to the inside, following the counter-clockwise direction of the path.


The same effect happens when the path is flipped horizontally. In both examples the path's direction goes counter-clockwise.

And this is what happens when the path is flipped vertically.


Finally the behaviour when its flipped horizontally AND vertically.




No comments: