Генератор макетов скриншотов
Необработанный скриншот функционален, но невыразителен. В обрамлении панели браузера или окна macOS, с мягкой тенью и красочным фоном, тот же скриншот выглядит как готовый продуктовый визуал. Инструмент берёт уже имеющееся у вас изображение и помещает его в окно браузера, окно macOS или простую рамку со скруглёнными углами, на градиентный фон, с настраиваемыми отступами, радиусом углов и тенью, чтобы результат вписывался в слайды, посты в соцсетях и пресс-киты.
Как сделать макет скриншота
-
1
Загрузите свой скриншот
Любой файл PNG, JPG или WebP до 30 МБ, снятый в любом разрешении. Инструмент поддерживает изображения Retina и обычные.
-
2
Выберите рамку
Окно браузера (с кружками-«светофором» и адресной строкой), окно macOS (с кружками-«светофором») или простая рамка только со скруглёнными углами.
-
3
Настройте фон
Выберите цвет фона, который переходит в тёплый градиент. Добавьте отступы, отрегулируйте радиус углов и включите или выключите тень.
-
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.
Инструмент доступен на других языках
- Generador de maquetas de captura de pantalla [ES]
- Générateur de maquettes d'écran [FR]
- Generator Mockup Tangkapan Layar [ID]
- Mockup-generator för skärmdumpar [SV]
- スクリーンショットモックアップ生成ツール [JA]
- 스크린샷 목업 생성기 [KO]
- Screenshot-mockupgenerator [NL]
- Trình tạo mẫu ảnh chụp màn hình [VI]
- เครื่องสร้างภาพจำลองสกรีนช็อต [TH]
- مولد نماذج لقطات الشاشة [AR]
- Screenshot-Mockup-Generator [DE]
- Generator makiet zrzutów ekranu [PL]
- Gerador de Mockup de Captura de Tela [PT]
- Screenshot Mockup Generator [EN]
- Generatore di Mockup Screenshot [IT]
- Ekran Görüntüsü Mockup Oluşturucu [TR]
- 截图样机生成器 [ZH]