Генератор макетов скриншотов

Необработанный скриншот функционален, но невыразителен. В обрамлении панели браузера или окна macOS, с мягкой тенью и красочным фоном, тот же скриншот выглядит как готовый продуктовый визуал. Инструмент берёт уже имеющееся у вас изображение и помещает его в окно браузера, окно macOS или простую рамку со скруглёнными углами, на градиентный фон, с настраиваемыми отступами, радиусом углов и тенью, чтобы результат вписывался в слайды, посты в соцсетях и пресс-киты.

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

  1. 1

    Загрузите свой скриншот

    Любой файл PNG, JPG или WebP до 30 МБ, снятый в любом разрешении. Инструмент поддерживает изображения Retina и обычные.

  2. 2

    Выберите рамку

    Окно браузера (с кружками-«светофором» и адресной строкой), окно macOS (с кружками-«светофором») или простая рамка только со скруглёнными углами.

  3. 3

    Настройте фон

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

  4. 4

    Экспорт

    Скачайте готовый макет в формате PNG для постов в соцсетях, слайдов или пресс-китов.

Выбор подходящей рамки и фона

Выбор рамки задаёт контекст. Панель браузера говорит «веб-приложение». Окно macOS говорит «настольное приложение». Простая рамка удерживает внимание на интерфейсе, у которого уже есть собственный chrome. Выберите ту, что соответствует тому, что вы показываете.

Руководство по рамкам

Рамка Лучше всего подходит для
Окно браузера Функции SaaS, лендинги, дашборды
Окно macOS Настольные приложения, редакторы, снимки терминала
Простая Скриншот, у которого уже есть собственный chrome

Рекомендуемые ориентировочные размеры

Инструмент экспортирует в разрешении вашего скриншота. Когда вы обрезаете или масштабируете результат под конкретный канал, эти размеры служат удобным ориентиром.

Назначение Размеры (px)
Карточка Twitter / X 1600 x 900
Одиночное изображение LinkedIn 1200 x 627
Лента Instagram (горизонтально) 1080 x 566
Галерея Product Hunt 1270 x 760
Слайд (16:9) 1920 x 1080

Советы по стилю

  • Держите тень сдержанной. Тень отделяет рамку от фона; оставьте её включённой для глубины или выключите для плоского, минималистичного вида.
  • Оставляйте щедрые отступы. 60-120 px вокруг рамки не дают скриншоту выглядеть тесно.
  • Выбирайте фон в тон вашему бренду. Выбранный цвет переходит в тёплый градиент, поэтому оттенок, близкий к вашему бренду, связывает материал с вашим сайтом.
  • Сопоставляйте рамку с содержимым. Панель браузера вокруг настольного приложения или окно macOS вокруг веб-страницы выглядят несогласованно. В случае сомнений используйте простую рамку.
  • Скройте конфиденциальные данные (адреса электронной почты пользователей, реальные имена, платёжные сведения) перед экспортом. Размыть проще, чем разбираться с юридическими последствиями.

Часто задаваемые вопросы

Три: окно браузера (кружки-«светофор» плюс адресная строка), окно macOS (кружки-«светофор», без адресной строки) и простая рамка, которая лишь скругляет углы вашего скриншота. Рамки стилизованы, а не являются пиксельно точными копиями конкретного продукта, поэтому безопасны для маркетингового использования в большинстве регионов.

Пока нет. Макет собирается поверх градиента, построенного на основе выбранного вами цвета фона, и PNG экспортируется с этим встроенным фоном. Выберите цвет, близкий к вашему бренду, или нейтральный оттенок, если планируете разместить изображение на однотонной поверхности.

Макет отрисовывается в удобной рабочей ширине, поэтому очень большие скриншоты масштабируются, чтобы поместиться в рамку. Снимайте в Retina (2x) для наиболее чёткого результата, экспортированный PNG остаётся резким на экранах с высокой плотностью пикселей.

Нет. Композиция выполняется в браузерном холсте (canvas), и изображение покидает ваше устройство только когда вы сохраняете итоговый файл PNG.

Сопутствующие инструменты

Сжать GIF

Уменьшайте анимированные GIF прямо в браузере: снижайте размеры, оставляйте меньше кадров и настраивайте качество кодирования. Проверьте петлю перед скачиванием.

Палитра цветов Material Design

Просмотрите палитру цветов Material Design. Копируйте любой оттенок (от 50 до A700) в форматах HEX, RGB или HSL одним нажатием.

Конструктор тир-листов

Создайте приватный тир-лист из текста и локальных изображений. Настройте уровни, распределите элементы мышью или клавиатурой и экспортируйте в JSON, PNG или SVG.

Конвертер JPG в Word

Конвертируйте JPG-фото или скриншот текста в редактируемый документ Word. Инструмент считывает слова с помощью OCR и раскладывает их, чтобы вы могли переписать, отформатировать и переиспользовать их.

Конструктор флагов

Создайте в браузере простой собственный флаг 3:2 с шестью компоновками, цветами, текстом и символом. Скачайте SVG или PNG либо откройте диалог печати браузера.

Генератор линованной бумаги

Создавайте линованную бумагу для печати бесплатно. Выберите узкую, широкую или стандартную линовку, задайте расстояние между строками в мм, размер листа и линию поля, затем распечатайте или скачайте SVG.

Инструмент доступен на других языках