Этот генератор мокапов устройств бесплатный?

Да. Все устройства, цвета, ракурсы и размеры экспорта бесплатны, без регистрации и без водяного знака.

Можно ли сделать мокап iPhone или iPad?

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

Можно ли сделать мокап сайта или браузера?

Да. Выберите «Браузер», чтобы поместить скриншот сайта в окно десктопного браузера с адресной строкой — введите свой домен и выберите светлую или тёмную панель, — или выберите «Монитор», чтобы показать его на большом дисплее на подставке.

Как получить мокап в прозрачном PNG?

Выберите фон «Нет» и формат PNG (или WebP), затем скачайте. Тень сохраняется мягкими полупрозрачными пикселями, поэтому она сливается с любой подложкой, на которую вы положите мокап.

Как повернуть устройство?

Используйте ползунки X, Y и Z или введите точный угол от −180° до 180°. Также можно перетаскивать устройство в превью — с Shift оно вращается в плоскости — или щёлкнуть по превью и пользоваться стрелками. Пресеты сразу переключают на популярные ракурсы, а «Сброс» возвращает угол по умолчанию.

В каком разрешении можно экспортировать?

1080, 2048 или 4096 пикселей по длинной стороне или свой размер до 8192 пикселей, в 1:1, 4:5, 16:9, 9:16 или 4:3. Мокап заново рендерится в этом размере, поэтому он чёткий, а не растянутый.

Скриншот обрезается на экране. Как показать его целиком?

Переключите заполнение экрана с «Заполнить» на «Вписать» — изображение покажется целиком с полосами выбранного цвета. В режиме «Заполнить» кнопки выравнивания определяют, какая часть высокого скриншота остаётся: верх, середина или низ.

Мой скриншот загружается на сервер?

Нет. 3D-сцена работает в вашем браузере через WebGL, и изображение никогда не покидает ваше устройство.

Пишет, что WebGL недоступен. Что делать?

Для 3D-вида нужен WebGL. Включите аппаратное ускорение в настройках браузера, обновите драйверы видеокарты или попробуйте другой браузер; его поддерживает любая актуальная версия Chrome, Edge, Firefox или Safari.

3D-мокап телефона и ноутбука онлайн бесплатно

Ваш скриншот на реалистичном 3D-устройстве под любым углом

Перетащите скриншот или макет — и он появится на экране 3D-телефона, планшета, ноутбука, монитора или окна браузера. Вращайте устройство по осям X, Y и Z ползунками, вводом углов, стрелками на клавиатуре или перетаскиванием; выберите цвет устройства, фон и мягкую тень, а затем экспортируйте чёткий PNG, JPEG или WebP размером до 8192 пикселей — с прозрачным фоном, если хотите разместить его на своём слайде или лендинге. Устройства смоделированы в коде и отрисовываются через WebGL в вашем браузере, поэтому ничего не загружается и нет водяного знака.

Как сделать мокап устройства

1Перетащите скриншот на страницу, выберите файл или вставьте его через Ctrl/⌘ + V. До этого показывается пример экрана приложения.
2Выберите Телефон, Планшет, Ноутбук, Монитор или Браузер. Выберите цвет — а для окна браузера светлую или тёмную панель и адрес в ней. Телефоны и планшеты можно повернуть горизонтально; крышка ноутбука открывается под любым углом.
3Выберите ракурс на панели над превью — Hero ¾, Спереди, Наклон влево/вправо, Изометрия или Флэтлей — и донастройте его на вкладке Вид или перетащите устройство в превью.
4Настройте фон (прозрачный, сплошной, градиент или размытие вашего же скриншота), тень и направление света.
5Выберите соотношение сторон, размер и формат, затем скачайте изображение или скопируйте его в буфер обмена.

3D-мокапы телефона, планшета, ноутбука, монитора и браузера

Плоские шаблоны мокапов дают один фиксированный ракурс. Здесь устройство — настоящая 3D-модель, поэтому его можно показать анфас для скриншота в стиле App Store, под эффектным углом в три четверти для hero-изображения или лёжа для поста в соцсетях — из одного и того же изображения, за секунды.

У мокапа телефона современный безрамочный экран с вырезом камеры в форме таблетки, полированная металлическая рамка и тройная камера на задней панели. У мокапа планшета тонкие ровные рамки в стиле современных планшетов уровня iPad, а у мокапа ноутбука полноразмерная клавиатура, тачпад и крышка, которая открывается от закрытого положения до полностью откинутого. Это обобщённые модели, похожие на популярные сегодня устройства, — они пригодятся везде, где ищут мокап iPhone, iPad или MacBook, — но это не официальные изображения продуктов, и этот инструмент не связан ни с Apple, ни с другими производителями.

Мокапы сайтов в окне браузера

Для сайта или веб-приложения выберите Браузер: скриншот заполняет область страницы аккуратного окна десктопного браузера с кнопками окна и адресной строкой, в которой показан введённый вами домен. Панель бывает светлой и тёмной под ваш дизайн, а окно может парить под любым углом, как устройства, — или стоять анфас для чёткого плоского мокапа сайта.

Предпочитаете настоящее железо? Монитор покажет страницу на большом дисплее с тонкими рамками на алюминиевой подставке — так сайт выглядит на студийном мониторе. С вариантами Заполнить и Верх длинный скриншот всей страницы показывает свой первый экран — ровно так, как его видит посетитель.

Настройки

Поворот по X, Y и Z: X наклоняет устройство к вам или от вас, Y поворачивает его влево и вправо, Z вращает в плоскости изображения. Каждая ось — от −180° до 180°, значения можно вводить вручную. В превью перетаскивайте, чтобы поворачивать по X и Y, удерживайте <kbd>Shift</kbd> при перетаскивании для вращения по Z или выделите превью и используйте стрелки (<kbd>Shift</kbd> — шаг 15°), <kbd>Q</kbd>/<kbd>E</kbd> для Z и <kbd>R</kbd> для сброса.
Масштаб и угол обзора: Масштаб меняет, какую часть кадра занимает устройство. Угол обзора задаёт перспективу: широкий угол преувеличивает глубину, как камера телефона, поднесённая близко, а очень узкий выглядит почти ортографическим, как предметный рендер или изометрическая иллюстрация.
Заполнение экрана: Заполнить покрывает весь экран и обрезает лишнее — привяжите к верху, чтобы показать начало длинного скриншота всей страницы. Вписать показывает изображение целиком с полосами выбранного цвета, а Растянуть искажает его под форму экрана.
Блик на стекле: Лёгкое отражение студийного света на защитном стекле, благодаря которому экран выглядит как стекло, а не как наклейка. Отключите его, чтобы цвета экрана были идеально плоскими.
Фон и тень: Экспортируйте на прозрачном фоне, сплошном цвете, двухцветном градиенте или мягком размытии вашего же скриншота. Тень может лежать на полу под устройством — это подходит ноутбуку на столе — или на стене позади него, что даёт телефону эффект парящей тени.
Освещение: Устройство освещено мягкой студийной средой, поэтому металл и стекло дают реалистичные отражения. Угол света поворачивает источники и отражения вокруг устройства; интенсивность делает всю сцену светлее или темнее.

Размеры и форматы экспорта

Изображение заново отрисовывается в размере экспорта — 1080, 2048 или 4096 пикселей по длинной стороне или любой свой размер от 256 до 8192 — в форматах квадрат 1:1, вертикальный 4:5, горизонтальный 16:9, сторис 9:16 или 4:3. Поскольку это новый рендер, а не увеличенное превью, края остаются чёткими в любом размере, каким бы ни был ваш экран.

PNG — без потерь и с прозрачностью, правильный выбор для мокапа, который вы разместите на сайте, слайде или в файле дизайна. WebP тоже сохраняет прозрачность и весит гораздо меньше. У JPEG нет прозрачности, поэтому прозрачный фон заливается белым. Копировать помещает PNG в буфер обмена — его можно сразу вставить в Figma, Keynote, Slack или документ.

Советы для лучших мокапов

Делайте скриншот в родном разрешении устройства — около 1179 × 2556 для телефона или 2560 × 1600 для десктопа, — чтобы экран оставался чётким даже в 4K-мокапе.
Ракурс в три четверти со светом с той же стороны, куда повёрнуто устройство, выглядит естественнее всего; вид спереди лучше всего подходит для страниц в магазинах приложений.
Для hero-блока лендинга используйте прозрачный PNG, чтобы сквозь него был виден фон вашей страницы.
Нужно сначала обрезать скриншот или изменить его размер? Воспользуйтесь обрезкой изображений или изменением размера изображений, а также инструментом «Фото для соцсетей», чтобы подогнать готовый мокап под каждую платформу.

Бесплатный генератор мокапов, который сохраняет ваши макеты в тайне

Экраны ещё не вышедших приложений и клиентские работы не стоит загружать на чужой сервер. Здесь ваш скриншот читается, отрисовывается и рендерится целиком на вашем устройстве через WebGL; он никуда не отправляется. Нет аккаунта, нет водяного знака и нет ограничения на количество мокапов. Ваши настройки — устройство, угол, фон и параметры экспорта — запоминаются в этом браузере; изображение — нет.

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

Этот генератор мокапов устройств бесплатный?: Да. Все устройства, цвета, ракурсы и размеры экспорта бесплатны, без регистрации и без водяного знака.
Можно ли сделать мокап iPhone или iPad?: Можно сделать мокап современного телефона или планшета, похожего на популярные сегодня модели, — именно это нужно большинству для превью приложения или сайта. Модели обобщённые и нарисованы в коде; это не официальные изображения продуктов Apple, и инструмент не связан с Apple.
Можно ли сделать мокап сайта или браузера?: Да. Выберите «Браузер», чтобы поместить скриншот сайта в окно десктопного браузера с адресной строкой — введите свой домен и выберите светлую или тёмную панель, — или выберите «Монитор», чтобы показать его на большом дисплее на подставке.
Как получить мокап в прозрачном PNG?: Выберите фон «Нет» и формат PNG (или WebP), затем скачайте. Тень сохраняется мягкими полупрозрачными пикселями, поэтому она сливается с любой подложкой, на которую вы положите мокап.
Как повернуть устройство?: Используйте ползунки X, Y и Z или введите точный угол от −180° до 180°. Также можно перетаскивать устройство в превью — с Shift оно вращается в плоскости — или щёлкнуть по превью и пользоваться стрелками. Пресеты сразу переключают на популярные ракурсы, а «Сброс» возвращает угол по умолчанию.
В каком разрешении можно экспортировать?: 1080, 2048 или 4096 пикселей по длинной стороне или свой размер до 8192 пикселей, в 1:1, 4:5, 16:9, 9:16 или 4:3. Мокап заново рендерится в этом размере, поэтому он чёткий, а не растянутый.
Скриншот обрезается на экране. Как показать его целиком?: Переключите заполнение экрана с «Заполнить» на «Вписать» — изображение покажется целиком с полосами выбранного цвета. В режиме «Заполнить» кнопки выравнивания определяют, какая часть высокого скриншота остаётся: верх, середина или низ.
Мой скриншот загружается на сервер?: Нет. 3D-сцена работает в вашем браузере через WebGL, и изображение никогда не покидает ваше устройство.
Пишет, что WebGL недоступен. Что делать?: Для 3D-вида нужен WebGL. Включите аппаратное ускорение в настройках браузера, обновите драйверы видеокарты или попробуйте другой браузер; его поддерживает любая актуальная версия Chrome, Edge, Firefox или Safari.

Генератор 3D-мокапов устройств