Мокапы — это специальные шаблоны, на которых можно разместить дизайн логотипа. Создание мокапов необходимо для презентации финального дизайна: с их помощью дизайнеры демонстрируют фирменный стиль или макеты на конкретных объектах в виде, максимально приближенном к реальности. Например, они показывают, как именно будет выглядеть логотип на футболке или рекламном баннере.
Работа с готовыми макетами — это большая экономия времени и сил. Благодаря им пользователь избавлен от необходимости изучать ненужные инструменты дизайна в редакторах, прорисовывать детали в дополнение к своей основной задаче. Готовые шаблоны мокапов доступны на многих платформах.
Какие существуют типы мокапов?
Существует немало вариантов для создания высокоточных прототипов практически любых дизайнерских идей. Наиболее популярными форматами мокапов являются:
- Статичное изображение. Простой способ: на готовый макет накладывается изображение с логотипом компании или другого элемента. Такие мокапы чаще всего создаются прямо в браузере или с помощью любого графического редактора.
- Файл в формате PSD. Удобный формат для работы в дизайнерских системах вроде Photoshop. Вы можете изменять как всю композицию, так и отдельные объекты и детали.
- Анимированный мокап. Наглядный вариант, как оценить все достоинства и недостатки концепта. Для этого необходимо воспользоваться специальными программами. Например, Adobe Creative Cloud.
Mockuuups Studio
Это приложение для macOS и Windows, в котором можно найти мокапы для мобильных устройств Apple — от телефонов до цифровых часов.
Вы можете бесплатно скачать приложение с сайта и использовать его без регистрации. Сразу же выберите категорию макетов, просмотрите список инструментов для их создания и загрузите свое изображение.
Отфильтруйте результаты по модели устройства, размеру и местоположению. Приложение за пару секунд покажет несколько готовых вариантов, вам останется только загрузить понравившийся мокап в формате JPG.
Пользователям предлагается бесплатная версия, но там будет доступно не более 15 макетов. Если вы хотите больше, нужно оформить платную подписку, которых существует две — Professional и Teams. Особенностью Mockuuups Studio является наличие 3 400 коммерчески лицензированных макетов. Единственное отличие заключается в том, что при подписке Teams вы можете добавить в свой аккаунт команду для совместной работы.
Большое преимущество этой программы — наличие программных интеграций для Figma или Microsoft Teams, которые значительно ускорят процесс проектирования вашего мокапа наряду с инструментами прототипирования.
Создание мокапов в Photoshop
Чаще всего дизайн-концепты мокапов создаются в формате .psd в Adobe Photoshop. Исходники состоят из слоев, поэтому при необходимости есть возможность настройки готовых макетов. В пользовательском интерфейсе выберите объект, который вы хотите превратить в макет. Сделайте или найдите хорошую фотографию объекта. Загрузите фотографию в программу.
- Создайте новый слой
Выберите инструмент «Прямоугольник», обрисуйте им нужную область, а затем подгоните ее по форме. Этот способ подходит для простых дисплейных форм. Для более сложных нужно нарисовать форму самостоятельно.
Преобразуйте данный слой с прямоугольником в смарт-объект: Windows — Слои — Преобразовать в смарт-объект.
- Настройте форму прямоугольника
Щелкните по нему правой кнопкой мыши и выберите «Свободное трансформирование». Щелкните еще раз и используйте инструмент «Искажение», чтобы идеально подогнать форму под объект. Дважды щелкните по слою со смарт-объектом. Откроется область, куда вы можете вставить свою фотографию — это редактируемая часть макета.
Мокап готов, вы можете сохранить его в формате PSD для дальнейшего создания UI прототипа или сразу добавить в дизайн. Перетащите файл, который вы хотите видеть на макете, в слой смарт-объекта в отдельном окне и сохраните. Готово!
- На этапе разработки внесите изменения, чтобы сделать его более реалистичным
Например, добавьте тени, градиенты, фон, цветовую гамму. Все это сделает мокап более живым, интересным и запоминающимся. Чтобы сделать надпись на макете более реалистичной, трансформируйте ее тоже!
Для этого откройте смарт-объект, выделите текстовый слой и нажмите Ctrl + T. Это переведет вас в режим трансформации текста. Чтобы придать ему изгиб, щелкните правой кнопкой мыши и выберите «Деформация». Деформировать можно как вручную, перемещая сетку, так и с помощью предустановок — они расположены вверху в строке «Деформация / Деформация».
Adobe Dimension
Программа, о которой также стоит упомянуть, является разработкой Adobe. Именно эта компания обратила внимание на страдания начинающих дизайнеров при создании мокапов и решила облегчить всем жизнь.
Отличительные особенности Dimension — довольно большой выбор программ для 3D-прототипирования. Честно говоря, этот софт не превосходит 3D Max, но может дать вам достаточную свободу творческого процесса. Внутри вы найдете сотни заготовок различных маркетинговых материалов: от банки кофе до телевизора, и на все это в нужном ракурсе вы можете наложить свой дизайн, даже повернуть модель по осям и рассмотреть ее со всех сторон.
Помимо процесса проектирования, вы можете легко применять различные эффекты. Например, если вы разрабатываете дизайн банки с газировкой, вы можете сделать так, чтобы капли воды стекали по контуру, а затем визуализировать весь результат.
Функционал бесплатного инструмента программы очень прост в использовании, если вы знаете Photoshop или Illustrator. Программа платная с ежемесячной подпиской, но широко доступна бесплатно в Интернете.
Smartmockups
Smartmockups — еще один бесплатный инструмент для создания мокапов с базовыми функциями в различных разрешениях. Сгенерированные изображения можно использовать для любых целей, например, для создания печатных шаблонов или любых других личных и коммерческих проектов.
Вы также можете редактировать изображения по своему усмотрению. Помимо категорий устройств, программа для создания мокапов имеет дополнительные теги для быстрого поиска нужного макета. Вы можете фильтровать объекты по нужной ОС, полу человека на картинке, прочим внешним и внутренним параметрам.
Есть готовые шаблоны и конструктор для самостоятельного создания мокапа. Полным функционалом можно пользоваться только неделю до истечения срока действия бесплатного плана: после этого у платформы появляются ограничения на количество макетов и качество изображений.
Figma
Работа в макетном инструменте Figma хороша тем, что, научившись работать в нем, вы легко освоите все остальные сервисы. Вот как сделать мокап или создать интерактивные прототипы в этом универсальном редакторе с интерфейсом «перетащи и брось»(Drag-and-Drop):
Создайте новый файл Figma и задайте размер кадра. Вы можете выбрать один из предустановленных вариантов или провести пользовательское тестирование основных функций.
Перетащите все элементы будущего макета в рабочую область редактора. Обратите внимание: в Figma есть большая коллекция элементов графического дизайна, обязательно ознакомьтесь с ней. Там вы найдете красивые иконки, кнопки и другие элементы.
Перетащите прямоугольник, затем измените его размер так, чтобы он напоминал экран нужного вам устройства. Измените размер изображений, чтобы они поместились в рамки. В Figma есть обширная библиотека элементов мокапа, которые вы можете использовать для дальнейшего создания прототипов.
- Добавьте изображение устройства
В сервисе уже есть готовые шаблоны для разных экранов, которые мы перетаскиваем в проект за пару секунд. При необходимости меняем их размер, чтобы он соответствовал размеру рамок.
- Затем размещаем дизайн
Перетаскиваем элементы пользовательского интерфейса в указанные рамки устройств. При необходимости меняем их размер или настраиваем по-другому (часто, например, нужно подправить края).
- Доработка визуального образа
Для этого добавьте все дополнительные элементы, которые должны быть в финальном макете (например, руки, держащие устройство, фоны). Не опускайте тени, так как без них объекты на макете будут выглядеть искусственно.
Illustrator
Популярная программа для работы с векторной графикой также предлагает инструменты для создания мокапов с расширенными возможностями. Откройте Illustrator и создайте новый артборд. Выберите размер и ориентацию, подходящие для дизайн-проектов мокапов, которые вы хотите создать.
- Далее выполните следующие действия
Принесите в проект логотипы, иконки и другие векторные и растровые элементы, которые будут присутствовать в мокапе. Используйте все инструменты работы с текстом, чтобы добавить заголовки, подписи и другие текстовые элементы. Оформите текст в соответствии с основной идеей макета.
Illustrator как один из лучших инструментов для создания макетов работает со встроенными шаблонами рамок для смартфонов и других экранов. Они находятся в разделе «Окно» > «Компоненты» > Используйте команду «Объект» > «Подогнать под рамку», чтобы пропорционально масштабировать и выровнять изображение под рамку. Вручную измените положение всех элементов дизайна в рамке экрана, чтобы добиться нужного размещения и перекрытия.
С помощью панели «Внешний вид» можно изменить форму рамки, добавить скосы, тени, цвета и другие ключевые эффекты.
Наложения, отражения на экране, трещины, потертости сделают ваш мокап визуально привлекательным. В Illustrator эти эффекты можно добавить с помощью дополнительных фигур и градиентов из инструмента прототипирования.
Примените стили к тексту и объектам, чтобы обеспечить единообразие цветов, оттенков и эффектов. Сохраните созданный файл и экспортируйте его для дальнейшего использования в том же проекте.
Рекомендации по созданию качественных мокапов
Чтобы сделать поиск инструментов для создания макета менее трудоемким и более эффективным, сосредоточьтесь на трех ключевых характеристиках:
- Детали, которые добавляют реалистичности
Тени, потертости и т. д. Их не должно быть слишком много, чтобы изображение выглядело естественно. Во время юзабилити-тестирования обращайте внимание на то, чтобы мелкие детали объекта выглядели гармонично, как и весь мокап в целом.
- Естественность изображения
Она достигается не только за счет бликов и отражений. Любая мелочь может создать впечатление искусственно созданного макета. В идеале мокап должен ощущаться как улучшенная фотография и имитировать взаимодействие с пользователем.
Заключение
Мокап — эффективный дизайнерский инструмент для визуального представления. Он используется независимо от навыков дизайнера. Вы можете создать уникальный мокап для конкретного проекта или взять готовый шаблон и адаптировать его под свою задачу. Оба варианта позволят заказчику получить достойный результат, а вам — продать свои дизайнерские идеи.
Продуктовый и графический дизайнер с опытом работы более 10 лет. Пишу о брендинге, дизайне логотипов и бизнесе.
