Free

Free coded apps to suit all. No sign up, no email, usable offline, updates when I can, feedback welcome. Send feedback

How-to

Rulers, guides and layout grids in Vectornation by Zaweba

Use rulers, guides and the grid with snapping in Vectornation by Zaweba, build a layout grid of columns and rows, and set video rulers with safe areas.

Rulers, guides and layout grids in Vectornation by Zaweba

Good layouts rest on structure you can't see in the finished piece. Margins, columns, a baseline for the type, a centre line for the logo. Vectornation by Zaweba provides that structure with rulers, guides and a grid, all with snapping, and a command that builds a complete layout grid for you.

Rulers and guides

Rulers run along the edges of the canvas and show where you are on the page. Guides are lines you place to mark positions such as a margin, a fold line or the centre of a poster. Objects snap to guides as you move them, so a column of text or a row of images lines up exactly without nudging. Guides don't print or export, so you can be generous with them while you work.

There are global rulers and video rulers. Global rulers measure across the whole canvas. Video rulers come with video safe areas, the zones inside a frame where titles and important detail are safe from being cut off on screens. If you design title cards, lower thirds or thumbnails for video, turn them on and keep your text inside the safe areas from the start.

The grid

The grid lays a regular pattern of lines over the canvas, and objects can snap to it. It suits icon work, pixel-aligned interface pieces, simple diagrams and pattern design, anywhere regular spacing matters more than freehand placement. Use it with the snapping options in the status bar so it helps when you want it and stays out of the way when you don't.

Making a layout grid

View > Guides > Make a layout grid sets up columns, rows, gutters and margins as guides in one go. Enter how many columns and rows you want, how wide the gutters between them should be and how much margin to leave, and the guides appear on the page. This is the classic setup for a poster, a magazine style page, a website mock-up or a set of social media graphics that all share one structure.

Building a grid by hand means calculating each position and dragging guides into place, which is slow and error-prone. With the command you can try a 12-column grid, decide it is too busy, undo and try 6 columns in seconds. Once you are happy, placing content becomes a matter of snapping each block to the nearest column edge.

Using structure without being ruled by it

Not everything has to sit on a grid line. A layout grid gives a design rhythm, and breaking it once on purpose, with a large image that crosses a gutter for instance, can be more striking than a page where everything obeys. The point is that the breaks become choices rather than accidents.

Guides also feed other tools. Slices can be made from guides, so a grid set up for layout can become the boundaries of exported images. And smart guides work alongside your own guides, showing spacing and alignment between objects as you drag.

Keeping it tidy

Put guides for different purposes in the places where you need them and clear old ones when a design changes, so you aren't snapping to lines that no longer mean anything. Check margins against your printer's requirements before you build a print layout. And when a layout is shared across several artboards, set up the grid on one, then copy the approach to the others so the pages feel like a family.

Structure is quiet work, but a few minutes spent on rulers, guides and a layout grid at the start makes every placement after it faster and every page more consistent.