Что такое мокап в дизайне и как его сделать

Содержание

• Что такое мокап
• Для чего нужен мокап
• Как выбрать мокап
• Где брать мокапы
• Как создать мокап: инструкция

Что такое мокап

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

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

Для чего нужен мокап

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

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

Почему мокапы незаменимы в дизайне

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

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

С помощью мокапов можно визуализировать:

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

Также трехмерные модели с готовым дизайном упрощают коммуникацию с клиентами, потому что помогают:

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

Айдентика бренда: что это и как ее разработать

Разбираемся в айдентике: узнаете, как формируется неповторимый образ бренда

Точка зренияАнгелина Соловьева

Как выбрать мокап: четыре совета

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

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

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

Размер носителя. Заранее уточняйте размеры итоговой продукции у заказчика и сравнивайте с готовыми шаблонами.

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

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

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

Платформы

Mckups

Удобный cтоковый сайт с простым и интуитивно понятным интерфейсом. Здесь собраны мокапы из разных источников для почти всех существующих тем.

Выбираете нужный, перенаправляетесь на оригинал, регистрируетесь. Скачиваете файл в формате PSD, открываете его в Photoshop и продолжаете работать уже в программе.

Deezy

Здесь можно найти не только мокапы, но и шрифты, текстуры, фотографии. Устроена по схожему принципу: находите и скачиваете нужный файл, продолжаете работу в Photoshop.

Good Mockups

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

Онлайн-приложения

Smartmockups

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

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

Placeit

Сервис также позволяет работать с галереей мокапов или создавать свои. Регистрируйтесь по почте и выбирайте раздел Free Templates во вкладке Mockups.

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

Готовый мокап скачается в формате JPG. Огромный плюс сервиса в том, что бесплатные мокапы сохраняются без водяных знаков.

Если вы работали с платным мокапом, сервис предложит вам его оплатить.

Плагины Figma

Mockuuups Studio — более 2000 плагинов на любой вкус и цвет. Можно использовать для личных и коммерческих проектов.

Angle Mockups позволяет работать с 3D-моделями.

BrandBird превращает любой дизайн в пост для соцсетей.

Display by WeScreen размещает ваш дизайн на интерфейсах разных устройств.

All Hands Mockup Generator — мокапы с iPhone X в руке в разных декорациях.

Магазины

Creative Market

Сток с полезными материалами для дизайнеров. Мокапы можно найти в разделе Templates & Themes. Их там более 600 тысяч, но все модели платные.

House of Mockups

Подборка проекта отличается качеством и оригинальностью материалов. В разделе «Блог» можно найти полезные советы.

Как сделать мокап: инструкция

Выберите объект, который хотите превратить в мокап. Сфотографируйте или найдите хорошую фотографию объекта. Загрузите фото в Photoshop.

Создайте новый слой. Выберите инструмент «Прямоугольник» (Rectangle Tool), нарисуйте его поверх желаемой области и далее подгоните по форме. Такой способ подойдет для простых форм: экранов или постеров. Для более сложных нужно отрисовать форму самостоятельно.

Преобразуйте именно этот слой с прямоугольником в смарт-объект: Windows — Layers — Convert to Smart Object.

Настройте форму прямоугольника. Нажмите на него правой кнопкой мыши и выберите «Свободное трансформирование» (Free Transform). Нажмите еще раз и с помощью инструмента «Искажение» (Distort) подгоните форму идеально под объект.

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

Перетащите файл, который должен быть на мокапе, в слой со смарт-объектом в отдельном окне и сохраните. Готово!