Source: https://restorebunny.com/templates/case-study-before-after-card-template/

SVG and PNG visual asset

# Before & After Case Study Proof Template

Make a labeled comparison card from a combined before-and-after image.

For creative teams

## Edit your visual asset

Free · No signup · Photos and wording stay in this browser. Initial names, dates, measurements and instructions are illustrative examples: replace and verify them before use. The export is a layout proof, not a verified print specification.

Photographs

JPG, PNG, WebP or AVIF · 15 MB / 24 MP each. Embedded working copies are limited to 1,200 pixels per side.

Source imageA labelled placeholder is shown until you add a photo.

Edited imageA labelled placeholder is shown until you add a photo.

Task detailsCase study titleUse your actual wording; keep it concise.Source labelUse your actual wording; keep it concise.Edited labelUse your actual wording; keep it concise.Work performedUse your actual wording; keep it concise.Review notesOne row or item per line. For tables, separate columns with \|.Review dateUse your actual wording; keep it concise.

### Live proof

1200 × 900 pixels · 2 photo slots

Preparing the layout proof…

Check the entire proof before sharing. Long wording may wrap, show an ellipsis or be clipped to its panel. Lists and tables show only the first listed rows that fit the template. SVG text remains editable; PNG is a flattened copy. Confirm physical size, margins and paper with your printer.

## A worked example

Hypothetical example: a source scan and a repair copy receive explicit labels, a treatment summary and areas to review rather than a claim of perfect identity preservation.

## What this can and cannot decide

Do not label a generated proposal as a completed real-world result.

Keep source files separately. Your entries stay in this browser page and are included only in the file you choose to download. Reloading the page clears this worksheet.

## Create a product scene

Use a real product reference to create a styled scene, then compare the details before exporting.

Account credits apply to paid operations. Review the settings and result in your dashboard.

[Create a product scene](<https://restorebunny.com/signup/?from=seo-content&source=%2Ftemplates%2Fcase-study-before-after-card-template%2F&view=product>)

## Frequently asked questions

What does this resource produce?

Make a labeled comparison card from a combined before-and-after image. It produces an editable SVG and a PNG sharing copy locally in your browser.

What should I verify before using it?

Do not label a generated proposal as a completed real-world result.

## Useful next resources

- [Open Image Difference Checker](<https://restorebunny.com/tools/image-difference-checker/>)
- [Review Privacy Before Posting Restoration Comparisons](<https://restorebunny.com/guides/privacy-review-for-before-after-photos/>)
- [Image Difference Checker — Free Online, No Signup](<https://restorebunny.com/tools/image-difference-checker/>)
- [Studio Portfolio Case Study Workflow](<https://restorebunny.com/workflows/studio-portfolio-case-study-workflow/>)
- [Custom Order Two-Option Proof Template](<https://restorebunny.com/templates/custom-order-proof-card-template/>)
- [Jewelry Detail Legend Template](<https://restorebunny.com/templates/jewelry-detail-legend-template/>)

## Sources and implementation notes

- [SVG text and local image placement](<https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/text>) — SVG text elements retain editable wording in the downloaded layout.
- [Local PNG export](<https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob>) — The PNG copy is encoded locally from the rendered template canvas.

Original worksheet and hypothetical example · Updated 2026-10-25 · [Editorial policy](<https://restorebunny.com/editorial-policy/>)
