Мокап и его использование в графическом дизайне

Что такое мокап? Зачем он нужен? Где используется, и как его заполучить самостоятельно? Об этих и других вопросах поговорим в статье. Небольшим бонусом будет мастер-класс по самостоятельной изготовке мокапа с помощью программы Adobe Photoshop.

Любой человек, хоть раз имевший дело с дизайном, сталкивался с проблемой визуализации. Есть идея, есть хорошие наброски, возможно, даже готовое изображение, но как же оно будет смотреться на конечном продукте? Как понять, не окажется ли принт на футболке неравномерно? Что если картинка на кружке растянется во все стороны и станет не только нелепой, но и непонятной? А как же дела обстоят с визитками! Вдруг номер телефона будет написан слишком мелко, или цифра при печати срежется?


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

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

Мокап добавляют к фотографии реального объекта, чтобы заказчик мог оценить как будет выглядеть дизайн. В специализированных программах (вроде Photoshop) на продукт накладывают свет и тень, надписи и перспективные искажения, цветовые рефлексы, чтобы протестировать внешний вид в условиях, приближенных к реальности. Именно здесь можно нанести картинку на кружку со всеми перспективными искажениями до того, как товар отправится в печать. Если дизайн получится не гармоничным, то его будет легко подправить. В результате заказчик видит заранее, как будет выглядеть финальный продукт и может внести коррективы, на что дизайнеру не придется потом выставлять в своей квартире купленную партию неудачных кружек.

3 вида мокапов в графическом дизайне

Мокапы используются для представления идеи на разных поверхностях — это футболки, интернет-сайты и даже фюзеляж самолета.

3 вида мокапов

Статичное изображение

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


Редактируемый файл в формате psd

В такой мокап можно вносить правки по всей композиции или в отдельные предметы и детали. Например, заказчик получает файл, где на фотографию реальной кружки с помощью функции «смарт-объекта» в Photoshop наложен выбранный принт. Если ему что-то не понравится, он может поменять смарт-объект, после чего новая картинка встанет на кружку с уже выставленными дизайнером искажениями. Такой вариант хорошо подойдет для работы с заказчиками, которые не до конца понимают, что им нужно получить в конце.


Мобильное приложение

Можно создать видео-мокап в программе Adobe After Effects или какой-нибудь 3D программе. Например, можно сделать прямоугольную болванку книги в Blender, после чего наложить на нее картинку обложки. Тогда довольный заказчик сможет покрутить книгу в приложении и оценить внешний вид со всех ракурсов.

4 причины использовать мокап в графическом дизайне

Остается незакрытым вопрос: зачем все-таки нужен мокап на самом деле? Можно ведь просто сделать качественные изображения. Для той же визитки: достаточно детально и ровно отрисовать ее в Illustrator, разве нет?
Примеры мокапов в графическом дизайне

Мокап хорошо презентует проект

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

На мокапе видны проблемы и ошибки

Модель помогает понять, как идея будет выглядеть на продукте, и нужны ли ему изменения. Это к истории о смешных искажениях на кружках. Представьте, что будет с фото, которое захотят напечатать на круглой кружке? Появится настоящая семья «пятачков», искаженных формой кружки.

Мокап — идеальный продавец

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

Мокап экономит бюджет и время

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

Как и где дизайнеры используют мокап?

Мокап — это прототип будущего дизайна, поэтому его используют дизайнеры для представления визиток, упаковки или целого веб-сайта .

Полиграфия

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

Упаковка

Бесконечное количество аппетитных упаковок печенья, коробки конфет, красивые банки с чаем, забавные тетрапаки для молока, упаковка любимой гречки - все это на стадии разработки проходит через мокап, иначе как вы поймете, куда именно стоит разместить фотографию аппетитного пирожного, чтобы у клиента навернулись слюнки?

Наружная реклама

Вывески и билборды складные стенды, плакаты - все так же нуждается в предварительной визуализации, иначе компоненты рекламы рискуют оказаться не на тех местах. Например, нужно разместить рекламу новых гамбургеров на стелу, но дизайнер не воспользовался мокапом и гамбургер оказался ниже линии восприятия потребителя: прохожий смотрит на гамбургер коленями. Какой итог? На рекламу не обратят внимания, следовательно, она не сработает.

Веб-сайты и приложения

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

В интернет-рекламе

При создании рекламных объявлений и баннеров, которые потенциальный клиент видит в социальных сетях, на главной странице браузера, в сервисах вроде Яндекс. Дзен.

Итак, что такое мокап?

Мокап (англ. Mockup или mock-up)— это прототип будущего дизайна, надежный помощник и удобный инструмент графического дизайнера. Его используют для представления заказчику дизайна визитки, упаковки или целого веб-сайта.

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


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

Где взять готовый мокап?

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

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


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

Список сайтов с мокапами для графического дизайнера

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

Mockuuups Studio

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

Есть возможность сортировки вариантов по заданным параметрам поиска. На момент написания статью можно зайти на сайт Mockuuups Studio без ВПН.

Smartmockups

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

Есть система поиска макетов по тегам. Все шаблоны разбиты на категории для удобства пользователя. К сожалению, в 2022 году зайти на сайт можно только через VPN.

Device Shots

Система тестирования продукта через загрузку изображения или скриншота в формате jpg, png, gif, svg. Доступен выбор между различными устройствами, включая телефоны, компьютеры, часы и даже гаджеты для дома.


Параметрами можно управлять и задавать размер или направление изображения по своему желанию. На момент написания статьи можно зайти на сайт Mockuuups Studio без ВПН.

Smartmockups

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

Есть система поиска макетов по тегам. Все шаблоны разбиты на категории для удобства пользователя. К сожалению, в 2022 году зайти на сайт можно только через VPN.

Device Shots





Placeit


Есть поиск с фильтром по тегам. Приложение позволяет сортировать мокапы в зависимости от типа устройства.

После выбора мокапа нужно загрузить свое изображение или скриншот.

В сервисе можно сделать готовый логотип для компании.

Сервисы, где контент встречается как бесплатный, так и платный

PSD Freebies — много качественных бесплатных мокапов;
CSS Author — мокапы распределены по категориям;
Mockup world — бесплатные и платные мокапы;
Mockups-design — мокапы для визиток, буклетов;
Mockup download — бесплатные и платные мокапы для различных дизайн-проектов;
Freemockup — мокапы разделены на категории;
Freepik — много бесплатных и платных мокапов.

 

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

Как сделать мокап своими руками?

Мастер-класс

Первым делом, как и в любой задаче, нужно определиться с целью: для чего нужен мокап? На каком предмете будет удобнее разместить свое изображение? Какая нужна цветовая гамма?


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

К вопросам о цветовой гамме


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

Для этого в программе Adobe Photoshop можно воспользоваться заменой цвета, коррекцией цвета или применить режим наложения и покрасить объект вручную. Также можно выделить объект инструментом "Лассо" и создать дубликат фрагмента слоя, чтобы на него в дальнейшем применить "Цветовой баланс".

Наиболее универсальный способ разработки мокапа в Adobe Photoshop заключается в использовании смарт-объектов и слоя-маски, позволяющих заменять содержимое в несколько кликов. Этапы создания мы рассмотрим на примере фотографии ноутбука, который находится в нейтральной среде и не имеет ярких бликов.

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

Как сделать мокап своими руками?

Для начала нам нужно запустить Adobe Photoshop и открыть нужный файл. Для работы подойдет любая версия Adobe Photoshop, но в примере будет использоваться программа 2020 года.

1. Создаем с помощью инструмента "Прямоугольник" нужную фигуру.


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

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

3. С помощью возникшей сетки редактируем объект по форме.


Важно! Если объект имеет округлую форму, то через «Трансформирование» нужно выбрать «Деформация», а не Искажение.

С помощью этого инструмента можно будет провести более сложные манипуляции с формой.

4. После использования инструмента "Трансформирование" нужно нажать Enter, чтобы все изменения вступили в силу.

! Если поле мокапа перекрывается другими объектами (например, над баннером свисают светильники, перекрывающие изображение, или перед экраном ноутбука листочек комнатного растения, который жалко убирать), то часть поля мокапа можно спрятать через слой-маску, тогда механизмы деформации не пострадают, а результат будет выглядеть более правдоподобно и естественно.


Поскольку у нас изображение простое, без каких-либо перекрывающих элементов, то добавлять её не нужно.

5. Далее правой кнопкой мыши нужно нажать на слой смарт-объекта во вкладке "Слои" и выбрать “Редактировать содержимое” в выпавшем списке.

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

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

8. После успешного размещения изображения остается немного. Для вступления изменений в силу файл необходимо сохранить. Это можно сделать через меню "Файл", либо горячими клавишами ctrl + S.

9. После успешного сохранения, если мы вернемся в исходный файл, то увидим помещенное изображение в смарт-объекте. Таким образом, эту заготовку можно будет использовать в дальнейшем.

! Также на уже готовое поле мокапа можно применить "Эффекты" в случае, если картинка сильно выбивается из общего окружения. Иногда это бывает полезно если, скажем, фотография в холодных оттенках из-за искусственного освещения, а картинка для помещения слишком теплая. Чтобы зритель не заметил разницы, полезно бывает поколдовать и с "Цветовым балансом" - в зависимости от цели.

Для этого во вкладке "Функции" (fx в правом нижнем углу) нужно нажать "Наложение цвета".

Появится два окна, где вы сможете задать искажение цвета в сторону определенного оттенка.
! Обратите внимание, что там тоже имеются "Режимы наложения". Очень хорошо всегда работает режим "Перекрытие" - беда и выручка всех дизайнеров :)

Обычно именно так добавляют тени или слегка меняют общий тон картинок. Если на объекте лежит тень по краю - ее тоже можно задать этим способом. Также тень можно сделать вручную с помощью инструмента "Градиент" сделав небольшую растяжку от черного к прозрачному. Чтобы выглядело натурально, можно попробовать включить "Режим наложения" "Перекрытие" для слоя .

Мокап в графическом дизайне

Надеюсь, статья и небольшой мастер-класс были полезными!

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

Iva Trofim
3D художник, автор короткометражного мультфильма "Bubble Gum Whale", 2D художник.