Как создать мокап видеоэкрана в Photoshop

Мокапы — отличный способ быстро и в идеальной обстановке показать свою работу. В то время как большинство людей используют макеты изображений, макет видео привлечет внимание и увлечет людей вашей работой. Добавление видео на экран — отличный способ показать свою работу, и это не очень сложно сделать.

Что такое мокап видеоэкрана?

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

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

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

Эти движущиеся дизайны могут быть чем угодно: от видео до прототипа дизайна UX/UI или записи экрана.

Почему вы должны использовать мокап анимированного экрана?

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

Использование макета дает немного больше творчества в вашем портфолио, чем простые скриншоты вашего сайта. Это отличный способ разнообразить внешний вид ваших мокапов.

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

Как создать мокап анимированного экрана в Photoshop

Хотя большинство людей знают Photoshop как инструмент для редактирования изображений, вы также можете использовать его для создания анимации и видео. Итак, вот шаги по созданию макета видео с помощью Photoshop.

Какое видео следует использовать?

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

По этой причине мы будем создавать макет, прокручивающий веб-страницу. Использование более короткого видео без каких-либо других аспектов дизайна ускорит рендеринг и даст высококачественный результат.

Используйте программу записи экрана, чтобы создать видео вашего экрана. Это можно сделать на мобильном или настольном компьютере, в зависимости от того, на чем вы хотите разместить макет. Мы будем использовать Quicktime Player на Mac и Новая запись экрана вариант, но их много другие параметры Mac. Если у вас есть iPhone, вы можете увидеть как сделать скрин записи на айфоне. Вам не нужно никакого звука в этой записи.

Для нашего видео мы записали веб-сайт Makeuseof.com, на котором размещен ряд статей о графическом дизайне. Вы можете записывать на экран все, что имеет для вас смысл. Держите устойчивую прокрутку и убедитесь, что она не слишком быстрая и не слишком медленная.

Когда ваша короткая запись будет завершена, сохраните ее в формате MP4 и поместите в легкодоступную папку.

Какой тип фотографии вы должны использовать?

Для достижения наилучших результатов в этом макете вы должны использовать фотографию, на которой показан экран без препятствий. Это может быть экран мобильного телефона, компьютера или даже экран телевизора. Хотя ваше изображение может показать некоторую перспективу, лучше всего, если экран в основном обращен к вам прямо.

можно использовать закрытый экран или изображение с тяжелой перспективой для более сложного макета, но сегодня мы просто сделаем его простым.

Вы можете сделать свою собственную фотографию или загрузить ее с бесплатного сайта, такого как Скрыть. Мы не будем использовать готовый макет PSD для этого урока, поэтому вам не нужно будет пытаться его найти.

Как сделать мокап видео

Откройте свое изображение в Photoshop.

Если вы загрузили изображение с бесплатного сайта или сняли его качественной камерой, размер может быть довольно большим. Вы можете уменьшить размер изображения.

Нажмите Изображение > Размер изображения. Окончательные размеры зависят от вас, но мы рекомендуем ширину около 1200. Сохраняйте ограничения изображения пропорциональными при изменении размера. Нажмите Ok.

Теперь создайте пространство, где будет располагаться видео. Найдите размеры вашего оригинального видео; если вы записали экран с телефона, найдите размеры экрана телефона, и если вы записали экран веб-сайта, вы можете использовать стандартное разрешение 1680 x 1050, если вы не знаете точных размеров.

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

На слое прямоугольника щелкните правой кнопкой мыши и перейдите к Преобразовать в смарт-объект. Теперь вы можете преобразовать прямоугольник, чтобы он идеально вписался в экран. Это означает, что любое изображение, размещенное на смарт-объекте, будет претерпевать одно и то же преобразование формы.

Чтобы преобразовать прямоугольник, используйте инструмент Transform. Вы можете найти это, перейдя в Редактировать > Свободное трансформирование или ударив команда + Т (Мак) или Ctrl + Т (Виндовс).

Инструмент Transform изменит только размер прямоугольника. Измените размер так, чтобы он был максимально похож на экран. Затем используйте функцию искажения.

Опять заходим в Редактировать меню, затем Трансформировать > Искажать. Это позволит вам перетаскивать и растягивать углы, чтобы они идеально соответствовали вашему экрану. Это прекрасно работает, если ваше изображение имеет дополнительную перспективу. Дважды щелкните прямоугольник, как только выровняете все углы и края. Если края выровнены неправильно, снова используйте инструмент «Трансформация» и параметр «Искажение», пока они не выровняются.

Вы можете вставить свое видео в смарт-объект правильного размера и формы. Нажмите Окно > Лента новостей чтобы открыть временную шкалу анимации. Убедитесь, что он находится на временной шкале видео, а не в покадровой анимации.

Дважды щелкните смарт-объект на панели слоев, щелкнув значок с бумагой и квадратом на миниатюре вашего смарт-объекта. Это откроется в новом окне.

Перетащите видео в окно смарт-объекта. Ваше видео должно быть того же размера, что и прямоугольник. Если размеры не совпадают, вы можете легко это исправить: перетащите углы, пока они не будут соответствовать всему окну.

Если вам нужно обрезать края, вы можете это сделать. Что бы вы ни увидели, это то, что будет показано в финальном макете. Когда вы будете довольны, дважды щелкните, чтобы подтвердить размер и размещение.

Теперь вы увидите два слоя временной шкалы на временной шкале видео: один для прямоугольника и один для нового видео. Перетащите длину временной шкалы прямоугольника, чтобы она соответствовала длине видео. Это гарантирует, что видео будет видно в течение всего времени.

Нажмите кнопку воспроизведения, чтобы проверить видео. Загрузка может занять некоторое время, поэтому воспроизведение будет медленнее, чем на самом деле.

Чтобы ваш видеоэкран выглядел более реалистично, измените режим наложения видеослоя. Вы также можете уменьшить непрозрачность слоя с видео). Поэкспериментируйте с различными настройками смешивания, пока не будете довольны. Если вы хотите оставить его без этого шага, это тоже нормально. Это даст более четкое изображение на экране.

Теперь, чтобы сохранить видео в макете, просто сохраните окно смарт-объекта. Вы можете сделать это, перейдя в Файл > Сохранять или удар команда + S (Мак) или Ctrl + С (Виндовс). После сохранения выйдите из окна смарт-объекта.

Вы вернетесь в окно макета. Вы увидите свое видео вместо экрана.

Чтобы сохранить макет, перейдите на Файл > Экспорт > Рендеринг видео… Здесь вы можете изменить размер окончательного макета. Изменение размера также поможет с загрузкой и общим размером файла. Если вы довольны своими настройками, нажмите Оказывать.

В результате вы получите окончательный видеофайл MP4 с готовым макетом видео.

Усовершенствуйте свои мокапы с мокапом видеоэкрана

Используя видео в своих макетах экрана, вы сможете поделиться большим количеством работы и привлечь больше людей. Этот динамичный стиль макета, созданный в Photoshop, прост в исполнении и дает отличные результаты.

Хотя вы можете использовать эту технику для статического макета, используя только изображение, используя видео, вы изучаете новый навык и побуждаете людей дольше заниматься вашей работой. Видео-макет редко можно увидеть, и сюрприз привлечет внимание любого, кто посмотрит.

Как сделать мокап упаковки коробки в Photoshop

Читать далее

Об авторе