I have become interested in Celtic Illuminated Letter Art as illustrated in the Book of Kells. I have tried reproducing a simple letter and it has taken me two days. My aim is to reproduce the whole alphabet 😱. My question is whether anyone has any suggestions as to how multiple interlocking paths which then need to to be coloured separately. I have experimented with the Knot path effect but it only seems to work on one path not mutiple paths as I want. I have tried putting different paths on different layers and using the display order to hide certain paths with some success. Howver I am still left with the problem where one path interweaves with itself.
The Knot LPE works on groups of paths, for example.
Usually, people cut the object into multiple objects to give the impression of something being over and under something else at the same time (which is not possible in SVG, which follows a strict stacking order).
Here's an SVG file that shows how you have to handle the situation where one object loops over itself. Basically, you have to draw it as separate objects, very carefully. Download it, open the file, ungroup the knot, and take it apart, so you can see how it's made.
If the area where the separate objects meet is not a straignt line, like in my file, you can use path operations (booleans) to create perfect edges where the parts come together. It can get really tricky sometimes, but definitely it can be done.
I'm not familiar with what you're describing - illuminated art. Can you show an example?
Celtic art is soo beautiful. I have tried some of the style and I have to say, it is difficult. How the monks were able to make all the designs, I do not know. They also made all the inks and parchment themselves... Actually, I think a lot of it would still have to be done by hand in Inkscape, like Brynn explains.
If it is a matter of reproducing an existing alfabet... I would be tempted to trace it from a picture by hand: the black lines on white paper. I would then make a scan/ picture of that drawing and import it into Inkscape. Use the bitmap trace to make it into vectors. Then you have the basic design. You can then draw the rest of the lines in different colours with the pen tool. Bigger spaces of colour you fill with the bucket fill tool. Why would I do it this way? I think hand drawn images are more lively than perfect geometric vector shapes. The lines are sometimes a bit thicker, sometimes a bit thinner. This creates extra beauty which is difficut to recreate by only drawing in Inkscape.
If you want to share your first result, it would give us an idea what it is you are trying to draw.
Thank you all for your comments. I have posted my first attempt at a illuminated letter in my gallery (it's the only one there so shouldn't be difficult to find). I would welcome you feedback once you have had a chance to review it.
.
Maren, I will give The Knot path effect another go.
Brynn, I will download your knot and have a look at it. Thanks very much for posting this.
Kirstie, I like your ideas to experiment with the pen tool and ink bucket and will definitely try this.
I look forward to hearing your further suggestions,
Thank you for your feedback and for taking the trouble to provide your version. One thing I didn't make clear is that I have put each colour on a separate layer to make it easy to then experiment with changing the colours to try and achieve something near the original colour palette. I thought this would be the easiest way to introduce this flexibility.
Considering the possibility to copy/paste one letter drawing from one svg to another probably the best option would be to put all the contents onto one layer only.
The important part was to have the black outlines atop and fills with no outlines below.
There are ways to define custom colour swatches although using such flat fills shouldn't take more than minutes to achieve.
It's just the word "illuminated" that was confusing me. I'm not sure if I've ever heard that word used in that way before. I thought you wanted highlighting and shadows, with a depth-like effect.
When I was first investigating that endless knot image, I saw tons of celtic lettering, and other designs, and it all looked handmade to me. I really wanted to find a way to do it with Inkscape, but without the handmade appearance -- meaning that I wanted consistent widths for the lettering, and predictable curves. But it got to be too complicated and I gave up. But I still may come back to other knots someday.
In the letter A that you shared, is that lion biting itself? Or it just happens to look that way?
Your approach to reproducing Celtic lettering using Inkscape mirrors my own in that I too did not want to simply use Inkscape to produce something that looks hand drawn but instead approach the topic as if I was producing the design from scratch in Inkscape using all the tools available. That’s why I chose to put each element on a new layer and to draw it as an enclosed path that can have both a fill and a stroke. Also I drew the winding bits e.g. neck, mane and tail as a single Bezier path and then increased the stroke width to the approximate width of the original and then converted stroke to path (to give the opportunity for both a fill and a stroke colour) and, in the case of the neck, I duplicated the path and outset it to give me the opportunity to have a separate colour for the neck border. Only then did I start cutting up the paths to give the impression of interweaving. I am going to persevere with this approach and will post future results in my gallery if you are interested.
By the way you are right about the lion biting its own neck! It was the way the monks were able to use animal characters to represent joined up letters. If you are interested the book I am using as reference is “The Celtic Design Book” by Aidan Meehan who has made an in depth study of Celtic design and explains how the monks did it using the tools they had to hand. It is truly fascinating. Here is a link to an online version of the Book of Kells from the ninth century which contains some truly staggeringly intricate designs that Aidan has reproduced. Enjoy!
Oh, that's very interesting! Thanks for the link. I'll have a look when I have a chance.
Yes, the stroke width and path offsets can be used to keep some of the widths consistent. But I still always struggled with the main...string or ribbon object, or whatever it would be called. I could never keep the basic object consistent width. I thought I was going to have to get into angle of lines and maybe some trigonometric things (which I last studied in the late 1970's, for goodness sakes!).
Hhmm....maybe I just now had an insight! Maybe it just needs a little open discussion to grease the old brain wheels, as they say 👵
Just made a challenge about drawing a single knot in this topic. If you have the time I'd suggest looking at it -basically reducing the problem to a basic level.
Beyond the Basics Celtic Illuminated Letters
Inkscape.org
I have become interested in Celtic Illuminated Letter Art as illustrated in the Book of Kells. I have tried reproducing a simple letter and it has taken me two days. My aim is to reproduce the whole alphabet 😱. My question is whether anyone has any suggestions as to how multiple interlocking paths which then need to to be coloured separately. I have experimented with the Knot path effect but it only seems to work on one path not mutiple paths as I want. I have tried putting different paths on different layers and using the display order to hide certain paths with some success. Howver I am still left with the problem where one path interweaves with itself.
Any suggestions anyone?
The Knot LPE works on groups of paths, for example.
Usually, people cut the object into multiple objects to give the impression of something being over and under something else at the same time (which is not possible in SVG, which follows a strict stacking order).
Here's an SVG file that shows how you have to handle the situation where one object loops over itself. Basically, you have to draw it as separate objects, very carefully. Download it, open the file, ungroup the knot, and take it apart, so you can see how it's made.
If the area where the separate objects meet is not a straignt line, like in my file, you can use path operations (booleans) to create perfect edges where the parts come together. It can get really tricky sometimes, but definitely it can be done.
I'm not familiar with what you're describing - illuminated art. Can you show an example?
Hi Rodhull,
Celtic art is soo beautiful. I have tried some of the style and I have to say, it is difficult. How the monks were able to make all the designs, I do not know. They also made all the inks and parchment themselves...
Actually, I think a lot of it would still have to be done by hand in Inkscape, like Brynn explains.
If it is a matter of reproducing an existing alfabet... I would be tempted to trace it from a picture by hand: the black lines on white paper. I would then make a scan/ picture of that drawing and import it into Inkscape. Use the bitmap trace to make it into vectors. Then you have the basic design. You can then draw the rest of the lines in different colours with the pen tool. Bigger spaces of colour you fill with the bucket fill tool.
Why would I do it this way? I think hand drawn images are more lively than perfect geometric vector shapes. The lines are sometimes a bit thicker, sometimes a bit thinner. This creates extra beauty which is difficut to recreate by only drawing in Inkscape.
If you want to share your first result, it would give us an idea what it is you are trying to draw.
Hi Maren, Brynn and Kirstie,
Thank you all for your comments. I have posted my first attempt at a illuminated letter in my gallery (it's the only one there so shouldn't be difficult to find). I would welcome you feedback once you have had a chance to review it.
.
Maren, I will give The Knot path effect another go.
Brynn, I will download your knot and have a look at it. Thanks very much for posting this.
Kirstie, I like your ideas to experiment with the pen tool and ink bucket and will definitely try this.
I look forward to hearing your further suggestions,
Kind regards,
RodHull
Hi.
2 days for such a letter sounds reasonable. However then the result could be much better.
Your use of layering doesn't help the image structure. It'd be something, like
front: black outlines
middle: coloring
bottom: backdrop.
That means, each edge of the coloring is overlapped by the black outlines.
If you bitmap trace the photograph you can get the black outlines with a single scan.
Attaching a quick mockup of the idea.
If you decide to go with the pencil cleanup on paper as suggested above, the drawing structure would still be preferably the same.
Hi Lazur,
Thank you for your feedback and for taking the trouble to provide your version. One thing I didn't make clear is that I have put each colour on a separate layer to make it easy to then experiment with changing the colours to try and achieve something near the original colour palette. I thought this would be the easiest way to introduce this flexibility.
Considering the possibility to copy/paste one letter drawing from one svg to another probably the best option would be to put all the contents onto one layer only.
The important part was to have the black outlines atop and fills with no outlines below.
There are ways to define custom colour swatches although using such flat fills shouldn't take more than minutes to achieve.
Hi Lazur,
Not sure I understood everything you said but it looks like there are many ways to achieve a similar effect in Inkscape. Thanks for contributing.
Hej RodHull,
I think you made a good drawing, as it is not easy to make.
Very interesting to read how everbody solves this puzzle!
It's just the word "illuminated" that was confusing me. I'm not sure if I've ever heard that word used in that way before. I thought you wanted highlighting and shadows, with a depth-like effect.
When I was first investigating that endless knot image, I saw tons of celtic lettering, and other designs, and it all looked handmade to me. I really wanted to find a way to do it with Inkscape, but without the handmade appearance -- meaning that I wanted consistent widths for the lettering, and predictable curves. But it got to be too complicated and I gave up. But I still may come back to other knots someday.
In the letter A that you shared, is that lion biting itself? Or it just happens to look that way?
Hi Brynn,
Your approach to reproducing Celtic lettering using Inkscape mirrors my own in that I too did not want to simply use Inkscape to produce something that looks hand drawn but instead approach the topic as if I was producing the design from scratch in Inkscape using all the tools available. That’s why I chose to put each element on a new layer and to draw it as an enclosed path that can have both a fill and a stroke. Also I drew the winding bits e.g. neck, mane and tail as a single Bezier path and then increased the stroke width to the approximate width of the original and then converted stroke to path (to give the opportunity for both a fill and a stroke colour) and, in the case of the neck, I duplicated the path and outset it to give me the opportunity to have a separate colour for the neck border. Only then did I start cutting up the paths to give the impression of interweaving. I am going to persevere with this approach and will post future results in my gallery if you are interested.
By the way you are right about the lion biting its own neck! It was the way the monks were able to use animal characters to represent joined up letters. If you are interested the book I am using as reference is “The Celtic Design Book” by Aidan Meehan who has made an in depth study of Celtic design and explains how the monks did it using the tools they had to hand. It is truly fascinating. Here is a link to an online version of the Book of Kells from the ninth century which contains some truly staggeringly intricate designs that Aidan has reproduced. Enjoy!
https://digitalcollections.tcd.ie/home/index.php?DRIS_ID=MS58_003v
Oh, that's very interesting! Thanks for the link. I'll have a look when I have a chance.
Yes, the stroke width and path offsets can be used to keep some of the widths consistent. But I still always struggled with the main...string or ribbon object, or whatever it would be called. I could never keep the basic object consistent width. I thought I was going to have to get into angle of lines and maybe some trigonometric things (which I last studied in the late 1970's, for goodness sakes!).
Hhmm....maybe I just now had an insight! Maybe it just needs a little open discussion to grease the old brain wheels, as they say 👵
Hi RodHull,
hope you are getting further with this.
Just made a challenge about drawing a single knot in this topic. If you have the time I'd suggest looking at it -basically reducing the problem to a basic level.
Two more.
A recent and an oldie you may find interesting.