New tool for Comic Panels ("Knife Tool") - asking for feedback

I’m working on a new tool for comic artists, it’s gonna be a tool that works on any vector shape, but it’s made specifically for comic panels. That would allow artists to use any kind of vector shapes and tools to modify the panels together with the “smart” operations of this “Comic Panel Editing Tool”.

The Merge Request (work-in-progress) is here: Draft: Add Knife Tool prototype to Krita (!2331) · Merge requests · Graphics / Krita · GitLab and you can already test early versions of it: click Pipelines, then click on “[your OS]-build”, and somewhere on the right there should be a section called “Artifacts”, that’s how build files from the pipeline (aka what you want to download and run) are called.

It will be all in one tool, it will just be different modes, like the Transform Tool.

(Every single shape above is it’s own shape completely independent of others, as if you made all of them using polygon tool. It works for curves too, but it will “linearize” them right now, so it’s destructive, though the shape would still look pretty nice).

A. Adding a gutter (“Knife Tool”)

Has three presets for gutter widths (GUI not final… especially the icons):

It has been suggested that i should make that fourth option, “automatic”, where it would use the assigned thickness from presets based on angle.

It already works, the only thing left is polishing the GUI. However if you have any suggestions regarding the UX or UI or usability, please do say so.

Right now it takes all selected shapes, and for every selected shape, if the gutter crosses it, it divides the shape into two independent shapes with a gap in between the parts. The end result is vanilla/totally normal vector shapes.

  1. Selecting shapes using the Select Shapes Tool is an annoying unnecessary step. And right now the tool cuts through all selected shapes. You can select only shapes to cut to limit the effect, but that’s even more annoying. I’m thinking of making it cut only through shapes the cut line went through. So, if the cut line went through shapes A, B and C, and it started inside shape A and ended inside shape C, should shapes A and C be also cut, or only shape B should be cut?

  2. Do you have any other ideas how to make it nice and convenient?

B. Removing a gutter

(Currently with a lovely pixel “art” zipper temporary icon).

The current usage is: make a line starting from one shape and ending in another, crossing through the gap/the gutter. Note that since it’s all on vector shapes, it will only be as smart as I implement it… so it will probably need a lot of testing (not yet; there is at least one known issue) to cover all the actually important usecases.

It probably doesn’t need any options. And right now it only removes one gutter at a time, in the future I will try to make it work with multiple at once.

  1. Do you have some ideas on how to make the canvas decorations for this mode? For the Knife Tool, I made two lines showing the gutter width, capped with half-ellipses, so it looks quite nice, but for this, I’m not sure. A single line is both hardly visible and looks kind of ugly.

C. Selecting points and edges

It’s a bit out of order but selecting points and edges would allow me to make some other modes smarter. I guess just clicking should select the closest edge or point. And it should be shown differently than Select Shapes Tool shows selection.

D. Editing a gutter

  1. What kind of options to edit a gutter after creating it do you need?

Moving a gutter end

It would automatically keep the width.

But, how to select the end of the gutter? Just by clicking in the area? (Note that since it’s all normal vector shapes, gutter is actually just an empty space, it’s not a thing I can select and move. That is design decision, to allow for all kinds of wild layouts).

I think that maybe with selecting edges & points it could be made easier, but then it would be more annoying for the user. I guess it should be possible to handle the most basic situation (with completely parallel lines as edges of the gutter) without more user interaction, and then if they were doing something wild like not-parallel lines, they’re need to select everything themselves beforehand.

(Blue X is the place where the user clicks)

Moving a whole gutter

How? Why? Wouldn’t removing it and making a new one be easier/faster/more convenient?

Editing the width of a gutter

I think it’s similar to moving a gutter end: for the easy situation, I can calculate it without more user input; and if they do something wild, maybe I will be able to account for that if they select everything that’s participating in the editing.

What options would be needed? Would “increase/change the width on one side” be needed or not really? (I might be too ambitious).

E. Editing comic panels themselves

What kind of features that aren’t available in the other tools should be here?

F. Snapping

What kind of snapping/magneticism do you expect? Something to make either creation, or editing panels way easier.

G. Anything else I missed

Note that this is all just for editing the shapes of the panels and editing the layout. The Comic Panel Layer like Clip Studio Paint has them is a different feature, and will be probably implemented too, they’re designed to work in tandem. That layer would have vector shapes under the hood too so all the normal tools and this tool here too would work for them.

Likewise, “project view” and “bleeds/guides on the edges of the page” are separate features, and so is “create a regular grid of 2x3 comic panels within the margins”. And if you have even different ideas that don’t seem related to the tool I described, you can share them in this topic: Comic workflow - general ideas and feature requests (including long webcomics!)

But if you have some ideas for features regarding creating or editing panels or gutters, please do share them here.

20 Likes

Exactly what I need for working with comics.

Thank you for your work.

Is it possible to set the gaps not only in px but in mm too?

Since most of the time when I read about panel gaps they talk about millimeters because of the traditional past of measurement.

3 Likes

Will there be an option to sharpen the border lines, such as we have with the vector layers?

3 Likes

Seconding the desire for different units - I work for print a lot of the time and use different resolutions for different projects (but the same print sizes), so pixels aren’t very useful to me for this stuff.

For editing gutters, I’d expect to click anywhere within the gutter and have it be selected like its own vector shape (albeit one that’s subtracted from the main one), and once a gutter selected, I’d want to be able to see the end-points which I can edit. If multiple gutters intersect where I clicked, I’d expect to be able to cycle the selected gutter by clicking or to be able to open a context menu that lets me select different ones (but since they’re not named, that would probably not be good).

I really like the ability to set 3 different gap sizes and the auto option. It would be nice to be able to create any number of presets (with custom names) though, rather than just having the three. I can make do with 3 just fine, but it would be nice to save my less-frequently used sizes as well.

For the automatic mode, it would be nice to be able to set (custom) ranges of angles rather than just Horizontal/Vertical/Diagonal. For example, I’d prefer to consider panels within, say, 8 degrees of horizontal as horizontal (ditto for vertical) rather than Diagonal. This could be implemented as fully custom settings (so, “add angle range” → choose min/max angles → select gap size) instead of the 3 you currently have, or as an extra field on Horizontal and Vertical where the user can set wiggle room (0 by default? the allowed angle range should be [0, 45) degrees).

An occasional need I have is cut a specific size off the edge of a box (or group of boxes/panels), i.e. cut in such a way that the side of the gutter aligns with the edge of the box, shortening it instead of cutting it in two. It would be cool to be able to do this without having to set up assistants or switch tools, but I understand if you’d rather keep the interface simple and not offer a bunch of extra snapping options.

Speaking of snapping options, I haven’t tested it, but can this snap to assistants? For parallel diagonals, fan-shaped panel layouts, and the like, assistants would be quite useful.

One panelling need not addressed by any tool I’m aware of is that of panels that are open on some sides but have a panel border on others. They can be created by masking off or rasterising-and-erasing the unwanted panel borders, but I wonder if it might be within scope of this or other existing tool to, for example, make it so outlines are applied only to some edges of a shape rather than all of them?

Edit: Not sure this is relevant, but a way I sometimes make panels is to have the gutters be a white shape with a stroke, and the actual panels be holes in it. This way it can sit over my art and I don’t have to worry about clipping the art to the panels, I can just draw underneath and the gutters cover up my sins. Since this tool works the opposite way, that presumably won’t work with it, unless I take the result and subtract it from a shape filling the page. Perhaps there could be a helper action to invert the resulting shape? This might be useful for vector editing outside of panel borders, too.

1 Like

Those are normal vector layers, so yes.

I’ll add it to my TODO list. It seems pretty important, yeah.

3 Likes

I’m not sure… how important is it for you? I feel like it could often be an overkill even for advanced users.

What about just one setting that allows you to have a little “wiggle room” around the horizontal/vertical angles? For example, if you choose 5 degrees, then everything within ranges of <-5, 5> degrees, <85, 95>, <175, 185>, and <265, 275> degrees would be considered either horizontal or vertical. Or is that exactly what you’re asking about?

That’s actually something that I consider. My ideas for that part are still a bit blurry though. I’m not sure how to make the UX for this and what exactly to make. But just editing one edge by moving it parallel-ly to where it was before, and not moving any other edge (like it would happen right now with the standard vector tools), is something I want to make.

That sounds good, but might need to be a stretch goal.

In theory, we could have them be “open”. It’s not supported yet and it’s more of a future thing, since even if I implement it, it could only work for one edge. On the other hand, I was already considering something like “add an assistant to help you draw the border” so you could paint the border using normal brushes. But then, they won’t have such nice sharp corners like @Someonesane asks for…

It could, in theory, be implemented for the Comic Panel Layer which will be a complementary feature to allow the masking you talk about. That could build upon the vectors and for example remember the edges that should be hidden. I’m not promising it, though.

This is a good idea (and very easy to implement, yay), though for the usecase you speak about we do plan to have that special layer in the future, too, to allow the masking. It would work kind of the way CSP’s Comic Panel layers work. (I’m not copying their feature but I am heavily inspired. It does seem to work nicely, and I plan to make Krita’s even better, of course).

2 Likes

Any number of presets is not important to me, just a nice-to-have. I’d probably use the Thin and Thick presets the vast majority of the time, and manually tweak Special as needed, even if it is usually just some multiple of my Thick gap.

A single wiggle room setting for both Vertical and Horizontal would be fine. While there are some scenarios where I might want separate ones (e.g. pages where I want a “tilted” effect), they’re rare and I can just temporarily tweak the wiggle room value in those cases.

For open panels, I don’t expect any special treatment of the panel-ends, they should have whatever ends are set in the vector layer’s settings. These kinds of panels tend to have their borders artistically feathered/dithered out, which is beyond the scope of this tool. So, all I’d want the tool to do is give me a clean base to work from, while maybe giving me a quick way to hide an entire side of a panel so I don’t have to manually erase/mask it. From there, I’ll mask/erase/extend using other tools.

I am not personally interested in a special assistant for panel borders because the existing assistants already do a good job for that. While it would be nice to have an assistant that both makes sure both sides of the gutter are parallel and the right distance apart, I fear using the assistant would not actually save time over using something like this Knife Tool and then making manual tweaks afterwards.

I’ve never used CSP so unfortunately comparisons to its features mean nothing to me, sorry. (And these days, this invert use case isn’t actually one I encounter much at all in my work. Addicted to overlapping and broken panels, so I need everything that isn’t a border to be transparent, and even then I’ll probably end up rasterising the layer and doing horrible surgery to it xP)

1 Like

Hi! I think the first version of the tool is already relatively convenient to use, so if you want to check it out, you can download it and test it if you’re on Linux or Windows:

Linux: https://invent.kde.org/graphics/krita/-/jobs/2766018/artifacts/browse/_packaging/
Windows: https://invent.kde.org/graphics/krita/-/jobs/2766019/artifacts/browse (use the .zip file)

The links expire in a week, but I can still rerun them if needed. Also in that case you could just check the latest version:

Instruction how to get from a MR to the file to download
  1. Go to the MR: https://invent.kde.org/graphics/krita/-/merge_requests/2331
  2. Click Pipelines
  3. Click on the latest pipeline → find a number that starts from # and click on it
  4. Click windows-build or linux-build
  5. On the right, you’ll see section called “Job Artifacts”, click “Browse”
  6. If you’re on linux, click on the “_packaging” folder
  7. Download the file

Right now it looks like this:
obraz
obraz

The icons are not final, I just had to put something.

9 Likes

I love it! Bravo for this amazing work :+1:

12 Likes

Wow, it’s really cool and thank you for the showcase!

Makes me wanna draw a comic now :laughing:

3 Likes

@tiar this is an awesome tool. Thanks for working on this and making it this nice. Thanks @Deevad for the demo.

@tiar I don’t know if requests are allowed now. I have a request, in addition to straight line gutter/ panel gap drawing mode an there be a freehand panel gaps drawing mode. Imaging a panel with curved shape like an S

Requests are allowed. I’ll need to give it some thought but I think it should be possible, it might take some time though. (Btw the resulting panels are normal vectors so in theory you could probably achieve it with a straight ruler too… but it would be more difficult).

If you have any other requests or suggestions or ideas, please do write them!

Just for me, but how does a user know, that he/she is expected to draw a vector-shape before using the new tool? Is there an error message ?

I can understand, that we are only using the line-tool to cut, but could we also add a bezier-cut-tool later on?

2 Likes

Hi @tiar,
I just finished this script for other purposes, but it seems similar to what you are trying to achieve. It’s just something to offset curves, but I thought it might be of interest to you. Why don’t you make the tool in such a way that you draw the splitting lines/ curves as vector objects themselves and use an attribute system where you can add the with of each panel divider, so you can always make adjustments to the existing panels and don’t have to delete the ones that are no longer applicable?

4 Likes

New icons:



7 Likes