Add a Grid Overlay to an Image
Draw guides on top of an image and download the result. Composition guides for photography and design reviews, a custom column grid for checking a layout mock, or a labelled pixel grid for measuring where something actually sits. The overlay is burned into the output, which is what makes it easy to paste into a ticket or a slide.
Drop images here
Multiple files allowed
Which guide for which job
Rule of thirds divides the frame into nine equal parts. Placing a subject on a line, or a point of interest on an intersection, is the oldest and most reliable composition heuristic there is — and seeing where the subject actually falls is usually more informative than any amount of discussion about it.
Golden ratio puts the lines at roughly 38.2% and 61.8% instead of 33% and 67%. The difference is small but real: the divisions sit slightly closer to the frame edges, which suits tighter, more classical compositions. Whether it is meaningfully better than thirds is an argument older than photography; having both makes it quick to look rather than argue.
Centre and diagonals is the one for checking symmetry and alignment — a logo that should be optically centred, a horizon that should be level. Custom rows and columns overlays any grid you name, which is how you check a design against a 12-column layout. Pixel grid uses fixed spacing in image pixels rather than proportions, with optional coordinate labels, and is the one to use when you need to say exactly where something is.
Making the guides readable
The default magenta at 70% opacity is deliberately loud, because a guide you cannot see is not a guide. Against a busy or colourful image, drop the opacity to 40–50% and raise the line width to 2 — thin bright lines disappear into detail, thicker dimmer ones stay legible. On a large image the line width is in image pixels, not display pixels, so a 1-pixel line on a 4000-pixel-wide photo will be nearly invisible when the image is scaled down; scale the width with the image.
For a pixel grid, keep the cell size sensible relative to the image. A 50-pixel grid on a 4000-pixel image draws eighty lines each way, which is a mesh rather than a guide. The coordinate labels only appear in pixel-grid mode, along the top and left edges.
FAQ
Is the overlay editable afterwards?
No — the lines are drawn into the pixels. That is the point: the output is a flat image you can paste anywhere. Keep the original if you might want a different grid later; running this on its own output stacks a second grid on top of the first.
Does it change the image dimensions?
No. The output is exactly the same size as the input, with the same alpha channel. Lines are drawn over transparent areas too, so guides remain visible on a transparent PNG.
Can I get a crop guide instead?
For actually cropping to a composition, use Crop or Crop to ratio. This only draws — it never removes anything.
Why do the lines look slightly soft?
An odd line width is offset by half a pixel to land on the pixel grid, which keeps thin lines crisp. Even widths and fractional positions — the golden ratio lines, for instance — land between pixels and get anti-aliased. Use whole-number widths for the sharpest result.