Видео мокап экрана в Photoshop

Статический кадр видео-мокапа на экране компьютера.

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

Краткая дефиниция: мокап — прототип визуального представления дизайна без физического производства; видео-мокап добавляет анимацию или видео вместо статичного изображения.

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

Более сильное вовлечение: движение привлекает внимание и продлевает время просмотра.
Контекст: зритель видит интерфейс в окружении (устройство, освещение, окружение).
Портфолио: демонстрация рабочего продукта (например, скролла сайта) выглядит убедительнее, чем статичный скриншот.
Универсальность: можно показывать прототипы, тестовые записи, короткие промо-видео.

Когда видео-мокап особенно полезен:

Демонстрация анимаций интерфейса или переходов.
Показ скролла сайта или приложения.
Короткие демонстрации продукта в маркетинговых роликах.

Запись экрана в формате MP4 (или другой видеофайл, совместимый с Photoshop).
Фото устройства с чётко видимым экраном (меньше перекрытий, предпочтительно фронтальный вид).
Photoshop CC (с поддержкой Timeline и Smart Object).
Базовые навыки работы со слоями, трансформациями и Timeline.

Файлы и форматы:

Видео: MP4/H.264 для совместимости и небольшого размера.
Изображение: JPEG/PNG высокого качества.
Рабочая папка: создайте отдельную папку для исходников и экспорта.

Советы по записи:

Длина: 5–20 секунд обычно достаточно для демонстрации функционала. Короткие файлы быстрее рендерятся.
Скорость: прокрутка должна быть равномерной, не слишком быстрой и не слишком медленной — цельная траектория, удобная для просмотра.
Разрешение: удобнее записывать в разрешении, близком к целевому (например, если мокап будет выводиться в 1080p, лучше записать не ниже ~720p).
Отключите системные уведомления и звук, если он не нужен.

Инструменты записи:

macOS: QuickTime Player → Новая запись экрана.
Windows: Xbox Game Bar или сторонние рекордеры (OBS, ShareX).
Мобильные: встроенная функция записи экрана в iOS/Android или QuickTime при подключении iPhone к Mac.

Сохраните видео в удобную папку и переименуйте файл по смыслу, например: site-scroll.mp4.

Идеальное фото экрана:

Экран максимально фронтально к камере (меньше перспективы).
Экран не заблокирован объектами (без сильных бликов, пальцев, наклеек).
Хорошее освещение: мягкие тени, отсутствие пересветов на экране.

Если у изображения есть перспективное искажение, Photoshop может его скорректировать с помощью трансформации Distort — но проще использовать фото с минимальной перспективой для чистого результата.

Ниже — подробные шаги с пояснениями и советами по каждой операции.

1. Откройте изображение

Файл → Открыть и выберите вашу фотографию с устройством.
При необходимости уменьшите размер: Изображение → Размер изображения. Рекомендуемая ширина для веб-просмотра — около 1200 пикселей, но ориентируйтесь на конечное место публикации.

Совет: сохраняйте исходную копию фото с полным разрешением для будущих правок.

2. Создайте область экрана

Выберите инструмент Прямоугольник (U).
Кликните на холст и укажите ширину и высоту, соответствующие размерам вашей записи (например, 1680×1050 или размеры экрана телефона).
Уберите обводку (Stroke) и залейте фигуру тёмным цветом (чёрный или тёмно-серый). Это будет «рамка», в которой разместится видео.

3. Преобразуйте прямоугольник в Smart Object

В панели слоёв кликните правой кнопкой по слою-прямоугольнику → Преобразовать в смарт-объект (Convert to Smart Object).
Преобразование в Smart Object позволит встраивать в него видео и масштабировать уже с применёнными трансформациями.

4. Подгоните форму под экран устройства

Выделите слой смарт-объекта и примените Редактирование → Свободное трансформирование (Edit → Free Transform) или сочетание клавиш ⌘+T (Mac) / Ctrl+T (Windows).
Если нужно учесть перспективу, используйте Редактирование → Трансформирование → Искажение (Edit → Transform → Distort). Потяните углы, чтобы рамка совпала с углами экрана.

Совет: работайте в режиме увеличения (Zoom) и делайте мелкие корректировки, чтобы углы точно совпали с краями экрана.

5. Откройте панель Timeline и переключитесь на Video Timeline

Окно → Таймлайн (Window → Timeline).
В таймлайне выберите «Create Video Timeline» (Создать видеотаймлайн). Убедитесь, что выбран именно видеотаймлайн, а не кадры (frame animation).

6. Откройте Smart Object для редактирования и вставьте видео

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

Совет: если видео меньше по разрешению, увеличивайте аккуратно — сильное масштабирование снизит качество.

7. Синхронизируйте длительность слоёв в таймлайне

В основном документе вернитесь к таймлайну — вы увидите два слоя: сам смарт-объект и ваш видео-слой внутри него (после сохранения смарт-объекта внешний документ отобразит изменение).
Подтяните длительность слоя-прямоугольника/смарт-объекта, чтобы она совпадала с длиной видео. Кликните и растяните маркер длительности.

8. Проверьте воспроизведение и при необходимости оптимизируйте

Нажмите Play в таймлайне. Первый раз рендер предпросмотра может идти медленно — дождитесь полной буферизации.
Если воспроизведение тормозит, уменьшите масштаб предпросмотра (в выпадающем меню внизу окна Timeline) или временно скройте сложные слои.

9. Стилизация: сделайте мокап реалистичнее

Измените режим наложения (Blend Mode) видео-слоя — часто работает Multiply или Screen в зависимости от освещения.
Попробуйте понизить прозрачность (Opacity) видео-слоя, чтобы на экран «наложился» блик фотографии.
Добавьте слоевую маску и мягкой кистью слегка затемните края экрана, чтобы интегрировать видео в окружение.
При необходимости примените корректирующие слои (Уровни, Кривые, Цветовой баланс) над смарт-объектом.

Совет: добавьте лёгкий шум/зерно к видео, если фото имеет текстуру — это поможет сцепить элементы визуально.

10. Сохраните смарт-объект и экспортируйте итоговое видео

В окне смарт-объекта: Файл → Сохранить (File → Save) или ⌘+S / Ctrl+S.
Закройте окно смарт-объекта и вернитесь в основной документ.
Для финального экспорта: Файл → Экспорт → Рендер видео (File → Export → Render Video…).
Формат: H.264 (MP4); разрешение и частота кадров поставьте в соответствии с источником видео или целевой площадкой.
Запустите Render и дождитесь окончания.

Рекомендации по настройкам экспорта:

Разрешение: совпадающее с конечной платформой (например, 1920×1080 для Full HD).
Фреймрейт: используйте исходный (или 30 fps для веба).
Битрейт: для 1080p достаточно 8–12 Мбит/с для хорошего качества при умеренном размере файла.

Если Photoshop не подходит по задаче или ресурсам, рассмотрите альтернативы:

After Effects: мощнее для композитинга и постобработки, удобен для анимаций и трекинга.
Figma + Principle/Protopie: лучше для интерактивных прототипов; можно экспортировать запись экрана прототипа.
Готовые PSD-мокапы: покупные/бесплатные макеты, куда достаточно подставить изображение или видео через Smart Object.

Сравнение методов (упрощённая матрица):

Photoshop: простой рабочий процесс для фотомокапов + базовый монтаж; лучший выбор, если основной фокус — фотографическая сцена.
After Effects: идеален для сложных композиций, трекинга и эффектов.
Figma/Protopie: удобны для интерактивного UX и быстрых прототипов.

Если нужно только показать статическое состояние интерфейса (подойдёт обычный скриншот).
Если видео слишком длинное или большой битрейт, что делает рендер и хостинг проблемными.
Если ваша целевая площадка не поддерживает автоплей или мобильный браузер запрещает автозапуск звука — подумайте об альтернативе.

Общий чеклист перед экспортом:

Видео записано и сохранено в подходящем формате (MP4/H.264).
Фото устройства без перекрытий и с минимальной перспективой.
Смарт-объект правильно выровнен и искажение подогнано.
Длительность слоёв в таймлайне совпадает с длиной видео.
Цветокоррекция и режимы наложения настроены для естественной интеграции.
Экспортные настройки соответствуют целевой платформе.

Роль-based чеклист:

Дизайнер: проверить композицию, цвет и типографику в кадре.
Продакшн/видео: подтвердить кодек и битрейт для рендера.
Маркетолог: проконтролировать длину ролика и наличие важных CTA в кадре.

Ролик считается принятым, если:

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

Тестовые случаи (пример):

Открыть экспортированный MP4 в браузере и убедиться в корректном воспроизведении.
Проверить ролик на мобильном устройстве — нет ли видимых артефактов или чрезмерного шумоподавления.
Просмотреть ролик в полноэкранном режиме и убедиться, что края экрана не содержат нежелательной обрезки.

Проблема: Видео дергается в предпросмотре Photoshop.

Решение: уменьшите разрешение предпросмотра в таймлайне или временно скройте тяжёлые корректирующие слои.

Проблема: Видео не заполняет экран целиком.

Решение: откройте смарт-объект и подгоните масштаб видео; убедитесь, что пропорции сохранены для предотвращения искажения.

Проблема: Видео выглядит «плоско» и не интегрируется с фотографией.

Решение: попробуйте изменить режим наложения, понизить непрозрачность, добавить лёгкий шум и корректирующие слои.

Качество восприятия = (реализм сцены) × (время взаимодействия). Видео повышает второй множитель.
Keep it short: 80% эффекта достигается в первые 5–10 секунд.
Интеграция по текстуре: если фон фотографический, добавьте текстуру/зерно к видео.

Уровень 1 — базовый: вставка видео в Smart Object, простой экспорт.
Уровень 2 — продвинутый: цветокоррекция, режимы наложения, шум/зерно.
Уровень 3 — профессиональный: After Effects трекинг, маскирование отражений и световых бликов, постэффекты.

Социальные сети: короткие 6–15 секундные клипы с акцентом на CTA.
Портфолио: более длинные ролики (15–30 сек) с демонстрацией нескольких экранов.
Демонстрация ошибок: запись багов и воспроизведение их внутри мокапа для отчётов QA.

Кодек: H.264 (MP4) — лучшее соотношение качества и совместимости.
Резервный вариант: подготовьте GIF или APNG для небольших анимаций, но помните об ограничениях размера.
Минимизируйте битрейт и разрешение в зависимости от места публикации (мобильный трафик).

Если запись содержит пользовательские данные или персональные данные, замажьте или отключите их перед публикацией.
Убедитесь, что на записи нет системных уведомлений или личной информации.

Запись: QuickTime, OBS, ShareX.
Редактирование: Photoshop (Timeline), After Effects.
Хостинг: Vimeo, YouTube, собственный CDN.

Запишите короткое видео экрана и подготовьте фото устройства.
Создайте прямоугольник в Photoshop и преобразуйте в Smart Object.
Подгоните Smart Object под экран через Free Transform → Distort.
Вставьте видео в Smart Object, синхронизируйте длительности.
Сохраните Smart Object и экспортируйте финальный MP4.

flowchart TD
  A{Нужно ли движение?} -->|Да| B[Использовать видео-мокап]
  A -->|Нет| C[Статичный мокап]
  B --> D{Сложность сцены}
  D -->|Простая сцена| E[Photoshop]
  D -->|Сложная сцена| F[After Effects]

Крайний случай: фото с сильной перспективой. Решение: используйте точечную перспективную коррекцию и тонкую настройку Distort; может потребоваться трекинг в After Effects.
Крайний случай: видео и фото с разной цветовой температурой. Решение: примените Color Balance и Curves в слое Smart Object или корректирующем слое выше.

Макбук с прокруткой сайта внутри мокапа.

Дизайнер:

Подготовить кадр и убедиться в визуальной целостности.
Настроить режимы наложения и цветокоррекцию.

Видео-инженер:

Проверить кодек и битрейт для экспорта.
Провести тестовое воспроизведение на целевых устройствах.

Маркетолог:

Согласовать длину ролика и ключевые точки внимания.
Проверить наличие CTA и соответствие брендингу.

Фотография рабочего стола Mac с iPhone рядом и кружкой кофе.

Создан видео-мокап для показа интерфейса сайта или приложения? В нашем пошаговом руководстве по Photoshop вы найдёте всё: как записать экран, выбрать правильную фотографию устройства, вставить видео в Smart Object, отретушировать и экспортировать готовый MP4. Это простой и эффективный способ сделать портфолио более динамичным и убедительным: движение привлекает внимание и помогает лучше передать взаимодействие. Руководство включает чек-листы, критерии приёмки, варианты инструментов и решения типичных проблем — всё, чтобы вы быстро и качественно создали свой первый анимированный мокап.

Видео-мокап экрана — эффективный инструмент презентации интерфейсов и продуктов. Простая техника вставки видео в Smart Object в Photoshop даёт быстрый и качественный результат без необходимости глубокого видеомонтажа. Начинайте с коротких записей, используйте чёткие фотографии и не бойтесь экспериментировать с режимами наложения и цветокоррекцией.

Ключевые рекомендации: