Что такое мокап и с чем его едят

Обсудить
Что такое мокап

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

Что же такое мокап?

Мокап (англ. mock-up) – это полноразмерная модель какого-либо дизайна, используемая для демонстрации и оценки стиля еще не выпущенного продукта. Это может быть либо макет 3D-модели, либо PSD-файл с фотографией. Цель у макета одна: наложить на шаблон ваш дизайн.

Давайте рассмотрим примеры мокапов.

Книга

Мокап книги

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

Рекламный продукт

Листовка

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

Мокап Айпад

Мокап ноутбук

Мокапы различных гаджетов тоже очень ценятся: зачастую их используют для визуализации веб-сайтов/приложений.

Вывеска

Мокап лайтбоккс

А вот такие макеты используют бизнесмены, которые планируют открывать магазины или кафе.

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

Лучшие библиотеки мокапов

Я отобрал 5 лучших сайтов с богатыми библиотеками мокапов. Итак, знакомьтесь:

  • PSD Freebies сайт с огромной коллекцией качественных мокапов (с него я и буду брать примеры). PSD Freebies
  • CSS Author сайт со множеством мокапов, разделенных по категориям.Css Author
  • Mockup world  каталог качественных мокапов (представлено множество платных вариантов).Mockup world
  • Mockups-design мокапы для рекламной продукции (для визиток, флаеров и т.п.).Mockups-design
  • Mockup download еще один хороший ресурс с платными и бесплатными шаблонами для дизайн-проектов. Каталог мокапов

Работаем с мокапом в Photoshop

Давайте скачаем мокап по этой ссылке.

Я выбрал мокап обложки книги. Страничку мокапа нужно пролистать до конца и нажать на кнопку «Download».

ПСД конвертер

В архиве у нас лежит .psd файл, его и открываем в Фотошопе (я использую «CC 2020»).

Fomt Cover

Нам нужно найти слой, на котором находится элемент для редактирования. Обычно такие слои выделяют и называют по-особенному. В данном примере слой назван довольно логично – «[YOUR IMAGE HERE]».

Слои в мокапе

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

ФШ

В этот слой мы можем добавлять все, что нам заблагорассудится. К примеру, я вставил сюда обложку книги «1984» Джорджа Оруэлла.

Mock-up Photoshop

Теперь жмем Файл -> Сохранить, а затем открываем основной проект с мокапом.

Мокап в Photoshop

Теперь у нас есть макет книги с нашим дизайном! И выглядит он вполне убедительно: нет никаких проблем с освещением или текстурой, это действительно настоящая книга!

Мокап 1984

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

Открываю проект.

Photoshop

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

С названием слоев у нас та же песня (оба мокапа с одного сайта).

Слои Фотошоп

Открываю шаблон в новом проекте двойным кликом по миниатюре слоя.

Логотип

Я считаю, что здесь уместно смотрелся бы логотип «Леруа Мерлен», поэтому решил его сюда вставить.

Лого в фотошопе

Сохраняем файл и открываем основной проект. Готово!

Мокап Леруа Мерлен

Вот мы и разобрались со спецификой мокапов, рассмотрели лучшие библиотеки шаблонов и научились работать с ними в Photoshop.

Комментарии

С помощью соцсетей
У меня нет аккаунта Зарегистрироваться
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
С помощью соцсетей
У меня уже есть аккаунт Войти
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
Инструкции по восстановлению пароля высланы на Ваш адрес электронной почты.
Пожалуйста, укажите email, который Вы использовали для входа на сайт.