Layout grid generator (PNG and SVG)

How it works

The margins mark out the content area. Columns and rows divide it into equal parts, separated by the gaps you set; where a column crosses a row there is a field.

With facing pages (books, magazines, brochures) the margins are inside (towards the spine) and outside, mirrored between the left and right page. The files then show the whole spread.

The baseline grid starts at the top margin. If the rows follow the baseline grid, every row and every row gap becomes a whole number of lines; what is left over goes to the bottom margin.

With square fields the rows are as high as the columns are wide and the row gap equals the column gap. The number of rows follows from the format and margins: as many as fit, with the rest going to the bottom margin.

The PNG is transparent and carries the chosen resolution, so it has the document's size. If the width in pixels does not divide exactly, some columns are one pixel wider; the tool says so.

The SVG is a vector at its real size (for example 210 mm) and in the chosen unit. The fields and the baseline grid are separate groups that can be shown and hidden on their own.

Everything is calculated in the browser; no data leaves your device. The page's link holds the settings and can be saved or shared.

Real guides in Photoshop, Illustrator and InDesign

The script (.jsx) creates the grid as guides in the open document: guides that objects snap to and that do not print. Open a document of the grid's size first; with another size the script says so and changes nothing. Menu names are those of the applications' English versions.

• Photoshop: File > Scripts > Browse… and choose the file. The guides apply to the whole document.
• Illustrator: File > Scripts > Other Script… and choose the file (Illustrator may show a security warning first). Every artboard of the right size gets the grid, on the layer "Grid guides".
• InDesign: Window > Utilities > Scripts, right-click "User" > Reveal in Finder (or Explorer), copy the file into that folder and double-click the script in the panel. The guides go on the parent pages and so on every page; the script also sets margins, columns and the baseline grid.