Мокап

Для чего дизайнеру мокап

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

Дизайнеру мокапы позволяют:

• сделать коммуникацию с клиентом проще. Как доказать, что голубая этикетка на банке варенья будет выгодно отличать продукт от конкурентов на витрине? Достаточно сделать мокап и показать клиенту. Такой наглядный пример удобнее для восприятия, чем абстрактные текстовые описания и скупые цветовые карты.
• понять, являются ли рабочими идеи. Необязательно собирать фокус-группу, чтобы узнать, насколько хорошо смотрится логотип заказчика и читаются ли шрифты среди изображений фруктов на этикетке от йогурта — достаточно просто сделать мокап.
• проверить логотип и печатную продукцию бренда до запуска в производство. Логотип компании может хорошо выглядеть на печатной продукции, но при этом оставаться нечитабельным на корпоративной форме или бейджах. Трехмерные макеты защитят вашего заказчика от риска потратить деньги впустую (в данном случае — на перевыпуск партий).
• автоматизировать рутинные задачи. Используя стандартные шаблоны, можно сэкономить время на отрисовке дизайна и фотографировании продукции. Это актуально, например, для дизайнеров упаковки. Если бы мокапов не существовало, то, чтобы показать дизайн готового продукта, дизайнеру пришлось бы печатать и фотографировать пробные образцы, что долго и трудозатратно.

Какие бывают мокапы

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

Печатная продукция

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

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

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

Корпоративная атрибутика

Канцелярские принадлежности. Флешки могут быть плоскими, а корпуса ручек, как правило, изогнуты. И на этих поверхностях надписи и изображения будут выглядеть по-разному. Мокапы нужны для того, чтобы оценить визуал и при необходимости скорректировать расположение и размеры логотипа.

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

Вывески

Отметим, что мокапы — это не абстрактные изображения на сером фоне. Их можно вписать в изображения городской среды. Например, чтобы понять, насколько уместно будет смотреться кислотно-зеленая вывеска салона татуировки на фасаде дома постройки конца VIII века. 

Гаджеты

Чтобы представить готовые дизайн-макеты заказчику, дизайнеры часто вставляют их в готовые «рамки» — на экраны ноутбуков и смартфонов. Это позволяет преподнести макет в более выгодном свете: не просто как картинку, а как готовый продукт в ситуации его использования человеком. Кроме того, такие мокапы позволяют красиво расположить на одном изображении сразу несколько экранов или страниц будущего сайта или приложения.

Где брать готовые мокапы

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

• freepik.com. Огромный ресурс, где представлено более 40 млн мокапов, многие из которых бесплатны. Есть премиум-подписка, которая позволяет скачивать неограниченное количество файлов в течение определенного времени.
• elements.envato.com. Удобный каталог с готовыми шаблонами, возможностью поиска с использованием фильтров и неограниченным количеством файлов для скачивания.
• mockupworld.co. На данном сайте мокапы можно искать как по разделам, так и через строку поиска. База с шаблонами постоянно обновляется.
• cssauthor.com. Сайт-агрегатор, на котором представлены мокапы со ссылками на ресурсы их авторов.
• mockuplove.com. Ресурс обновляется редко, но помимо мокапов на нем представлено и большое разнообразие шрифтов.
• zippypixels.com. Для скачивания готовых шаблонов на сайте необходимо зарегистрироваться. Ресурс предлагает массу бесплатных мокапов, но фильтры работают не всегда корректно, поэтому перед скачиванием обращайте внимание на цену.

Как подобрать подходящий мокап

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

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

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

Инструменты для создания мокапов

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

• 3Ds Max позволит создать рендер объекта с нуля;
• Adobe Photoshop даст возможность проработать модель с учетом перспективных искажений, наложить тени, блики, отрегулировать резкость изображения и т. д.

Как вставить свой дизайн в мокап в Adobe Photoshop

Если готовый шаблон уже скачан, то нужно найти его в архиве и открыть в Photoshop. Как и в других похожих шаблонах, изображение разделено на слои. Пользователю нужно найти именно тот слой, на котором находится модель для редактирования. Как правило, его название — Your design here («Ваш дизайн здесь») или Your image here («Ваше изображение здесь»). Чтобы внести изменения, нужно дважды кликнуть мышкой на иконку слева от имени этого слоя, и тогда объект для редактирования откроется в новом окне. Теперь можно вносить свои изменения — добавить PNG-макет, текст, логотип и т. д. Далее сохраняем работу в этом окне через «Сохранить» или Ctrl + S. После этого нужно открыть основной проект, в котором вы увидите внесенные изменения.