Tool guide

How to Use Guidelines and Selection

Guidelines are for comparing positions and gaps. Selection is for measuring one rectangular area. Pick the mode that matches the question you are trying to answer, rather than using whichever button happens to be active.

Published and reviewed September 6, 2026

The short answer

Use Guidelines when you need two movable edges—for example, the gap between a heading and a button. Use Selection when you need the width and height of one box—for example, a card or an image shown on screen.

Guidelines

Best for gaps, alignment, and comparing several edges.

Selection

Best for one rectangle, with width, height, diagonal, and area.

Start with these three steps

1
Choose the mode
Click the ruler icon for Guidelines or the square icon for Selection. The active button has a highlighted background.
2
Set the unit you actually need
Use px for page layouts and UI checks. For cm, mm, or inches, calibrate the screen first; otherwise the physical value is only based on the default scale.
3
Measure, then adjust
Drag a guide or draw a selection. You can move either one after creating it, so there is no need to land on the exact edge on the first try.

How to use Guidelines

Choose the ruler-shaped Guidelines button.
Drag down from the top ruler to create a horizontal line.
If the vertical ruler is visible, drag right from it to create a vertical line.
Drag an existing line to place it on the edge you want to check.
Add a second line on the same axis. The label between adjacent lines shows their distance.
To remove a line, hover over it and use the × button, or drag it back onto its ruler.

A useful example: checking a vertical gap

Put one horizontal guide on the bottom edge of a heading and another on the top edge of the button below it. Read the distance shown between the two lines. If you are reviewing a webpage, keep the display in px; that is the unit the layout is actually using.

How to use Selection

Choose the square-shaped Selection button.
Drag from one corner of the object to the opposite corner.
Read Width, Height, Diag, and Area in the floating label.
Drag inside the box to move it without changing its size.
Use any of the eight handles to resize one edge or corner.
Start a new drag on the empty workspace when you want to replace the current selection.

Value	What it answers	Typical use
Width	How wide is the box?	Button, card, image
Height	How tall is it?	Banner, input, thumbnail
Diag	Corner-to-corner distance	Quick diagonal comparison
Area	Width multiplied by height	Comparing two rectangles

What Snap changes

With Snap on, guides and selection coordinates settle onto nearby ruler marks. This is handy when you want a clean 16 px or 32 px value. Turn it off when the real edge sits between marks and you want to place the line freely.

Which mode should you pick?

Question	Use	Why
What is the gap between these two items?	Guidelines	Two lines show the distance directly.
Do these edges line up?	Guidelines	One line can cross several objects.
How wide and tall is this card?	Selection	One box gives both dimensions.
What is the diagonal or area?	Selection	Those values are calculated for the box.

Two limits worth knowing

Guidelines and selections measure what is displayed on the screen. They do not read an image file’s original pixel dimensions.
Pixel measurements work without physical calibration. Values in cm, mm, and inches depend on the current screen calibration and can change after zoom or display settings change.