Triskelle - Siamsa: Celtic Knot Tutorial

Once you get interested in Ireland and start browsing the web you could not have avoid them: Celtic knots. You have also noticed the variety of Celtic knots, from simple bowline knot designs via interwoven patterns to the most complex multithreaded and illuminated pieces of work. Perhaps you have tried to copy a knot and changes are you found it very complicated.
Well, you are not alone. Most people are too fixated on the thread and ignore the simple basics. All you need for drawing your own knot is common sense and a little mathematics (there are even computer applications which can do the trick, but that's no fun).

There are several systems for several kinds of knots. At this moment we have only written a tutorial for the grid-dots-and-border-system. It is the easiest system and if you take a notepad with squared paper you can copy the nice knots you see while on vacation on the spot.

This tutorial is based on Adobe Illustrator. Because we do not use rare or Illustrator-specific functions we assume an other application can do the same, but you may have to search a bit harder to find the appropriate functions.

Ok, first let's take a look what we want to achieve:

The Grid

Take a good look at the knot and count the crossings on the horizontal and vertical axis. Every crossing is positioned on a vertical and on a horizontal grid-line. In the example this means: 7 horizontal and 7 vertical grid-lines. To enclose the knot you add grid-lines on the top, the right, the left and the bottom. Hence, you end up with an 8x8 grid:

Do not start with a too small grid. Leave the fiddly work to the lace-makers. It is much easier to construct a large grid, and therewith a spacious workspace, and reduce its size afterwards. In the example the grid-lines are placed every 50 pixels.
The distances between the grid-lines determine the maximum thickness of the future thread.

The Dots

The next step is to add the dots to the grid. The only function of the dots is to indicate where thread crossings or direction changes can occur, but not where they occur!
There is actually a rule in knotology to figure this out: a crossing can occur only when X + Y is an odd number. This equation is true on Y0,X1 and on Y3,X4 but not on Y1,X1. Easy right?

In contrary to the grid it is recommendable to make the dots not too large. A good guideline is to create dots with a diameter the same as the thickness of the thread you have in mind.

The Borders

With the dots you have indicated where crossings or direction changes can occur. Now it is time to establish the borders which the thread can not pass. With this process you determine the actual knot. Unless you are coping an existing knot you have to practice this process over and over again. There are some guidelines you can follow:

If you think what a hassle, I just don't use borders you may want to reconsider. Without borders your knot will turn out a diagonal grid pretending to be a knot.

The Straight Lines

After these preparations you can really start with drawing a knot by connecting the dots. While drawing the straight lines you have to keep the following rules in mind:

At this stage you are not interested whether a thread lies on top or not.
It is recommended though to keep some space between the straight lines to make the construction of the crossings easier. This can be done by drawing the straight lines from and to the outline of the dots, instead of the dot centres. The Smart Guides of Adobe Illustrator will turn out extremely useful.

The Curves

The basic curve must exit a dot with a 45 degree angle and end at the centre of a grid-line in a 90 degree angle. Especially in the beginning you will use the same curve over and over again in a knot. Unless you are drawing your knot on a piece of paper you construct just one curve to copy, paste and rotate.

Note that curves do start at the centre of the dots. We found this the most convenient method to create a nice smooth connection between straight lines and curves.

Once you have positioned all the curves you have the following drawing:

The Loose Ends

The next step is connecting the loose ends. Whether you create rectangular or circular corners is a matter of taste. We have created rectangular corners and ended up with the following drawing:

After you have drawn a dozen knots you will get the urge to smooth things up a little. After all, a curve followed by a straight line is not very appealing for the eye, but for now this will do.

Now it is time to create the crossings.
First you have to get rid of the grid, dots and borders either by rubbing them out or by disabling the layer.
In simple designs like the example you can just follow the thread and figure out the crossing. In more complex designs that method is a hopeless task and you have to create rules like:

Or the other way around:

At the end you would have something like this:

This is the end of the tutorial for the readers who used paper to draw the knot. Check our examples if you want to practise this new acquired skill.

Broaden Things Up

For those who are drawing knots on a computer we continue with broadening the thread and creating nice crossings.
First thing to do is to check if all segments which must be connected actually are connected, or in - Illustrator-jargon - joined. Loops however are an exception on this rule: make sure that a loop is made up from two segments (if a loop is only one segment you will get a hard time making a nice crossing later on).

Make a copy of the layer with the knot (better safe than sorry) and change the thickness of the lines. In the example the line is 30 pixels thick. Note that one corner of the loop is not joined!

Convert the thick lines to outlines (in Illustrator: Object, Path, Outline Stroke) and swap the fill and stroke colour. Adjust the thickness of the stroke if necessary. You will now see something like this:

Make another copy of the layer with the knot. Make the lines a bit thicker than the previous one (in the example we have chosen for 40 pixels), convert them to outlines and swap colours like above:

The two layers with the outlines together looks like this:

Make a copy of the layer with the 40 pixel outline.

Crossings

The drawing below shows one crossing which will act as an example.

Draw an object which enclosed the crossing.

Select the enclosing object and the 40 pixel outline from the top thread and let the Pathfinder calculate the intersecting area:

Select the created intersecting area, cut it with Ctrl-X and paste it in front with Ctrl-F (this is to make sure that the intersecting area is on top of the layer where it must be for the following step). Select the intersecting area and one of the 30 pixel outlines. Use the Pathfinder to extract the intersecting area from the outline.

Paste the intersecting area again in front using Ctrl-F and do the same with the other 30 pixel outline. After erasing the 40 pixel outlines you end up with a nice crossing:

As your experience grow you will find faster ways to construct the crossings. You can create compound paths and groups for example, but the principle will remain the same.

Repeat this whole process for every crossing in the knot and you will finally get this:

Final Step

The final steps are to tidy things up (constructing the corner of the loop for example), import the path in PhotoShop or something alike and play around a bit:


	Last modified: 19-02-2007. Copyright by Vincent J. Peters.
	Content: ireland - irish - knots - celtic knots - celtic knot tutorial