Поместить скриншот на фон — самый быстрый способ сделать его законченным. Скриншот перестаёт быть голым прямоугольником и превращается в объект, лежащий на поверхности: с полем вокруг, смягчёнными углами и небольшой глубиной. В этом руководстве — три варианта фона (градиент, однотонный, прозрачный), когда выбирать каждый и как всё это сделать, не отдавая скриншот на сервер.
Почему фон меняет всё
У сырого скриншота нет ни поля, ни отделения от того, на чём он окажется. Добавьте фон — и появляется отступ, полоса цвета вокруг скриншота, которая сразу читается как задумка. Скруглите углы скриншота и добавьте слабую тень позади — и он словно приподнимается над фоном, а не лежит плашмя. Всё работает вместе: фон — это холст, отступ — воздух, тень — глубина.
Градиентный фон
Мягкий двухцветный градиент — вот почему скриншоты релизов приложений и списков изменений выглядят дорого. Он заполняет отступ мягкой заливкой цвета, которая притягивает взгляд к скриншоту, не соперничая с ним. Берите градиент, когда хотите, чтобы изображение ощущалось как анонс релиза или главный кадр — с энергией.
Перетащите скриншот на холст, выберите один из готовых градиентов и подстройте отступ, пока цветная полоса не станет сбалансированной. Предпросмотр обновляется вживую, так что вы видите всю композицию — скриншот, углы, тень, фон — прежде чем экспортировать PNG.
Однотонный фон
Однотонный цвет — вариант спокойнее и в стиле бренда. Когда у вас есть фирменный цвет и вы хотите аккуратно вписать скриншот в него, плоская заливка полностью удерживает внимание на скриншоте и читается как продуманное решение, а не показуха. Это безопасный выбор для документации, серьёзного анонса или набора картинок, которые должны выглядеть согласованно.
Прозрачный фон
Сделайте фон прозрачным — и PNG экспортируется с чистой областью отступа вместо заливки. Это то, что нужно, когда вы не заканчиваете картинку здесь: вы забираете скриншот со скруглёнными углами и тенью в Figma, Keynote, миниатюру или собственную вёрстку и кладёте его на уже готовый фон. Вы сохраняете отступ, радиус углов и тень; исчезает только заливка позади тени. Это самый гибкий вариант, потому что финальную поверхность он отдаёт вам.
Отступ, углы и тень
Какой бы фон вы ни выбрали, результат формируют три настройки:
- Отступ решает, сколько цвета лежит вокруг скриншота. Больше отступа — скриншот кажется меньше и продуманнее; меньше — держит его плотно и близко.
- Скруглённые углы скриншота смягчают жёсткие грани. Небольшой радиус читается как аккуратность; держите его сдержанным.
- Мягкая тень отделяет скриншот от фона. Пусть она будет слабой, чтобы добавлять глубину, а не выглядеть тяжёлой.
Ещё можно зафиксировать вывод под определённое соотношение сторон — Авто, 16:9, 4:3, 1:1 или 3:4 — и отступ дополнит кадр под него, чтобы экспорт подошёл туда, куда идёт.
Всё остаётся на вашем устройстве
Композиция собирается на canvas в вашем браузере, поэтому скриншот никогда не загружается. Это важнее, чем кажется: скриншот может содержать личное сообщение, счёт, дашборд или токен в URL. Добавление фона не должно означать отправку всего этого на сервер — и здесь так и есть: ничего не загружается, нет аккаунта, а после загрузки страницы всё работает офлайн.
Одно честное замечание: этот инструмент добавляет вид «градиент-отступ-тень» и ничего больше. Он не обернёт ваш скриншот в макет браузера или рамку телефона и не добавит стрелок или пометок. Для чистого фона за одним скриншотом — это ровно та работа, что нужна.