Генератор макетов скриншотов
Поместите скриншот в рамку окна браузера, приложения, телефона, планшета или ноутбука с градиентным или сплошным фоном и тенью. Скачайте PNG.
Работает полностью в вашем браузере. Ваши данные никуда не загружаются.
Что такое Макет скриншота?
Инструмент оформляет ваш скриншот в аккуратную нейтральную рамку устройства или окна: светлое или тёмное окно браузера с вашим URL в адресной строке, простое окно приложения, телефон, планшет или ноутбук. Добавьте градиентный, сплошной или прозрачный фон, отступы и тень, затем экспортируйте PNG для лендингов, документации или публикаций в соцсетях.
Как пользоваться Макет скриншота
- Перетащите, выберите или вставьте скриншот.
- Выберите Рамка и, для рамок браузера, введите Текст адресной строки.
- Выберите Фон (градиент, сплошной цвет или прозрачный), его цвета, Отступ и Тень.
- Скачайте макет в PNG.
Пример
40×20 screenshot, frame Browser window (light), padding 0, transparent background
40×64 PNG: a 44 px title bar with window dots and address bar above the screenshot
Когда использовать Макет скриншота
Используйте, чтобы скриншоты выглядели аккуратно на страницах продуктов, в файлах README, журналах изменений, презентациях или твитах. Для фотореалистичных рендеров устройств или макетов с перспективой используйте специализированный дизайнерский инструмент.
Как работает Макет скриншота
Всё рисуется на canvas. Окна браузера и приложения подгоняются под скриншот (над ним добавляется строка заголовка, размеры масштабируются по ширине скриншота), поэтому скриншот сохраняет полное разрешение. Рамки телефона, планшета и ноутбука используют фиксированные соотношения сторон экрана (19,5:9, 4:3 и 16:10): скриншот масштабируется по ширине экрана и рисуется сверху, а выступающая часть обрезается. Рамки — простые нейтральные формы, а не копии конкретных фирменных устройств.
Распространенные Случаи Использования
- Показать скриншот веб-приложения на лендинге.
- Добавить рамку браузера к скриншотам в документации.
- Создать макет телефона с мобильным сайтом для соцсетей.
- Делать единообразные изображения для журнала изменений с фирменным градиентным фоном.
Примечание по Безопасности
Изображения декодируются, обрабатываются и кодируются локально в вашем браузере через Canvas API. На сервер ничего не загружается.
Часто Задаваемые Вопросы
Изменится ли размер моего скриншота?
В рамках браузера и приложения он сохраняет исходный размер. В рамках телефона, планшета и ноутбука он масштабируется по ширине экрана и обрезается снизу, если выше экрана.
Можно ли получить прозрачный фон?
Да, выберите Прозрачный в качестве фона; PNG сохранит прозрачность вокруг рамки и тени.
Это настоящие модели устройств?
Нет. Рамки — нейтральные универсальные дизайны, поэтому их можно свободно использовать без оглядки на товарные знаки.