Перейти к содержимому

Украсить скриншот и сделать мокап

Поместите скриншот на градиентный фон с тенями, скруглёнными углами и рамкой браузера или устройства. Всё собирается прямо в браузере.

Перетащите или вставьте скриншотНажмите Ctrl+V (⌘V), чтобы вставить из буфера обмена
Выбрать скриншотОбработка на вашем устройстве — файлы не покидают его
Работает в браузере · без загрузки на серверКак это работает

Как пользоваться: Украшение скриншотов

  1. 1

    Вставьте скриншот

    Сразу после снимка нажмите Ctrl+V (⌘V) на этой странице или перетащите файл изображения.

  2. 2

    Выберите фон

    Выберите градиент, сетку, однотонный цвет, собственное фото или прозрачность.

  3. 3

    Добавьте рамку и стиль

    Выберите рамку: браузер, окно, ноутбук, планшет или телефон. Настройте отступ, скругление углов, тень и подпись.

  4. 4

    Экспортируйте

    Выберите готовый размер и масштаб 1×, 2× или 3×, затем скачайте PNG или скопируйте изображение.

Лимиты и Pro

Одиночные скриншоты до 25 MB со всеми рамками и фонами, экспорт до 8000 px по длинной стороне в масштабе 1×, 2× или 3×, без ограничений по количеству и без водяного знака.

Принимает исходные файлы больше 25 MB; рамок и стилей только для Pro нет. Смотреть Pro

О инструменте «Украшение скриншотов»

Скриншот-бьютифайер превращает обычный снимок экрана в оформленную композицию и экспортирует её в PNG. Размер результата зависит от вашего скриншота, рамки и отступа: снимок 1280 × 800 в рамке браузера с отступом по умолчанию превращается примерно в 1510 × 1112 пикселей при 1× и вдвое больше при 2×. Готовые размеры 16:9, 1:1, 4:5, 9:16, X и LinkedIn расширяют холст до пропорций площадки, не обрезая изображение. Экспорт ограничен 8000 пикселями по длинной стороне, а прозрачный фон даёт PNG с альфа-каналом, в котором сохраняется и тень.

Рамки — это обобщённые устройства и окна, которые рисует код в любом разрешении: браузер с адресной строкой в светлой или тёмной теме, окно рабочего стола с кнопками и заголовком, ноутбук с крышкой и основанием, планшет и телефоны с вырезом-островком или камерой-отверстием. В наборе 12 тональных градиентов и 6 сеточных, а также однотонный цвет или фото с возможным размытием.

Инструмент подходит для запусков продуктов, документации, заметок о релизах, постов в соцсетях и презентаций. Он не добавляет пометки (стрелки и выноски поверх снимка), не делает снимок экрана сам, а рамки стилизованы и не повторяют точно устройства какого-либо производителя.

Конфиденциальность

Вся композиция отрисовывается на холсте в вашем браузере, поэтому файл не покидает устройство: снимки панелей управления и ещё не выпущенных функций остаются конфиденциальными. Если добавить подпись, её шрифт загрузится из Google Fonts; этот запрос не содержит данных скриншота.

Возможности

Нарисованные рамки

Браузер, окно, ноутбук, планшет и два стиля телефона в любом разрешении.

Градиенты и сетки

Тональные градиенты в духе Material, сеточные переходы, однотонные цвета или ваше фото.

Размеры для соцсетей

Холсты 16:9, 1:1, 4:5, 9:16, X и LinkedIn, которые не обрезают снимок.

Украшение скриншотов: частые вопросы

Как сделать скриншот профессиональным?
Добавьте ему пространства и глубины. Поместите его на мягкий градиент с отступом 8–12 %, слегка скруглите углы, добавьте лёгкую тень, а снимки сайтов оформите рамкой браузера с вашим настоящим адресом. Фон лучше выбрать спокойный, чтобы внимание оставалось на интерфейсе, и экспортировать в 2×, чтобы мелкий текст оставался чётким при сжатии картинки соцсетями.
Какой размер выбрать для соцсетей?
Для постов в X и обложек YouTube подойдёт 16:9, для постов-ссылок в LinkedIn — LinkedIn (1,91:1), для лент Instagram и LinkedIn — 1:1 или 4:5, для Stories, Reels и Shorts — 9:16. Вариант «Авто» просто подгоняет холст под скриншот в рамке. Готовый размер лишь расширяет фон, поэтому сам скриншот не обрезается и не сжимается.
Можно ли экспортировать с прозрачным фоном?
Да. Выберите «Нет» в разделе «Фон», и PNG сохранит альфа-канал: непрозрачными останутся только скриншот в рамке и его мягкая тень. Это удобно, чтобы поместить изображение на цветной слайд, в блок лендинга или в файл дизайна. Копирование в буфер тоже сохраняет прозрачность в приложениях, которые её поддерживают, например в Figma, Keynote и большинстве дизайнерских программ.
Рамки устройств — это настоящие изображения продуктов?
Нет. Каждую рамку код инструмента рисует сам из прямоугольников, кривых и градиентов, а не берёт у производителей, поэтому она масштабируется до любого разрешения и не содержит товарных знаков. Формы намеренно обобщённые: телефон с вырезом-островком или камерой-отверстием, ноутбук, планшет, окно рабочего стола и браузер.
Зачем экспортировать в 2× или 3×?
На экранах с высокой плотностью на один CSS-пиксель приходится два-три физических, поэтому изображение 1× выглядит на них мягким, а X и LinkedIn ещё и уменьшают загруженные картинки, из-за чего мелкий текст размывается сильнее. Масштаб 2× даёт достаточно пикселей в обоих случаях при разумном размере файла, а 3× подходит для печати и очень больших экранов. Масштаб меняет число пикселей, но не макет.