Over the past few years, I’ve done a few things in regards to comics. One of them is creating a comic manager for Krita, another is doing work on Peruse. But one thing that’s also changed for me is the comic template I was using.
Originally, I used an A4 based comic template, with margins of 15 mm at the top and bottom, and margins of 10 mm at the left and right, and an overal bleed of 5 mm. I had been doing so as a teen, as this is relatively normal for European comics culture. But recently, I’ve been shifting towards A6 size comics.
So, for those of you not familiar with ISO paper sizes, they are proportioned so that if you cut them in half, the ratio of the resulting halves is exactly the same as the original paper, but with exactly half the surface. This means that the width and height of a given reduction is not half-sized, however, being closer to 70% of the original paper dimensions. However, fold again, and the resulting paper is half the original size’s dimensions, with the surface being quartered. So A6 is basically 1/4th of the original size I was working at.
The primary reason for this is that I was having issues with perfectionism in my art, and having less room also meant less room for perfectionism. Other reasons that helped is that I originally started this with a small booklet in real life, doing layout. It took up much less space than doing an A4 comic, and I quickly realized that I could make perfectly readable comics at A6. This is in part because an A6 comic can be held closer to the face, so smaller lettering compensates for itself. It also has the advantage of being easier to scale down for mobile phones like this, though that is mostly a perk.
Still, while doing so, I noticed my template didn’t make much sense.
This is my original A6 template, created in Inkscape. The margins are 7.5 mm at top and bottom, and 5 mm at the sides, leading to a safe area of 95 mm * 133 mm The bleeds stay the same.
In the bleeds, I had set up 12 division markers, so that the page could be easily subdivided into 3 parts or 4 parts. You will notice that these encompass the whole page, instead of just the safe area. My thought was that this would be useful for pop-out panels that continue into the margins. As I was using this template, I realised I actually never do those (nothing ideological, just haven’t found a moment to use it), so it was effectively useless for me.
So the adjusted template puts the division markers along the safe area instead. But then the gears in my head started to turn…
Gutter Grid
See, there’s a bit of a problem with dividing a page in quarters or thirds like this, especially with regards to the gutters (the spacing between panels).
You see, if you divide a page up into, say, three parts in the width and height…
And then expand those lines to be your avarage gutter size. 5 mm, 4 mm, 2.5 if you’re doing an A6 comic, doesn’t matter. You will notice something annoying:
The panels on the inside are bigger than on the outside. This is simply because increasing the gutter size evenly on either end will just result in proportionally more being removed from the beginning and end than from the middle.
There’s another related problem, and that is it being kind of hard to keep the gutter size consistent on a computer. Like, it is pretty easy to have even spacing between rectangles in Inkscape or even Krita, but you can’t say “Please resize these rectangles so that they have the same fixed spacing between them and also don’t overflow into the margins”.
So, I ended up thinking: Maybe its possible to have a grid that’s basically the gutter width in either side? Page grids are nothing new to comics, but they tend to be panel grids before anything else, with the American 3×3 panel page being a well-known quantity, but I always felt it was a little bit too much structure for me. But with a gutter-based grid, I’d exactly know how much would be taken up by the gutter, and if I am drafting the layout, I’d be able to tell the panels are the same size, simply by counting the grid squares.
I wasn’t sure how to approach this mathematically, so I ended up just making a spreadsheet which listed out the results of (i*x+ (x-1)), with x being the 3 and 4 (because I wanted to be able to quarter and third my pages), and i being a continuously increasing number. My goal was to figure out if there were numbers that were the same value for both of those.
Looking at the resulting list, it seems a more efficient way of calculating this is to multiply the numbers (3 * 4 = 12), and then multiply it to increase the resolution ((3 * 4 * 3 = 36) – 1 = 35, for example), finally subtract 1. This means that the minimum that can be divided into 3 and 4 panels with gutters is 11 (3 panels for 3 wide, 2 cells for 4 panels). Similarly, a page that should be divided by 4 and 5, has the minimum of (4 * 5 = 20) – 1 = 19, and for one that can be divided by 3, 4 and 5, (3 * 4 * 5 = 60) – 1 = 59.
Then came the moment to select which resolution I wanted. I wanted my gutters to be around 2.5 mm, and also square, if possible (there’s traditions where the horizontal gutter is larger than the vertical, more on that later). First I searched for the width the width of the vertical gutters. You can get this by taking the safe area (in my case, 95 mm), and dividing that by the gutter width (95/2.5 = 38). The closest in my list compared to this is 35, which would lead to a gutter width of 2.7~ mm. Then for the height, multipling 35 by the ratio of my safe area (133/95) is 49, and the closest to that is 47, leading to a gutter height of 2.8~ mm, which isn’t perfectly square, but good enough.
35 * 47 have 1 removed on each side for the gutter, but whenever you want to calculate how many cells a panel for a given subdivision is, you add the 1 back in, and then subdivide. So…
(35 + 1 = 36)/ 3 = 12. Then remove 1 from that for the gutter again, (11), and that’s how wide the panel is if it’s a third. Now, 36 and 48 are both in the multiplication table of 6, which meant that they can subdivided by panels of 5 wide in either direction, panels of 2 works as well. So for the final template, I ended up doing a sort of bullet journal grid, where 2 and 5 are marked a bit darker:
The result is a page that can easily be divided up into both 6 and 12 panels:
16 is of course possible too, but in practice, most comic pages are 6 panels, sometimes 8 or 9, but rarely above that (This is largely based on the total image size. Full-page news paper strips can easily have 16 panels and be readable, but most comics hang around the A4-A6 size).
Other gutter options.
So, this is mostly following my particular tastes. There’s other grids you can try out this way. For example, maybe you prefer to be able to have division by 5, or perhaps you’re working in a tradition that where the gutter isn’t square (In Europe and America this usually happens with comics that have been syndicated in newspapers, one horizontal strip at a time, while in East-Asia this is used to indicate whether the primary reading direction is horizontal or vertical).
For division by 5, one of the dimensions needs to be either 59 or 119, but you have to choose which one. If you want to have the width divided by 59, you multiply it by the ratio of your safe area. In my case that’s 59 * (133/95) = 82.6, to which the closest dividable by 3 and 4 is 83 (leading to a gutter of 1.6×1.6 mm). You can also do the opposite (Either 59 / (133/95) or 59 * (95 / 133) ), and then you’ll end up with 42,1, the closest to which are 44 (dividable by 5 and 3), or 39 (dividable by 4 and 5), leading to a gutter of 2.1 x 2.23 mm, or 2.4 x 2.25 mm.
For non-square gutters, you first find the width or height, and then divide/multiply that by the ratio of the gutters.
(grid_division_width / (gutter_height/gutter_width)) * (safe_area_height / safe_area_width)
So, for example…
(35 / (5 / 2.5)) * (133 / 95) = 24.5, closest is 23, resulting in (2.7×5.8 mm gutters).
(47 / (5 / 2.5)) * (133 / 95) = 32.9, closest is 35, resulting in (2×3.8 mm gutters).
(47 / (6 / 2)) * (133 / 95) = 21.9, closest is 23, resulting in (2×5.7 mm gutters).
If you select the height first, you will need to multiply instead.
(grid_division_height * (gutter_height/gutter_width)) / (safe_area_height / safe_area_width)
So…
(47 * (5 / 2.5)) / (133 / 95) = 67.1, closest is 71, leading to 1.3×2.8 mm gutters.
(59 * (5 / 2.5)) / (133 / 95) = 84.2, closest is 83, leading to gutters of 1.1×2.23mm.
For having the wide part horizontal, you will need to have the safe area ratio be (safe_area_width / safe_area_height)
(23 * (6/2)) / (95 / 133) = 96.6, closest is 95, gutters are (4.1×1.4 mm)
Final notes:
Note that this doesn’t automatically work for diagonal lines. The best way to handle diagonal lines is to just boolean the vector in question with a gutter-wide rotated rectangle. If you try to snap the angle to the grid, you’ll end up with gutters that are mostly too thin, something which you can proof with trigionometry. Perhaps it might be good that if we’re ever going to create a gutter-cutter for Krita, it’ll be able to snap to subdivisions of 3, 4 and 5 without a gutter-grid.
Another thing that was kinda nice when I was drafting layouts with this is that the grid of my template ended up being roughly 8 postscript points (Convert 2.8mm to inches and then divide by 1 / 72 ). My preferred font size for A6 ended up being 10-11 points (cap height 6~ points, x-height 4~ points), so when drafting I knew that 3 to 5 grid heights means 2 to 4 lines of text when I start typesetting.
Being dyslexic, I have a lot of opinions on font sizes. The font I created also has optical size variation, so at some point, when I feel ready to talk about my custom comic font, I’ll go into detail for that.
