This page took three days to put together â it is very long but hopefully it has enough information to be of help to you! Iâm sure itâs not perfect, but Iâm done with it for now. Feel free to ask questions. My apologizes to anyone who actually decides to read it!
WARNING: Spoiler pages for my comic âThe Stupidersâ ahead!
Due to health issues, I had to stop my comic a while back (looking forward to getting back into it â prepping my gear and working on my health!). I actually came here today to post a feature request which happens to line up exactly with what you are requesting: a tool I used for making my webcomic panels! One of the best parts is that this tool is great for a lot of things: designing layouts for books, magazines and websites. Itâs even great for painting â the reason that prompted me to put in a request today â I tried to inch around this toolâs absence in my painting today and reaped frustration as a resultâŚ
What is this wonder tool, you ask? Well, it is the selection tool from GIMP 
When you select the selection tool â either the rectangle style or circular â and make a selection, you can manipulate the shape and size of the selection by grabbing the outlined box (located on either corner and the four points of the compass â top, bottom, left and right). If you have been clicking around and lost the overlay, you can click on the selection again â either square-style or circle â and re-prompt the overlay so you can continue to manipulate it.
Of course, it would be even better still if a complex selection could be manipulated, too â even if it was limited to stretching the selection in one of the four directions. In the past, when I had a complex panel shape that needed stretching â either for more space or because it didnât line up â I ended up cutting the end off the panelbox, dragging the end where it was supposed to be and creating new lines to fill the gap (often with â you guessed it â the selection tool!).
Page with panels, before inking (but with dialog boxes, which normally come lastâŚ).
Overview of my panel making daysâŚ
This is from memory, but since I did so much of it, I can remember it pretty well.
- Make a script and thumbnails for the layout of the comic pages.
- Sketch out the page.
- Scan the page in.
- Open my page template, paste in the scanned sketches and cut them into segments by panel.
- Create flat black panels (set at a low opacity) and arrange the sketches on the page.
- Fix any issues with the original drawings, redrawing portions as necessary.
- Use the color select to select all the black panels.
- Use shrink selection.
- Feather edge by one pixel (to create the illusion of the line size I want â the lines, measured in pixel size, arenât a whole number).
- Delete the selection
- Turn layer visibility for sketches off.
- Color select the gutter (area between panels)
- New layer under panel layer â fill selection with white (this makes the gutter white).
- Erase any unwanted white (to show splash panels, open ended panels, etcâŚ)
- Export layers for inking and lettering.
In the case of sound effects that hang out of panels with sunburst-type âbubblesâ around them, they are usually added over top of the panel lines during inking â the panel/s beneath them are either whited out in the inking stage or coloring stage (or both: solid white ink and then a subtle white gradient/pattern).
Letâs talk more about number 5 â making those all-important panels!
- Create flat black panels (set at a low opacity) and arrange the sketches on the page.
This is where that selection tool in GIMP really shines (I miss it so much in Krita!) - making panels of an exact size and aligning them perfectly is not a problem at all!
⌠An easy way to make a page full of simple, similar panels. Sometimes thatâs all you need.
For a simple row of rectangular panels:
- Although I would sometimes use a guideline to snap a line of panels to the same row/column what I usually did was simpler: (while zoomed out) just eyeball where I want the line of panels to go, make the selection and fill the whole row in with black.
2.With the panel layer set to a low opacity, pop the sketches for those panels into place.
3.Get picky about panel sizes: If the row of panels is not the right height (or in some cases, width), zoom out and make a general selection, zoom in and drag the edge of the selection box to exactly where you want it and either delete the contents of the selection to shrink the panels or fill the selection to expand it to exactly the right size (down to the pixel!).
- Make a gutter-sized selection, use it to make the gutter: Now select where you want to cut the row into panels with the box select and drag the edges until the pixel display shows that it is the current default width (or, in some cases, length) you are using for your gutter â I believe mine was 5px. (GIMP will constantly show the real-time width and height of an active selection in pixels, which is wonderfully handy. It will also display itâs x and y coordinates in pixels which is, occasionally, very helpful.)
- You can reposition the selection you just made to where ever you want a new gutter the same width as your last! Keep cutting until you have all the perfectly aligned and identically spaced box panels you want!
âŚGetting more complexâŚ
Sometimes you want to make panels of different sizes but have them aligned by one side. This is also very easy. For this example, weâll say we want to make a row of two box panels but we just didnât feel like doing it as outlined above (or maybe we changed our mind about the layout after making the first box panel and now want a second).
- We have already made a panel on the left side of the page â now we want another to itâs right.
- Just by sight, make a selection where you want the second panel to go, overlapping one side over the edge of the panel you want it to align with â in this case, since the first panel is to the left of this new selection, we will have the left edge of our box selection overlapping that side.
- Zoom in and align the top and bottom edges of the selection box with the corresponding (top and bottom edge) outside edge of the first box â this will make the selection the exact same height as the first box panel. If you want to check the size of a selection against another panel/object this is also a great way to do it â just grab the side of the selection and drag it over, then drag it back (I think you can also ctrl-z it to return the selection).
4.To create the gutter between the two panels, click the edge of the selection box overlapping the panel that you were comparing it to. Drag it to the outside edge of the comparison panel (so that, if you were to fill the current selection, there would be no gap between the two panels, the old and the new).
- Making sure that you are zoomed in enough to see some pixelization, drag the edge, pixel by pixel until you count out your default gutter size (so, in my cause, that is 5px â so I would drag it 5 clunky spaces to the right).
- Fill the selection with black to make a solid panel.
- Alternatively, skip step 5 and after step 6, make a selection 5px wide aligned over the left edge of the newly created panel and delete that portion of it (GIMP actively displays in real time the width/height of the selection, which you can adjust by selecting and thdragging itâs edges and you can click the selection to move it if it is in the wrong place).
The introduction of an option to round selection edges eased the burden of creating rounded edges by hand but the creation of some panel shapes still required the merging of two layers. For example, to create a panel with both rounded and unrounded edges, you would want to set up your box selection, round the corners and fill it with black, then unround the corners, select another panel layer and fill in the same area. Then erase the unwanted parts until they look the way you want when stacked at full opacity. Make sure to merge before hollowing the panels (which turns them into boxes). The same with a shape such as a tall, domed rectangle: make the rectangle first, fill it, and on another layer make a circle selection and resize it until it lines up with the vertical edges of the rectangle and move it until the center of the circle is over the top line of the rectangle.
Not all panels are rectangle and circles. Sometimes you need to make custom shapes!
To create the effect of a panel that looks slashed down the middle in two, create a hard edged round brush (with anti-aliasing â too hard and youâll end up with bad, spiny edges) with a width across in pixels the same as your desired gutter width, turn on the eraser and draw a straight, angled line (holding shift to snap the line straight is a great help) where you would like the gutter to be, erasing that part of the blocked in black panel.
The jagged gutters on this page were added in during the inking stage - I drew them in by hand. So, thatâs an option, too.
Perhaps it could be better ifâŚ
If the selections could be saved (as actual selections) and displayed as vector lines, then they could be imported into Illustrator or at least scaled up for printing. Saved selections would also allow comic creators to change panel sizes on the fly easily, which could also be handy for other kinds of layout design and even facilitate the re-use of some pre-made panel layouts. To facilitate the easy erasure of unwanted panel edges while maintaining maximum manipulation options of circular selections, there should be an option to apply a visibility mask to the layer/group.
An auto-fill gutterspace layer â which detects the âwhitespaceâ -aka, gutter- between the saved selections in a layer/group could be problematic as sometimes panels are included overlaying a splashpanel (in full or in part) or portions of a panel are excluded (erased) for effect. Having an option to apply a visibility mask to the auto-fill layer could help with this.
This page shows comic panels nested in other comic panels, which could pose a problem for an âauto-fillingâ gutterspace.
Since some people will not want white gutterspace but another color/gradient/image, the auto-gutter should probably be something that is applied/attached to another layer (filter?).
Of course, auto-fill gutterspace is not a make or break feature (and could be a huge pain to get to work just rightâŚ) but we were all thinking about it
Pannels â A âreverseâ mask â where the lines get their color/value from another layer â might be handy to those who want to apply a color/gradient to their lines that goes beyond the normal options.
An option to curve or even bevel the corners or individual corners after making the selection would be great (then I wouldnât have to use manual work arounds).
Anyways, you asked for a step by step of the comic panel making process and how to make it a reality in Krita; this wasnât a quick tutorial to write and Iâm sure it will take a while to read but I hope it is helpful and provides you with what you need. I also hope that GIMP-style select will be in Kritaâs future â it is one of the only reasons I still boot up GIMP for and, sadly, itâs not that easy to work on the same file with both GIMP and KritaâŚ
Since you asked for examples of the kind of panels we use, more complex pages can be found at these links:
Now you know all about how I make panels, as requested. Hope this helps!
