Published comic artist here (more info in bio link). This is super cute as a browser play-around project and it was pretty fast to grok what you're supposed to do here. can't imagine that was a small feat.
Not sure if you're looking for feedback or just wanted to show it off (both are valid), added some thoughts below if you had bandwidth and want to take it further:
- making it intuitive to a) be able to save b) actually know you can save the document would be wonderful - instantly printable jpg/pdf would be the best file types.
- being able to insert placeholder images would actually increase the usability for quick comic tests; this is one thing that quick and dirty traditional thumbnails can't do.
- i would use inches as a measurement instead of pixels if you're trying to gear this towards more for usability - i can see this as printables for 'how to make a comic' classrooms?
It's wonderful to hear from an actual published comic artist! This is what I love about HN. Thanks very much for the feedback. I especially like the idea of being able to switch units to inches instead of pixels- I'll probably add that soon. Placeholder images are definitely a good use case for this too.
Also note that things like Gimp will ask you for the DPI when you import an SVG (which is what this exports), which is another good place to convert to inches
Hey thanks for checking this out. I'm no expert at making comics, but it's something I occasionally enjoy, and I wanted to see if I could make a tool to make it easier on myself, specifically the step where I'm ready to make straight, uniformly-margined, custom panels. This is the result, and I hope you have as much fun with it as I have been. You can make panel shapes with any number of corners, snap to the grid to ensure uniform margins, snap to guide lines to go beyond the grid while maintaining alignment, save/load your work directly to/from svg for multiple sittings, adjust page dimensions, stroke etc. with just the scrollbar, etc.
If you end up using this to make something, I would love to see your work! I'm @andrewulrich on Twitter - feel free to reach out and share. Also feedback and code contributions are welcome:
Thanks! I don't have examples online at the moment, but I can probably upload some this evening. I probably should post some examples- thanks for the feedback.
i think a short video or some example preset outputs would be nice. its not clear how to use this even from the tutorial - but i'm not the creative type. am i supposed to upload images to create the cover or is it just gray triangles and stuff?
The gray shapes are the panels, and if you hit preview, they'll turn transparent to show what they look like. The preview mode has a save button you can use to save your work.
You can also doubleclick those gray shapes to upload an image into the panel. Position/size it by dragging/scrolling.
If I had to ask for a feature, it would be to make this "layouts for the browser" instead of/in addition to "in the browser". Where the output would be html/css to do the masking so you could assign an image to each panel.
You can assign an image to each panel by double-clicking the panel and uploading the image. It does the masking through svg. You can then save off the SVG by going to preview mode and saving. Sorry that wasn't intuitive. TBH I was trying to prioritize a minimal, efficient, and effective workflow over first-time intuition. Another person suggested I make an instructional video, which is probably a good idea. I'll try to do that this evening when I'm free.
From a quick test, it's really a good experience, and would make a nice vector editor more than just comic panels really.
One thing maybe, not requiring the extra guide lines would make it clearer. A bit like what Sketchup can do where you don't have to add guide lines for the snaps to work as most of them are implicitly defined.
Thanks! I really appreciate the feedback on the experience.
I wanted to keep the scope as small as possible first time around. Undo is definitely under consideration.
Note that the guide lines are only really necessary for when you have certain diagonal edges you want to align, and you can even get away with some diagonals without using guidelines if the adjacent panels are similar in dimensions.
Neat! Quick feedback point: the pinch zoom works the opposite way from every other program, at least on my MacBook (macOS 10.15.7, Chrome latest, 87.0.4280).
Neat! I've been making an iOS comic book layout app[1]. My solution is somewhat different from yours. Cool to see that someone else is seeing the same issue. I've found no other apps solving this problem, and saw no interest when I shared the video around. But maybe that's changing.
Egon, that's really cool! It reminds me of when I used to use Manga Studio- iirc it had a layout editor with a similar approach where it would split panels based on a separator line you could drag at various angles.
I'm the author of an app called Halftone 2 (and previously, Halftone) for iOS: https://juicybitssoftware.com/halftone2/. It used to allow for custom page layouts that were designed within another of my--now discontinued--apps called Layout. In fact, the layouts that ship within Halftone 2 were created this way. I like what you've done here!
It would have required some significant upgrades to remain compatible with iOS advances, and it wasn't selling as well anymore (after Instagram released their own "Layout" app).
Woudln't it make sense to just draw the gaps as thick lines? More like this, but in pretty and with your great helper lines: https://i.imgur.com/TFrEDxT.png
Not sure if you're looking for feedback or just wanted to show it off (both are valid), added some thoughts below if you had bandwidth and want to take it further:
- making it intuitive to a) be able to save b) actually know you can save the document would be wonderful - instantly printable jpg/pdf would be the best file types.
- being able to insert placeholder images would actually increase the usability for quick comic tests; this is one thing that quick and dirty traditional thumbnails can't do.
- i would use inches as a measurement instead of pixels if you're trying to gear this towards more for usability - i can see this as printables for 'how to make a comic' classrooms?