Что такое мокапы и зачем они дизайнеру

Как его создать?

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


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

Существует особый алгоритм самостоятельного создания мокапа. Хотите продемонстрировать заказчику надпись или цитату? Приготовьте фотоаппарат и предметы для сцены: блокнот, красивый нейтральный фон. Выставите правильное освещение, расположите объекты и сделайте несколько снимков.

Зачем нужны мокапы

Дизайн не существует в вакууме: изображение неотделимо от предмета, на который оно нанесено. Бывает трудно оценить оформление упаковки в раскладке:

Выглядит симпатично, но не совсем понятно, что клиент получит после печати

Зато по реалистичному изображению на мокапе сразу всё ясно.

К такой презентации дизайна вопросов не возникнет

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

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

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

Что такое Mock Up

Mock-Up (переводится на русский, как «макет») – выполненный в полную величину макет будущего изделия, демонстрирующий его внешний вид, но не обладающий полным функционалом. Если сравнить мокап сайта и готовый сайт, то по сути получится в первом случае изображение, позволяющее оценить дизайн изделия. Во втором же случае получается полное изделие, которое обладает функционалом

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

Назначение

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

  1. Сайты. Такие заготовки ориентированы на демонстрацию клиенту внешнего вида. Имея какую-то базовую заготовку её можно предоставить покупателю, чтобы он собственными глазами увидел, какую цветовую схему он желает применить, и как это будет смотреться. Удобнее исправить один слой в Фотошопе, чем исправлять код страницы.
  2. Снимки. Здесь дело обстоит интереснее. Пользователю на суд представляется изображение в том виде, которое оно получит после печати. То есть не то, как ярко картинка смотрится на экране устройства, а то, какой она будет в руках, в реальной жизни. Порой разница выходит ощутимой и лучше ориентироваться на мокап, где уже учтены данные особенности.
  3. Будущие изделия. Стоит отметить, что любая вещь, куда можно наложить дизайн может быть представлена мокапом. Например, обложка книги или кружка. На мокапе будет подан вид объекта в готовом виде.

Примечание! На самом деле мокап сайта имеет некоторые функциональные особенности, вроде ссылок и нажимаемых кнопок. Однако полноценного функционала в этом макете нет. Полноценным сайтом он станет только после вёрстки.

В чём трудности работы с готовыми мокапами


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

Часто упаковка товаров, униформа и сувениры имеют нестандартную форму. Поэтому трудно найти то, что хочет клиент.

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

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

Источники

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

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

Как использовать готовые мокапы

Если открыть файл мокапа в Photoshop, видно, что он состоит из множества слоёв.

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

Иногда в готовом мокапе можно не только накладывать на объекты картинки со своим дизайном, но менять цвет предметов и фон. В нашем примере есть такие опции: для бэкграунда и цвета мороженого.

Что это?


Мокап – это макет, который используется дизайнерами для того, чтобы продемонстрировать заказчику изделие или продукт. Например, будущую визитную карточку, обложку компакт-диска, фотоальбом, открытку, содержание или внешний вид книги. Благодаря этому способу заказчик визуально оценивает предлагаемый специалистом дизайн в рабочей среде. Получается не просто плоская фотография, а уже наложенный макет на продукт. Mock up позволяет увидеть конечный результат в реальности. Он упрощает взаимодействие заказчика и дизайнера. Визуальные макеты позволяют тестировать продукцию на стадии разработки, вносить изменения, поправки до печати.

Mock up хорош тем, что это несложная, малозатратная по времени работа, которой могут научиться все без исключения

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

Процесс создания

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

  • смарт-объект (или объекты);
  • фоновое изображение;
  • эффекты.

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

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

Если готовый мокап вам не подходит

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

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

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

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

Мокап сайта

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

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

Обратите внимание на программы InVision, UXPin, Marvel App, Gliffy, OmniGraffle, Moqups, Axure, JustinMind, Mockingbird, HotGloo, Mockplus

Например, Mockplus – простой инструмент дизайнера. Он помогает создать каркас, перейти от черно-белого варианта к цветному. Данный инструмент позволяет использовать более двухсот компонентов, которые намного упрощают создание сайта. На помощь дизайнеру приходят и другие программы. С их помощью легко создавать элементы сайта, прорабатывать детали, учиться. Самый распространенный и простой способ получить навыки – сделать мокап визитки.

Как использовать psd mockup

Вы скачиваете готовый шаблон мокапа в формате psd (например, вы можете найти необходимый мокап на нашем сайте).


После этого мокап нужно открыть в Photoshop и найти слой, содержащий смарт-объект. Чем он отличается от обычной картинки? Смарт-объект включает в себя контейнер, который позволяет работать с изображением без потери качества. Причина их использования заключается в том, что  Photoshop искажает картинки.

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

Большинство шаблонов ориентировано на англоязычную аудиторию. В мокапах можно найти текстовый слой, который называется «You design here». Для внесения изменений достаточно кликнуть по нему 2 раза.

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

Mock Up сайта

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

Если же всё-таки требуется ознакомиться, то можно прибегнуть к некоторым инструментам. Например, создавать или редактировать готовые mock up сайтов можно с помощью программы Gliffy. В базовой комплектации она бесплатна, но и набор функций урезан. В результате можно создать простенькую модель:

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

Под «быстро набросать» следует понимать лишь первую заготовку, по которой можно ориентироваться при создании первичного дизайна. То есть, действия вроде «это повыше, то – пониже, а вот то – удалить». Не стоит считать, что создание дизайна с нуля возможно за 10-15 минут. Такое можно сделать только в качестве беглой зарисовки в блокноте, которую каждый увидит по-своему.

Mock Up для Photoshop

Для Фотошоп существует множество уже готовых мокапов, к этому вопросу вернёмся позднее. Основной сложностью является понимание принципа их редактирования. Ведь в макетах используются так называемые смарт объекты. Грубо говоря, это контейнеры, содержимое которых можно изменить, не изменив при этом общего вида изображения. Рассмотрим на конкретном примере случайно выбранный Mock-Up из стокового файлообменника:

  1. Открываем скачанный файл в Photoshop.
  2. Совершим двойное нажатие по иконке смарт-объекта в слоях. Это загрузит другое изображение (надпись), которую можно отредактировать удобным способом.
  3. Растрируем объект (можно просто попытаться применить к нему любой инструмент).
  4. Редактируем изображение.
  5. Выполняем его сохранение. С помощью «CTRL+S» или кнопки «сохранить» в меню «Файл». При этом применяются необходимые эффекты на основном изображении (скачанном ранее мокапе).
  6. В результате получаем следующее изображение:

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


С этим читают