Блог

Как сделать изображение «до и после»

Опубликовано 25 октября 2026 г. · до и после, сравнение, склейка, рабочий процесс

Одно изображение лучше двух вложений: снимите оба состояния в одинаковом масштабе, склейте рядом, подпишите и отправьте сравнение, которое легко прочитать.

Снимки экрана «до и после» — самый быстрый способ показать изменение, но два отдельных вложения заставляют читателя переключаться туда-обратно и запоминать увиденное. Одно изображение, где состояния стоят рядом, снимает эту работу.

Снимите оба состояния одинаково

Сравнение справедливо, только если два изображения сопоставимы:

• Одна и та же область просмотра и масштаб. «До» при 100% и «после» при 80% искажают отступы и размер шрифта.
• Одна и та же обрезка. Снимайте одну и ту же область, а не более тесную обрезку изменившейся части.
• Один размер окна и тема. «После» в тёмной теме рядом с «до» в светлой сравнивает два изменения сразу.
• Одно состояние. Если на странице есть эффекты наведения или фокуса, держите указатель вне обоих снимков.

Для адаптивных раскладок делайте пару для каждой контрольной ширины, а не смешивайте ширины.

Обрежьте до одинакового соотношения сторон

Откройте первый снимок в редакторе изображений InSnap и обрежьте его до области, которую хотите сравнить. Примените ту же обрезку ко второму изображению, сверяясь по метке размера, чтобы пиксели совпадали. Если раскладки различаются по высоте, обрежьте до более короткой, а не дополняйте пустым пространством.

Склейте их рядом

Панель Склейка в редакторе изображений размещает несколько изображений на одном холсте (Pro):

1. Выберите Склейку на левой панели.
2. Импортируйте изображение «до», затем «после».
3. Перетащите их в нужном порядке и выровняйте по верхнему краю.
4. Оставьте одинаковый промежуток между ними; несколько пикселей отступа читаются как намеренная пара.
5. Объедините, когда расположение готово, и добавьте подписи.

Если изображения разного размера, измените размер большего под меньшее или обрежьте оба до одинакового соотношения сторон перед склейкой. Несовпадение масштаба — самая частая причина, по которой сравнение выглядит «не так».

Подпишите стороны, а не каждую деталь

Инструментом Текст добавьте «До» и «После» — или «Сейчас» и «Предлагается» — в один и тот же угол каждой стороны. Держите подписи короткими и одинаковыми по стилю.

Затем отметьте только те различия, которые важны:

• Номера, если изменений несколько: 1 — отступы, 2 — новая кнопка.
• Фигуры, чтобы обвести изменённую область.
• Стрелки только там, где направление неочевидно.
• Замазывание для имён, адресов почты и внутренних ссылок на любом из изображений.

Не отмечайте одну и ту же деталь с обеих сторон; отметьте её один раз — там, где она изменилась.

Экспортируйте под место назначения

• Чат или почта: один PNG проще всего читать, и он переживает большинство клиентов.
• Слайды: подгоните под соотношение сторон презентации и добавьте подложку, если изображения тёмные.
• Документация: одинаковая ширина для каждого сравнительного изображения в наборе.

Если файл большой, уменьшите снимок Retina до 1x при сохранении; сравнению обычно не нужна полная плотность пикселей.

Чек-лист сравнения

Частые вопросы

Нужен ли Pro, чтобы склеить два снимка экрана?

Да, склейка — функция Pro. Бесплатная альтернатива — закрепить оба снимка рядом на экране для собственного сравнения, но для экспорта единого изображения нужна панель склейки в редакторе.

Что делать, если снимки разного размера?

Обрежьте оба до одинакового соотношения сторон или измените размер большего изображения под меньшее перед склейкой. Сохранение одинакового масштаба важнее сохранения каждого пикселя.

Можно ли сравнить три версии?

Да. Склейте их по порядку — например, старое, текущее и предлагаемое — с одинаковым промежутком и стилем подписей. Если различия тонкие, пара из двух изображений на каждое изменение читается легче, чем одна широкая полоса.

Ещё из блога