Content Oriented Web
Make great presentations, longreads, and landing pages, as well as photo stories, blogs, lookbooks, and all other kinds of content oriented projects.
НАПИШИТЕ НАМ
Спасибо за обратную связь!

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

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

  • фирменного стиля,
  • обложки книги,
  • буклетов,
  • визиток,
  • мерча,
  • 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 самостоятельно?