Overlay two images and see the difference

Overlaying to compare, not to combine

This page lays one picture over another so you can judge how they differ. It is not a collage or compositing tool: nothing is merged into a new file, and the only thing you can export is a comparison of the two.

Onion skin, the animator's trick

Animators check one drawing against the next by laying them on a light table. The onion-skin option does the same with colour: A is tinted red, B cyan, and where both pictures agree the two tints cancel to grey. Whatever is left red is only in A; whatever is cyan is only in B. A button that moved two pixels shows as a red and a cyan fringe on opposite sides.

Checking a build against the design

Export the mock-up and take a screenshot of the built page at the same width, then drop the mock-up as A and the screenshot as B. Turn on the grid (G) to read spacing against even guide lines, and nudge B with Alt and the arrow keys, one pixel at a time — or Shift and the arrows for ten — until the edges you care about line up. The offset you needed is shown under the nudge controls and goes into the export's alignment line.

The blend modes help with specific questions: Difference turns everything identical black so only changes glow; Multiply keeps dark lines from both pictures, which suits line art; Screen does the same for light marks on dark backgrounds.