Comic Page Layout Machine


(in inches)

Page Width: sets the wideness of the whole page

Page Height: sets the tallness of the whole page

Header: sets the thickness of the header area at the top

Footer: sets the thickness of the footer area at the bottom

Margins: sets the border thickness between the frames and the outside edges of the page

Gutters: sets the thickness of the space between frames

Left Spine: sets an extra margin on the left for a spine

Right Spine: sets an extra margin on the right for a spine

#of Rows: remove or create rows of frames

Frames: sets the width of the frames relative to each other for each row

Resolution (DPI) sets the resolution of the final image:


Live Width: width from left edge of frames to right edge of frames "

Live Height: height from top of frames to bottom of frames (not including headers/footers) "

Page Area: total square inches "


I made this because I was tired of measuring out frames and gutters and margins for different comic book page layouts. This tool outputs an image using your definitions for page size and frame ratios, which can then be imported into any graphics editing program and traced over.

How the frame widths work:
Each row is a list of numbers. The total of the numbers in the list is the number of "frame units" in the row. Each number in the list gives the number of frame units wide that frame is.
For example:
A row of "1, 2" will be a row with two frames. The second frame will be twice as wide as the first. You could also write the row as "2, 4" and it would look exactly the same.

To save a layout, right-click on the preview image, then click on "View Image" or "Save Image As...".

The image is shown at the DPI you have set, so I find it useful to set the page up at a small DPI (30 or 60) and then scale it up to the DPI I want to save at (usually 300).

Please let me know if you have run into any problems or have any suggestions.

Made by Devon in April of 2017.
Last updated in May of 2020.
Thank you all, and Merry Christmas.