Мокап – это достаточно полезная вещь, если уметь ей пользоваться. Вот только далеко не каждый пользователь понимает значение этого слова, и даже не представляет, что такое мокап, как им пользоваться и где его взять.
Что такое Mock Up
Mock-Up (переводится на русский, как «макет») – выполненный в полную величину макет будущего изделия, демонстрирующий его внешний вид, но не обладающий полным функционалом. Если сравнить мокап сайта и готовый сайт, то по сути получится в первом случае изображение, позволяющее оценить дизайн изделия. Во втором же случае получается полное изделие, которое обладает функционалом. Очень важно понимать, что такая заготовка не несёт в себе практической пользы, кроме демонстрации. Но именно за хороший вид такой заготовки получают свои деньги дизайнеры.
Назначение
Вариантов использования несколько, они определяются назначением и происхождение мокапа. Ведь прибегают к ним, как веб-дизайнеры, так и верстальщики. С помощью такого полномасштабного макета демонстрируют свою работу дизайнеры и согласовывают с клиентом особенности изделий фотографы. Поэтому мокапы подразделяются на:
- Сайты. Такие заготовки ориентированы на демонстрацию клиенту внешнего вида. Имея какую-то базовую заготовку её можно предоставить покупателю, чтобы он собственными глазами увидел, какую цветовую схему он желает применить, и как это будет смотреться. Удобнее исправить один слой в Фотошопе, чем исправлять код страницы.
- Снимки. Здесь дело обстоит интереснее. Пользователю на суд представляется изображение в том виде, которое оно получит после печати. То есть не то, как ярко картинка смотрится на экране устройства, а то, какой она будет в руках, в реальной жизни. Порой разница выходит ощутимой и лучше ориентироваться на мокап, где уже учтены данные особенности.
- Будущие изделия. Стоит отметить, что любая вещь, куда можно наложить дизайн может быть представлена мокапом. Например, обложка книги или кружка. На мокапе будет подан вид объекта в готовом виде.
Примечание! На самом деле мокап сайта имеет некоторые функциональные особенности, вроде ссылок и нажимаемых кнопок. Однако полноценного функционала в этом макете нет. Полноценным сайтом он станет только после вёрстки.
Mock Up для Photoshop
Для Фотошоп существует множество уже готовых мокапов, к этому вопросу вернёмся позднее. Основной сложностью является понимание принципа их редактирования. Ведь в макетах используются так называемые смарт объекты. Грубо говоря, это контейнеры, содержимое которых можно изменить, не изменив при этом общего вида изображения. Рассмотрим на конкретном примере случайно выбранный Mock-Up из стокового файлообменника:
- Открываем скачанный файл в Photoshop.
- Совершим двойное нажатие по иконке смарт-объекта в слоях. Это загрузит другое изображение (надпись), которую можно отредактировать удобным способом.
- Растрируем объект (можно просто попытаться применить к нему любой инструмент).
- Редактируем изображение.
- Выполняем его сохранение. С помощью «CTRL+S» или кнопки «сохранить» в меню «Файл».
При этом применяются необходимые эффекты на основном изображении (скачанном ранее мокапе). - В результате получаем следующее изображение:
Помимо показанного примера с текстом, можно пользоваться фигурами и другими графическими возможностями Photoshop. Стоит только помнить, что размер файла от этого будет только увеличиваться.
Mock Up сайта
Отдельного упоминания заслуживают мокапы сайтов. Своеобразные рабочие модели, на которые можно добавить необходимое содержимое. Создаются они с помощью разных инструментов и напоминают верстку сайтов. Новичкам, без знаний основ сайтостроения разобраться будет в этом процессе сложно.
Если же всё-таки требуется ознакомиться, то можно прибегнуть к некоторым инструментам. Например, создавать или редактировать готовые mock up сайтов можно с помощью программы Gliffy. В базовой комплектации она бесплатна, но и набор функций урезан. В результате можно создать простенькую модель:
Если очень нужно, то можно выполнить работу и в Photoshop представив каждый элемент страницы в виде смарт-объекта. То есть: фоновое изображение, компоненты, надписи, видео, отдельные блоки и ссылки – всё превращается в мокапы, ведущие на редактируемые элементы. Так можно быстро «набросать» некоторые элементы и согласовать дизайн.
Под «быстро набросать» следует понимать лишь первую заготовку, по которой можно ориентироваться при создании первичного дизайна. То есть, действия вроде «это повыше, то – пониже, а вот то – удалить». Не стоит считать, что создание дизайна с нуля возможно за 10-15 минут. Такое можно сделать только в качестве беглой зарисовки в блокноте, которую каждый увидит по-своему.
Где скачать готовые примеры?
В интернете существует множество площадок, где можно найти мокапы для Photoshop. В основном это заготовки для логотипов или продукции. Если поискать внимательно можно найти много интересных примеров работ. Также нередко подобные макеты продаются и дизайнеры, так сказать «набивают на них руку». Например: mockupworld, graphicburger, mockupzone, behance.
Если же речь заходит о веб-дизайне, тот на помощь придут следующие ресурсы: placeit, smartmockups, mockuuups.
Процесс создания
Сам процесс создания довольно сложен и вовсе не рекомендуется новичкам. Следует понять, что в структуру любого мокапа входят такие компоненты:
- смарт-объект (или объекты);
- фоновое изображение;
- эффекты.
Требуется создать необходимые заготовки, которые соответствуют условиям задания. Например, создавая пример того, как будет выглядеть фото после печати, нужно всего лишь добавить соответствующие эффекты (осветление/затемнение и тому подобное). Но проблема в том, что определить эти эффекты на глаз можно только при наличии опыта.
Заготовки для добавления изображения на продукцию содержат аналогичный ряд особенностей. Потому самыми простыми считаются мокапы онлайн логотипов. Простыми с точки зрения создания, а не заполнения. Без дизайнерского чутья это просто будут группы изменяемых объектов.