Что такое мокапы и как с ними работать?

Мокап ― это макет продукта с помещённым на нём дизайнерским решением. Мокапы нужны для того, чтобы показать ту или иную продукцию заказчику с уже сделанным вами дизайном, ведь правильная презентация работы - это очень важно.
На фото слева ― пример готового дизайна сайта , а справа ― мокапов с ним.
При создании демонстрационного материала создаётся трёхмерное изображение, что ещё больше приближает мокап к реалистичности. Мокапы могут понадобиться в любых ситуациях, но чаще всего их используют для презентации:

  • фирменного стиля,
  • обложки книги,
  • буклетов,
  • визиток,
  • мерча,
  • POS-материалов.
Для чего используют мокапы?
Сайтов с шаблонами для мокапов немало. Мы разберём несколько из них.

https://smartmockups.com/ (вставка фото онлайн)
mockupworld.co
smartmockups.com
qeaql.com
graphicburger.com/mock-ups
https://www.anthonyboyd.graphics
Freepik
Freemockup
Mockups-design
PSD Freebies
стоки с шаблонами mock-up
1. С сайта стока скачивается zip-документ. В этом документе есть
инструкция по использованию мокапа и PSD документ с самим макетом.

2. Откройте мокап в Photoshop. Файл PSD будет состоять из слоёв. Один из слоёв будет предназначен для того, чтобы в него вставили другой дизайн. Выгледеть он будет так:
Как использовать мокапы?
3. Дважды по нему кликните и во всплывающем окне нажмите «ОК».

4. Откроется область для вставки изображения.

5. Перетащите в эту область нужную картинку
и растяните ее границы по краям:
6. Нажмите сочетание клавиш Ctrl + S или выберетив меню: «Файл» — «Сохранить». В всплывающем окне нажмите кнопку «Поместить».

7.
Теперь вернитесь на вкладку с мокапом, чтобы увидеть готовый результат. Остается только сохранить мокап в формате PNG.
Шаблоны мокапов трудно создать самостоятельно, но можно скачать уже готовые. Для самостоятельного создания шаблона продукта можно использовать любую программу для рисования: Adobe Illustrator, Adobe Photoshop, Figma.
Как создать mock-up самостоятельно?