Что такое мокап в фотошопе
Перейти к содержимому

Что такое мокап в фотошопе

  • автор:

Как использовать PSD шаблоны мокапов в программе Фотошоп?

news_3

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

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

Архив сохранится на вашем компьютере и теперь его нужно распаковать.

В появившейся папке найдем файл glass-bottle-mockup-psd и откроем его в Фотошопе:

Рисунок 1

Во вкладке «слои» расположены папки с названиями, в которых сложены файлы. Все папки соответствуют своему элементу.
Откроем ту, что принадлежит зеленой бутылке, нажмем на стрелку, которая расположена рядом с папкой, и перед нами окажется несколько слоев:

Рисунок 2

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

Рисунок 3

Теперь нужно убрать все лишнее на этом слое. Можно просто скрыть объекты, либо вовсе удалить их, если они больше не понадобятся. Кому как нравится. После чего нажимаем Файл → Сохранить (Ctrl+S), и все изменения сохранятся автоматически.

Рисунок 4

А теперь можно добавить что-то свое, например, логотип, надпись, или рисунок. И снова сохраним.

Рисунок 5

Все оказалось совсем несложно. На этот слой можно помещать любые файлы, как векторные, так и растровые, с множеством возможных разрешений AI, EPS, PNG, JPEG. А также можно делать текстовые слои, в общем тут куда уже приведет ваша фантазия. Только не забывайте сохранять изменения.
Ну и теперь пришло время поменять фон. Это можно сделать разными способами. В некоторых мокапах можно добавить свой фон, в некоторых можно поменять цвет. В любом случае, разобраться какой из способов подходит вам не сложно. В нашем примере мы просто поменяем цвет.
Для начала разблокируем слои, отвечающие за фон, и скроем один из них.

Рисунок 6

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

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

Рассказываем про быстрый и эффективный способ презентовать идею заказчику.

Иллюстрация: Polina Vari для Skillbox Media

Полина Старцева

Полина Старцева
Всюду ищет великую красоту, работает над разумностью потребления.

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

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

Чаще всего мокап — это файл в формате PSD, который содержит слои и смарт-объекты. На подготовленный таким образом шаблон накладывают элементы айдентики, рекламные креативы или образ упаковки.

Что такое айдентика и зачем она нужна? Читайте в нашей статье.

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

Мокапы как реалистичные 3D-модели нужны в первую очередь графическим дизайнерам. Но используют этот термин и дизайнеры интерфейсов. Мокап в UX/UI — это упрощённый вариант цифрового продукта: в нём видно, как будут решены графические элементы, какие будут шрифты и цвета, даже если вайрфрейм к этому моменту ещё не доработан окончательно. А для презентации готового приложения или сайта используют трёхмерные «девайсные» мокапы — образы смартфонов или компьютеров, на которых показано, как будет выглядеть продукт на устройстве пользователя.

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

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

С помощью мокапов можно:

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

Что такое брендбук и где в нём место мокапам? Рассказываем в статье.

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

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

  • на стоках или в специализированных магазинах мокапов — например, Adobe Stock;
  • в приложениях — веб-сервисах, которые не требуют скачивать файлы, а позволяют вносить изменения в шаблоны прямо в браузере — например, Smartmockups;
  • на платформах дизайнерских портфолио: некоторые авторы делятся своими наработками и шаблонами на Behance или Dribbble. Чтобы найти их, вводите в поиске Mockups;
  • для тех, кто работает в Figma, есть специальный плагин.

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

Как правило, в ZIP-архиве, кроме самого мокапа, будет описание лицензии и инструкция по слоям и смарт-объектам.

Лицензии для мокапов могут требовать указания авторства или позволять разные уровни использования:

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

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

Как подобрать подходящий мокап

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

Что важно при выборе мокапа:

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

  • Обращайте внимание на блики, отражения и тени.

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

  • Оценивайте картинку на реалистичность.

Существуют мокапы в виде простых 3D-моделей без серьёзной проработки фактур и бликов. Из-за отсутствия внимания к деталям они выглядят как 3D-графика и не похожи на фотоснимок. Перенести дизайн на такое изображение можно, но результат будет недостаточно убедителен, поскольку дизайн будет показан не в «реальной», а полностью цифровой среде. Лучше отложить такой мокап и попробовать найти более реалистичное изображение.

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

Когда важно продемонстрировать дизайн на нестандартном предмете и точно соблюсти все пропорции, то можно мокап самостоятельно отрисовать с нуля. В 3ds Max можно создать рендер объекта и в Adobe Photoshop добавить правильные визуальные эффекты.

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

Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!

Что такое мокап и с чем его едят

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

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

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

Мокап (англ. mock-up) – это полноразмерная модель какого-либо дизайна, используемая для демонстрации и оценки стиля еще не выпущенного продукта. Это может быть либо макет 3D-модели, либо PSD-файл с фотографией. Цель у макета одна: наложить на шаблон ваш дизайн.

Давайте рассмотрим примеры мокапов.

Книга

Мокап книги

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

Рекламный продукт

Листовка

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

Мокап Айпад

Мокап ноутбук

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

Вывеска

Мокап лайтбоккс

А вот такие макеты используют бизнесмены, которые планируют открывать магазины или кафе.

Как видите, мокапы бывают разными. Давайте разберемся, где эти мокапы искать и как правильно использовать!

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Лучшие библиотеки мокапов

Я отобрал 5 лучших сайтов с богатыми библиотеками мокапов. Итак, знакомьтесь:

  • PSD Freebies – сайт с огромной коллекцией качественных мокапов (с него я и буду брать примеры). PSD Freebies
  • CSS Author – сайт со множеством мокапов, разделенных по категориям. Css Author
  • Mockup world – каталог качественных мокапов (представлено множество платных вариантов). Mockup world
  • Mockups-design – мокапы для рекламной продукции (для визиток, флаеров и т.п.). Mockups-design
  • Mockup download – еще один хороший ресурс с платными и бесплатными шаблонами для дизайн-проектов. Каталог мокапов

Работаем с мокапом в Photoshop

Давайте скачаем мокап по этой ссылке.

Я выбрал мокап обложки книги. Страничку мокапа нужно пролистать до конца и нажать на кнопку «Download».

ПСД конвертер

В архиве у нас лежит .psd файл, его и открываем в Фотошопе (я использую « CC 2020 » ).

Fomt Cover

Нам нужно найти слой, на котором находится элемент для редактирования. Обычно такие слои выделяют и называют по-особенному. В данном примере слой назван довольно логично – «[YOUR IMAGE HERE]».

Слои в мокапе

Два раза нажимаем на миниатюру возле имени слоя левой кнопкой мыши. Вуаля – дизайн обложки нашей книги открылся в новом проекте!

ФШ

В этот слой мы можем добавлять все, что нам заблагорассудится. К примеру, я вставил сюда обложку книги «1984» Джорджа Оруэлла.

Mock-up Photoshop

Теперь жмем Файл -> Сохранить, а затем открываем основной проект с мокапом.

Мокап в Photoshop

Теперь у нас есть макет книги с нашим дизайном! И выглядит он вполне убедительно: нет никаких проблем с освещением или текстурой, это действительно настоящая книга!

Мокап 1984

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

Photoshop

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

С названием слоев у нас та же песня (оба мокапа с одного сайта).

Слои Фотошоп

Открываю шаблон в новом проекте двойным кликом по миниатюре слоя.

Логотип

Я считаю, что здесь уместно смотрелся бы логотип «Леруа Мерлен», поэтому решил его сюда вставить.

Лого в фотошопе

Сохраняем файл и открываем основной проект. Готово!

Мокап Леруа Мерлен

Вот мы и разобрались со спецификой мокапов, рассмотрели лучшие библиотеки шаблонов и научились работать с ними в Photoshop.

Мокап

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

Вступайте в клуб начинающих дизайнеров и получайте подарки

Содержание

  1. Для чего дизайнеру мокап
  2. Какие бывают мокапы
  3. Где брать готовые мокапы
  4. Как подобрать подходящий мокап
  5. Инструменты для создания мокапов
  6. Как вставить свой дизайн в мокап в Adobe Photoshop

Для чего дизайнеру мокап

ИСКРА —
неделя знакомства с дизайн-профессиями

Выберите дизайн-профессию, которая нужна в IT.

разжечь искру

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

Пример мокапа упаковки мороженого

ИСКРА —
неделя знакомства с дизайн-профессиями

Выберите дизайн-профессию, которая нужна в IT.

разжечь искру

Дизайнеру мокапы позволяют:

Мокап стаканчика кофе

  • сделать коммуникацию с клиентом проще. Как доказать, что голубая этикетка на банке варенья будет выгодно отличать продукт от конкурентов на витрине? Достаточно сделать мокап и показать клиенту. Такой наглядный пример удобнее для восприятия, чем абстрактные текстовые описания и скупые цветовые карты.
  • понять, являются ли рабочими идеи. Необязательно собирать фокус-группу, чтобы узнать, насколько хорошо смотрится логотип заказчика и читаются ли шрифты среди изображений фруктов на этикетке от йогурта — достаточно просто сделать мокап.
  • проверить логотип и печатную продукцию бренда до запуска в производство. Логотип компании может хорошо выглядеть на печатной продукции, но при этом оставаться нечитабельным на корпоративной форме или бейджах. Трехмерные макеты защитят вашего заказчика от риска потратить деньги впустую (в данном случае — на перевыпуск партий).
  • автоматизировать рутинные задачи. Используя стандартные шаблоны, можно сэкономить время на отрисовке дизайна и фотографировании продукции. Это актуально, например, для дизайнеров упаковки. Если бы мокапов не существовало, то, чтобы показать дизайн готового продукта, дизайнеру пришлось бы печатать и фотографировать пробные образцы, что долго и трудозатратно.

Какие бывают мокапы

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

Печатная продукция

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

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

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

Мокап ярких наклеек

Корпоративная атрибутика

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

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

Мокап визитки в черно-зеленых цветах

ИСКРА —
неделя знакомства
с дизайн-профессиями

Какие они — востребованные в IT дизайн-профессии? Знакомьтесь с ними в течение недели, выбирайте подходящую и получайте полезные подарки каждый день.

разжечь искру

Вывески

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

Гаджеты

Чтобы представить готовые дизайн-макеты заказчику, дизайнеры часто вставляют их в готовые «рамки» — на экраны ноутбуков и смартфонов. Это позволяет преподнести макет в более выгодном свете: не просто как картинку, а как готовый продукт в ситуации его использования человеком. Кроме того, такие мокапы позволяют красиво расположить на одном изображении сразу несколько экранов или страниц будущего сайта или приложения.

мокап для презентации сайта

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

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

мокап упаковки для молочной продукции

  • freepik.com. Огромный ресурс, где представлено более 40 млн мокапов, многие из которых бесплатны. Есть премиум-подписка, которая позволяет скачивать неограниченное количество файлов в течение определенного времени.
  • elements.envato.com. Удобный каталог с готовыми шаблонами, возможностью поиска с использованием фильтров и неограниченным количеством файлов для скачивания.
  • mockupworld.co. На данном сайте мокапы можно искать как по разделам, так и через строку поиска. База с шаблонами постоянно обновляется.
  • cssauthor.com. Сайт-агрегатор, на котором представлены мокапы со ссылками на ресурсы их авторов.
  • mockuplove.com. Ресурс обновляется редко, но помимо мокапов на нем представлено и большое разнообразие шрифтов.
  • zippypixels.com. Для скачивания готовых шаблонов на сайте необходимо зарегистрироваться. Ресурс предлагает массу бесплатных мокапов, но фильтры работают не всегда корректно, поэтому перед скачиванием обращайте внимание на цену.

Как подобрать подходящий мокап

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

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

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

реалистичный черно-белый мокап кружек

Инструменты для создания мокапов

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

  • 3Ds Max позволит создать рендер объекта с нуля;
  • Adobe Photoshop даст возможность проработать модель с учетом перспективных искажений, наложить тени, блики, отрегулировать резкость изображения и т. д.

Как вставить свой дизайн в мокап в Adobe Photoshop

Если готовый шаблон уже скачан, то нужно найти его в архиве и открыть в Photoshop. Как и в других похожих шаблонах, изображение разделено на слои. Пользователю нужно найти именно тот слой, на котором находится модель для редактирования. Как правило, его название — Your design here («Ваш дизайн здесь») или Your image here («Ваше изображение здесь»). Чтобы внести изменения, нужно дважды кликнуть мышкой на иконку слева от имени этого слоя, и тогда объект для редактирования откроется в новом окне. Теперь можно вносить свои изменения — добавить PNG-макет, текст, логотип и т. д. Далее сохраняем работу в этом окне через «Сохранить» или Ctrl + S. После этого нужно открыть основной проект, в котором вы увидите внесенные изменения.

ИСКРА —
неделя знакомства
с дизайн-профессиями

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *