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

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

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

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

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

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

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

Большая часть сервисов на английском, однако найти нужный мокап там несложно. Обычно они разделены по категориям. Также можно просто ввести в поиск нужный запрос, например, «logo mockup»:

• Mockup World — сервис с большой коллекцией мокапов. Помимо стандартных, тут встречаются и довольно оригинальные, к примеру, с масками или грузовиками.
• PSD Freebies — сайт, где также можно найти необычный макет, например, бутылку на фоне пальм.
• CSS Author — сервис с 10000 шаблонами. Из интересного – мокап рождественских носков или рабочей каски.
• Mockup Designs — веб-сайт с минималистичными шаблонами для полиграфической и сувенирной продукции.
• Freepik — сервис, где можно найти и бесплатный, и платный мокап. Здесь также есть иконки, векторные картинки, фотографии. Большой плюс этого ресурса в том, что он понимает русский язык, поэтому в поиск можно вводить запросы на кириллице, например, «лого мокап».

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

• Mockup Download — сайт, на котором есть и платные, и бесплатные шаблоны.
• Free Mockup — еще один небольшой, но приятный сервис, где найдется мокап под большинство запросов.

Часто мокапы на этих сайтах довольно стандартны, особенно если мы говорим о бесплатных вариантах. Чтобы найти необычные шаблоны, стоит отправиться на Behance или Dribbble – там дизайнеры иногда делятся своими наработками.

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

Другая проблема — разные стандарты для полиграфической продукции в разных странах. Например, в США и Канаде стандартный размер визитки — 89x51, тогда как в России — 90х50. Один миллиметр может казаться чем-то незначительным, однако для некоторых дизайнов 1 мм имеет решающее значение. Поэтому, если вы делаете визитку для российского заказчика, американский мокап вам не подойдет.

Обычно для работы с готовыми шаблонами используют Adobe Photoshop. Для этого мокап должен быть в формате psd — он сохраняет слои, благодаря чему дизайнер может отредактировать их в любой момент. На ресурсах, о которых мы говорили выше, мокапы предлагаются именно в формате psd, а скачиваются в виде архива. Часто в этом же архиве идет инструкция, как пользоваться шаблоном, и лицензия.

Теперь давайте разберемся на примере, как использовать мокап в Adobe Photoshop. Допустим, вы скачали нужный файл и открыли его в Фотошопе.В специальном окне вы увидите все слои — их можно редактировать. Чтобы начать работу, найдите слой, который называется «Add Your Design», «Your Design» или похожим образом. Он вам и нужен.

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

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

После нажмите на крестик вверху этого окна. Программа спросит у вас, нужно ли сохранить файл. Нажмите «Сохранить».Вы вернетесь в исходное окно. На месте изначального дизайна будет тот, который вставили вы. Мокап готов!

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

Если у вас нет Фотошопа, обратитесь к веб-сайту Placeit. На нем можно вставить изображение в мокап онлайн.

Для того, чтобы сделать это, найдите вкладку "Mockups" в левом верхнем углу экрана – перед вами появится библиотека доступных шаблонов. Выберите один из них.

Чтобы вставить изображение в мокап, нажмите на кнопку "Insert Image" и выберете нужный файл на вашем компьютере.

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

Мокап готов.

Единственный минус ресурса Placeit — нельзя скачать готовое изображение бесплатно. Доступ на месяц стоит $15, на год — $90.

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