Composition Grid Overlay (Rule of Thirds, Golden Spiral)
Check a photo’s composition with thirds, phi grid, golden spiral and diagonals.
Preview
No photo — guides at 1920 × 1080Guides
Style
Width in pixels of the downloaded image; the preview shows it to scale.
Download
Photo with guides
Guides only, transparent
About the Composition Grid Overlay (Rule of Thirds, Golden Spiral)
Composition guides show where the strong lines and points of a picture fall. Open a photo or a design and lay any mix of guides over it: the rule of thirds, the phi grid, the golden spiral (with its eye in any of the four corners), golden triangles, the 45° diagonal method, dynamic symmetry with its reciprocal lines, centre lines or a grid of your own. Colour, opacity and line width are yours, and an optional outline keeps thin lines visible on bright skies and dark shadows alike.
Download the photo with the guides drawn on, or just the guides — a transparent PNG at any size such as 1920 × 1080, or an SVG that stays sharp at any size — to use as a layer in Photoshop, GIMP, Affinity, Figma, Canva or a video editor. Everything happens in your browser; the photo is never uploaded.
How to use it
- Choose a photo, drag it onto the page or paste it with Ctrl+V. Without a photo you can still make guide files: the preview shows a neutral frame of the guides size.
- Tick the guides you want. For the golden spiral, pick the corner its eye should sit in and whether to show the golden rectangles; for golden triangles, which diagonal to use.
- Set the colour, line width (in pixels of the downloaded image) and opacity. Keep the outline on for photos with both light and dark areas.
- Download the photo with guides as JPG, PNG or WebP, or download the guides alone as a transparent PNG or SVG at the photo’s size or any other.
Examples
6000 × 4000 (3:2)
Vertical lines at x = 2000 and 4000, horizontal lines at y = 1333 and 2667
1920 × 1080
Lines at x = 733 and 1187, y = 413 and 667 (38.2 % and 61.8 %)
Instead of thirds, each side is split 1 : 0.618 : 1.
Golden spiral, eye bottom right, 3000 × 2000
The spiral winds in at about (2171, 1447) — 72.4 % across and 72.4 % down
Guides only · 3840 × 2160 · rule of thirds + centre lines
guides-3840x2160.png (transparent), ready to put on top of a 4K timeline
Common uses
- Checking whether the horizon, a face or a building sits on a strong line before you crop.
- Teaching or learning composition with the same photo under different guides.
- Making a transparent rule-of-thirds or golden-ratio layer for Photoshop, Canva or a video editor.
- Lining up the focal point of a poster, thumbnail or slide with the golden spiral.
How each guide is drawn
- Rule of thirds: two lines at 1/3 and 2/3 of the width and the height. The engraver John Thomas Smith gave it its name in Remarks on Rural Scenery.
- Phi grid: the same idea with the golden ratio φ = (1 + √5) ÷ 2 ≈ 1.618 — lines at 1/φ² ≈ 38.2 % and 1/φ ≈ 61.8 %, so the middle band is narrower than in the rule of thirds.
- Golden spiral: quarter circles drawn in a golden rectangle that keeps losing a square, round and round, stretched to fit your frame as photo editors’ crop overlays do. Its eye is at φ ÷ √5 ≈ 72.4 % of the width and the height from the opposite corner.
- Golden triangles: one diagonal plus a line from each of the other two corners that meets it at a right angle.
- Diagonal method: a 45° line from every corner, ending at the opposite long side.
- Dynamic symmetry: both diagonals plus the four reciprocals — from each corner, the line at a right angle to the diagonal that does not touch that corner — the armature of the proportion system Jay Hambidge described in Dynamic Symmetry.
Choosing the spiral’s orientation
The spiral should wind in towards your main subject. Pick the corner its eye is closest to — bottom right, bottom left, top right or top left — and the spiral and its golden rectangles turn with it. In a portrait frame the construction is turned on its side, so the large square still spans the short side. The spiral only has true quarter circles in a 1.618 : 1 frame; in other shapes it is stretched into quarter ellipses, which keeps the same divisions of the frame.
Using the downloads in other apps
The transparent PNG has the guides and nothing else: place it as a top layer at 100 % size in Photoshop, GIMP, Affinity Photo, Canva or a video editor, and set the layer to a lower opacity if needed. The SVG is a vector file — Figma, Illustrator, Inkscape and browsers open it, and it can be scaled to any size without blurring. The line width you set is in pixels of the downloaded file: a 3 px line in a 1920 × 1080 PNG is 3 screen pixels wide when the PNG fills a 1080p screen, and the preview shows it to scale.
Limitations
- The guides cover the whole frame. To check a crop, crop the photo first, for example in the Image Cropper.
- The spiral is the usual drawing made of quarter circles; a true logarithmic golden spiral differs from it very slightly.
- Photos larger than about 40 megapixels are scaled down for the “photo with guides” download so that browsers can draw them; guide PNGs can be up to 16,384 px on a side.
- HEIC photos open natively in Safari; other browsers first download a decoder from this site (1.4 MB, once).
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
What is the rule of thirds?
It divides a picture into a 3 × 3 grid with two vertical and two horizontal lines. Placing a horizon on one of the horizontal lines, or a subject on one of the four crossings, usually gives a more balanced picture than putting it dead centre.
What is the difference between the phi grid and the rule of thirds?
The phi grid moves the lines from 33.3 % and 66.7 % to 38.2 % and 61.8 %, following the golden ratio. The four crossing points sit closer to the centre, which suits calmer, more centred compositions.
Which way should the golden spiral turn?
Put the eye of the spiral on the most important part of the picture — a face, the end of a path, a point of light — and let the wide end of the spiral follow the flow of the scene. Try all four corners; the right one usually looks obvious.
Can I use the guides in Photoshop, Lightroom or Canva?
Yes. Download the guides only, as a transparent PNG at the size of your picture, and add it as a layer or element on top. Lightroom has its own crop overlays, but the PNG is handy in apps that do not.
Why does the spiral look squashed on my photo?
A golden spiral fits exactly only in a frame of 1.618 : 1. In a 3:2, 4:3 or 16:9 frame it is stretched to fill the frame, like the crop overlays in photo editors, so the arcs become slightly oval.
Is my photo uploaded?
No. The photo is opened, drawn and saved in your browser; nothing is sent anywhere.