Show HN: Make comic book layouts in the browser | Hacker News Reader

Show HN: Make comic book layouts in the browser

andrewfulrich.gitlab.io

192 pointsTiredGuy34 comments

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

And mm or cm would be wonderful too!

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:

This great work! Thank you for that. I would love to see some real life examples. Would you mind to share some links?

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?

Sure thing, I'll make a quick video tonight.

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.

Thanks for the explanation. Single clicking on a panel and then clicking open on an image wasn't working for me.

This is awesome! I wanted a way to make a photo collage of our dog for my girlfriend and this looks like a great way to do it. Thanks for sharing!

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.

And also an undo feature would be good.

Awesome work otherwise!

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.

This is awesome, love the grid that moves around with the cursor.

Bug or user error, hitting delete to remove a point tries to navigate back in the browser. Maybe a preventDefault() missing there?

Good catch! I'll put in that fix tonight, thank you

The fix has been pushed up- thanks again!

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).

Same on Windows, Firefox, Surface Book. And the zoom centres around the top left of the viewport rather than the cursor position.

Also it doesn’t catch touch-based zoom, leaving the browser zooming the entire viewport rather than just zooming the comic part.

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.

[1] https://vimeo.com/486500106

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.

Glad to see someone else in this space!

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!

Nice app! Almost makes me wish I had an iphone. It's a very fun idea.

Oh neat! Why did you discontinue Layout?

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).

Does not seems to work with Safari 13, had no problems with Chrome on macOS.

Really great, did show this to my daughter that is into comics!

That's awesome, I hope she enjoys it! Thanks for the warning about Safari.

also works perfectly on firefox on macos.

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

And maybe a button to lock the helper lines?

If you could export this to be used as a web page layout when it's done, that would make some fun pages.

I really like the “local” grid idea: visible only around the zone of interest.

Maybe the first time I see something like this?

Wow, very cool. I've been playing with doing this in Clip Studio, like a WebToons thing.

How does one star the repo?

It's a gitlab repo located at https://gitlab.com/andrewfulrich/panelle/ Create a gitlab account if you don't have one to star it :-)

Reply on news.ycombinator.com