Как сделать мокап iPhone: от простого скриншота до 3D-модели

Мокап iPhone — это визуальная имитация интерфейса или внешнего вида устройства, которая помогает продемонстрировать дизайн приложения, сайта или концепцию продукта без реального прототипа. Такие макеты используют разработчики, маркетологи и UX-дизайнеры для презентаций, портфолио или тестирования идей. Но как создать реалистичный мокап, если под рукой нет профессиональных навыков работы с 3D-графикой?

В этой статье мы разберём 5 рабочих способов — от базовых (с использованием готовых шаблонов) до продвинутых (с нуля в Figma или Blender). Вы узнаете, какие инструменты подойдут для новичков, а какие дадут результат уровня Apple Keynote. Особое внимание уделим бесплатным ресурсам и лайфхакам для экономии времени, которые редко упоминают в стандартных гайдах.

1. Мокап iPhone из скриншота: метод «5 минут»

Самый быстрый способ — вставить скриншот вашего приложения или сайта в готовый шаблон iPhone. Этот метод подходит для презентаций, где не требуется интерактивность или 3D-эффекты.

Где взять шаблоны:

• 📱 Figma Community — бесплатные PSD и Figma-файлы с разными ракурсами (включая iPhone 15 Pro и iPhone SE).
• 🎨 Freepik — PSD-шаблоны с возможностью редактирования теней и отражений.
• 🖼️ MockUPhone — онлайн-генератор мокапов с настройкой цвета корпуса и фона.

Как сделать:

1. Сделайте скриншот экрана (на Mac: Cmd + Shift + 4, на Windows: Win + Shift + S).
2. Откройте шаблон в Figma/Photoshop и замените слой с экраном на ваш скриншот.
3. Подгоните размеры (обычно требуется обрезка до разрешения экрана iPhone, например, 1170×2532 для iPhone 13 Pro).
4. Экспортируйте результат в PNG с прозрачным фоном (если нужен чистый макет).

⚠️ Внимание: Бесплатные шаблоны часто содержат водяные знаки или ограничены по разрешению. Для коммерческих проектов покупайте премиум-версии на Creative Market или Envato Elements.

2. Онлайн-генераторы мокапов: без установки программ

Если не хотите возиться с Photoshop или Figma, воспользуйтесь онлайн-сервисами. Они позволяют создать мокап прямо в браузере, часто с возможностью анимации или изменения ракурса.

Топ-3 сервиса:

Инструкция для Mockuuups Studio:

Загрузите скриншот в формате PNG|Выберите модель iPhone (доступны с 6 до 15 Pro)|Настройте угол обзора и фон|Добавьте эффект "Dynamic Island" (для iPhone 14/15)|Экспортируйте в JPG или MP4 (для анимации)

-->

Преимущество онлайн-сервисов — не нужно скачивать тяжелые программы. Однако для высокого разрешения (например, для печати) придётся оплатить подписку.

3. Мокап в Figma: гибкость и кастомизация

Figma — идеальный инструмент для создания мокапов, если вам нужны интерактивные прототипы или работа в команде. Здесь можно не только вставить скриншот в шаблон, но и анимировать переходы между экранами.

Пошаговая инструкция:

1. Скачайте бесплатный шаблон (например, iPhone 15 Pro Mockup).
2. Импортируйте свой дизайн в Figma (перетащите файл или используйте плагин Import from URL).
3. Настройте:
   • 🎨 Цвет корпуса (в палитре шаблона).
   • 🔄 Динамический остров (для моделей 14/15) — включите слой Dynamic Island.
   • 📱 Разрешение экрана — проверьте, что ваш дизайн соответствует 393×852 (iPhone 15) или 375×812 (iPhone 12/13).

Выделите экран → ПКМ → Add Interaction → On Click → Navigate To → Выберите следующий экран

Для реалистичности используйте плагины:

• 🔍 Mockup Generator — автоматическая вставка дизайна в шаблон.
• 🎭 Blobs — добавление теней и бликов.
• 📏 Content Reel — замена контента (например, фотографий в галерее).

⚠️ Внимание: При экспорте в PDF для печати установите DPI не менее 300, иначе мокап будет пикселизированным. В настройках экспорта выберите Export as PDF → More Options → 300 DPI.

4. 3D-мокап в Blender: для продвинутых пользователей

Если вам нужен фотореалистичный мокап с возможностью вращения, освещения и текстур — используйте Blender. Этот способ требует навыков 3D-моделирования, но результат стоит усилий.

Что понадобится:

• 🖥️ Установленный Blender (бесплатно).
• 📦 3D-модель iPhone (скачайте с Sketchfab или TurboSquid).
• 🎨 Текстура экрана (ваш скриншот в высоком разрешении).

Краткая инструкция:

1. Импортируйте 3D-модель iPhone в Blender (File → Import → OBJ/FBX).
2. Настройте материал корпуса:

   Выделите корпус → Зайдите в Material Properties → Настройте Metalness (0.8) и Roughness (0.2) для металлического эффекта.

3. Добавьте скриншот на экран:

   Выделите экран → Зайдите в Shader Editor → Подключите узел Image Texture → Загрузите ваш PNG.

4. Настройте освещение:
   • 💡 Добавьте HDRI-текстуру для реалистичных отражений (скачайте на Poly Haven).
   • 🔦 Используйте Spot Light для подсветки дисплея.

Для ускорения процесса используйте готовые сцены:

• 🎬 iPhone 13 Pro Max Scene на Blender Market.
• 📱 iPhone 12 Mockup на Blend Swap (бесплатно).

5. Мокап с помощью ARKit: для разработчиков

Если вы разрабатываете AR-приложения (дополненная реальность), можно создать мокап прямо на реальном iPhone с помощью ARKit и Reality Composer.

Как это работает:

1. Установите Xcode и Reality Composer (входит в пакет для разработчиков Apple).
2. Создайте новый проект в Reality Composer и добавьте 3D-модель iPhone (или импортируйте свою).
3. Настройте взаимодействия:

   Добавьте триггер "Tap" → Привяжите действие "Open Link" или "Play Animation".

4. Экспортируйте проект в .rcproject и откройте на iPhone через Reality Composer.

Преимущества метода:

• 📲 Просмотр мокапа в реальном окружении (например, на столе или в руках).
• 🔄 Интерактивность: можно "нажать" на кнопки на экране.
• 📹 Запись видео с экрана для демонстрации клиенту.

⚠️ Внимание: Для работы с ARKit нужен iPhone с чипом A12 Bionic или новее (начиная с iPhone XS). На более старых моделях функция может не поддерживаться.

6. Сравнение методов: какой выбрать?

Выбор способа зависит от ваших целей, бюджета и навыков. Ниже — сравнительная таблица:

Для большинства задач достаточно Figma или онлайн-генераторов. Blender оправдан только если нужен фотореализм для печати или видео высокого качества (например, для рекламных роликов).

Частые ошибки и как их избежать

Даже опытные дизайнеры допускают ошибки при создании мокапов. Вот самые распространённые:

• 🔍 Неправильное разрешение экрана — скриншот растягивается или обрезается. Всегда проверяйте соответствие разрешению модели (например, iPhone 15 Pro Max — 1290×2796).
• 🎨 Отсутствие теней — мокап выглядит "плоским". Добавьте Drop Shadow в Figma или настройте освещение в Blender.
• 📱 Устаревшие элементы интерфейса — например, кнопка Home на моделях без неё (iPhone X и новее). Всегда используйте актуальные шаблоны.
• 🔄 Игнорирование Dynamic Island — на iPhone 14/15 этот элемент обязателен для реалистичности.

Проверьте мокап на соответствие брендбуку Apple:

• 🍎 Цвета корпуса должны совпадать с официальными (ссылка).
• 📏 Соотношение сторон экрана — точное (например, iPhone SE — 16:9, iPhone 13 — 19.5:9).
• 🔍 Логотип Apple на задней панели — без искажений и правильного размера.

FAQ: Ответы на популярные вопросы