Цей генератор мокапів пристроїв безкоштовний?

Так. Усі пристрої, кольори, ракурси й розміри експорту безкоштовні, без реєстрації й без водяного знака.

Чи можна зробити мокап 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-мокапів пристроїв