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 snapping in Paint by Zaweba

How to set ruler units, lay out guides, pick a grid style and use Snap To and Smart Guides so layers line up exactly in Paint by Zaweba.

Rulers, guides and snapping in Paint by Zaweba

Lining things up by eye works until it doesn't. A heading that sits two pixels off the left margin, a row of product shots that drift slightly downhill, a logo that is almost centred: these are the small things that make a finished image look home made. Paint by Zaweba gives you rulers, guides, a grid and snapping so that placement becomes a matter of measurement rather than squinting.

This article walks through each of those helpers in turn and then shows how they work together on a typical layout job.

Rulers and their units

The rulers run along the top and left of the canvas. You can read them in pixels, inches, centimetres, millimetres, points or percent, so pick whatever matches the job. Pixels suit screen graphics and web images. Millimetres or inches make more sense when the picture is heading to a printer. Percent is handy when you want something placed a third of the way across without doing the sums.

The ruler origin sits in the top left corner by default, but you can drag it out from the corner where the rulers meet and drop it anywhere. That turns the rulers into a local measuring tape: put the origin on the corner of a photo inside a larger design and you can read distances from that photo rather than from the canvas edge. Double-click the corner to put the origin back.

Guides and guide layouts

Guides are thin lines that sit over the picture but never print or export. They are there to snap things to. For a single guide you can work by hand, but for anything with columns, View > New Guide Layout is quicker. It builds columns, rows, gutters and margins in one go, which is exactly what you want when you are setting out a poster, a social graphic with a safe margin, or a grid of thumbnails.

A good habit is to make the guide layout first, before you place any content. Then each photo, text block or shape has somewhere obvious to land.

The grid and its styles

The grid covers the whole canvas at a regular spacing. You can choose its colour and draw it as lines, dashed lines or dots, which matters more than it sounds: dots stay out of the way on a busy photograph, while solid lines are easier to read on a flat background.

There are four grid types. Square is the everyday one. Isometric, dimetric and triangular grids are for drawing objects in parallel projection, the sort of look used for game tiles, technical sketches and little isometric room illustrations. Switch the grid to isometric, turn on snapping, and your shapes have angled lines to land on.

Snap To and Smart Guides

View > Snap To decides what things snap to. The choices are guides, the grid, layers, slices and artboard bounds. You will usually want guides and layers on, the grid on only when you are working to it, and artboard bounds on when you are building several sizes of the same design.

Smart Guides work differently. They appear only while you are moving a layer, and they show when its edges or centre line up with another layer, and when the gaps between layers are equal. That second part is the one that saves time: drag the middle of three buttons and a marker shows the moment the spacing either side matches.

Putting them together

A tidy way to build a layout is to set the ruler units first, add a guide layout with your margins and columns, then switch on Snap To for guides and layers. Place your main pieces against the guides. For the fine work, such as spacing a row of icons, let the Smart Guides tell you when the gaps are even. If you need to measure from one element rather than the canvas, drag the ruler origin onto it.

Mistakes to avoid

The commonest trouble is snapping to too many things at once. If a layer keeps jumping somewhere you did not want, open Snap To and turn off what you are not using, often the grid. The second is forgetting the ruler origin has moved, so every measurement reads oddly; a double-click on the corner fixes it. And remember that guides and the grid are visual helpers only. They will not appear in an exported file, so there is no need to hide them before you save.

Used together, these helpers are what turn a picture editor into something you can lay out a page in, and they cost nothing but a few seconds of set-up.