Мои попытки понять, как самому сделать рабочий мокап
Через мокапы легко донести свою идею до заказчика. Кстати, их используют не только дизайнеры как я, а еще разработчики, менеджеры и все те, кто хочет визуализировать продукт и показать его в презентации. Поделюсь опытом, как самому сделать мокап, где лучше. Будет парочка пошаговых инструкций.
Зачем делать мокапы и какие они бывают
Мокап — это модель объекта, на которую наносят будущий дизайн. Она помогает понять, как в реальности будет выглядеть иллюстрация или логотип на футболке, визитке, экране телефона. Всё потому, что картинка в графическом редакторе выглядит по-другому, чем на развороте журнала, кружке или уличном баннере. Веб-дизайн также визуализируют через мокапы.
Можно проиллюстрировать:
- интерфейсы сайтов и мобильных приложений.
- фасады магазинов и кафе;
- обложки и развороты журналов, книг;
- упаковки пищевой продукции и не только;
- товары с символикой бренда (мерч).
Мокап экономит мне силы и деньги. Заказчик открывает файл, смотрит и говорит, нравится или нет. Только после одобрения клиента и всех согласований я отправляю подготовленный макет на печать.
Некоторые путают мокап с макетом. Макет делают с текстом и картинками уже в нужных разрешениях для отправки на печать. Мокап — своего рода эскиз, наглядное представление идеи.
Прототипы можно представить в разных форматах. Чаще всего это:
- Файл в формате Фотошопа — PSD. В самой программе удобно послойно менять объект: целиком или конкретные детали.
- Статичная картинка. Мокап можно набросать в обычном графическом редакторе или даже браузере. Всего-то надо наложить логотип компании или текст на шаблон.
- Анимированный мокап. Тоже делается в специальной проге типа Adobe Creative Cloud.
- 3D-модель. Мокап посложнее, который оформляется в крутых программах — Blender, 3ds Max, Cinema4D.
Как я выбирал, где их делать
3 варианта, как создать мокап: отрисовать эскиз с нуля, отредактировать шаблон, сделать фото объекта и наложить на него свой дизайн. Последний прием особенно классно подходит для показа объекта в конкретном интерьере. Предпочитаю работу с шаблонами и фотографиями предметов. Сэкономленное время лучше потрачу на создание макетов для печати. Но иногда всё же работаю с оригинальными эскизами.
Что касается отрисовки мокапа самостоятельно:
- Его стоит создавать, если идея супер оригинальна и отличается от типичных шаблонов. Иначе это трата времени, когда можно скачать макет и переделать его под себя.
- Можно сделать собственный мокап и использовать его чаще чем один раз. Более практично и менее затратно, но эскиз всё равно подлинный — авторское право остается за дизайнером. Больше ни у кого не будет такого шаблона, если только не украдут у вас.
Как сделать итог реалистичным
Несколько важных моментов:
- Дизайн надо делать жизненным и правдивым — для этого добавьте антуража. Допустим, картину в мокапе можно показать в интерьере квартиры или дома, а не на голой стене.
- Выбираю мокапы с тенями, бликами, отражениями, чтобы чувствовалась фактура поверхностей, а эскиз не выглядел цифровой моделью. Не будет смотреться плоско и скучно.
- Стараюсь не набрасывать один-единственный идеальный мокап. В готовом шаблоне сделать разные варианты несложно, зато у клиента перед глазами будет не одна идея. Десятки раз спасало от переделок.
Легально ли использовать чужие шаблоны
Готовые мокапы круто экономят время, не надо возиться с каждой мелочью. Но брать их стоит не из поисковика, а на специальных ресурсах: в браузерных приложениях, магазинах, на фотостоках. Там их официально выложили — и можно со спокойной душой скачивать. Однако смотрите на лицензию: если разрешено использование для коммерческих проектов, точно можно не переживать.
Варианты с фотостоков и магазинов мокапов
Даже платить не всегда нужно, правда, тогда куча мокапов могут быть недоступны.
Классический фотосток — Freepik. На бесплатном тарифе дают 10 скачиваний в день. Я обычно выбираю подходящие мокапы в формате PSD либо в виде картинки — их просто загрузить в графический редактор, тот же Фотошоп. Ресурс располагает шрифтами, фотографиями, и вполне можно подобрать весь контент для проекта. Мокапы разные: сумки, футболки, вывески, кружки.
У Freepik даже появился отдельный редактор мокапов — всё сразу на сайте и завернуть. Для примера выбрал кепку, добавил рандомную надпись, и вот что вышло:
Другие сайты с коллекциями мокапов:
- Freemockup — русскоязычный ресурс, где мокапы можно подобрать для устройств, фирменных продуктов типа пакетов, футболок, упаковок.
- Mockups-design — англоязычный сайт с более чем 23 тыс. мокапов. Найдете йогурты, постеры, буклеты, книги, визитки, брошюры. Не надо ни регистрироваться, ни платить.
- PSD Freebies — страница с бесплатными эскизами. Есть полиграфическая продукция, варианты для соцсетей, веб-дизайна (различные иконки, баннеры на сайтах).
Встроенные шаблоны в редакторы
Расскажу про онлайн-сервисы для быстрого создания мокапов, потому что это максимально удобно: не скачиваете ни программу, ни шаблоны. Шаманите прямо в браузере.
Несколько хороших ресурсов:
Для мокапов выделена отдельная вкладка, где представлены шаблоны для одежды, устройств, интерьеров, логотипов, принтов и т.д. Макеты не одностраничные — каждый разбит на сцены, и их число может доходить до 30 и 40. Предметы показаны в разных ракурсах, стилях и обстановке — иногда делаю заказчику целую раскадровку.
Подбираю подходящий вариант, а потом перехожу в редактор и меняю надпись и картинку. На Renderforest надо платить, чтобы убрать водяные знаки.
Пример с кофе:
Сайт заточен только под мокапы для устройств — почти всё под технику Apple. Но среди них есть Samsung Galaxy и даже старая-добрая Nokia. Надо загрузить свою картинку/надпись, и мокап интерфейса сайта или приложения готов.
Сайт на английском. Шаблоны разбиты на категории — рамки для картин, гаджеты, обложки книг, упаковки товаров, одежда. Выбираю понравившийся мокап, загружаю свое изображение. С картинкой можно поработать: обрезать, отзеркалить, подкорректировать насыщенность цветов и даже наложить фильтр. Также легко что-нибудь написать или добавить фигуру.
3D-модели
Понадобятся навыки работы в программах для трехмерного моделирования, о которых упоминал выше. Путь попроще — Figma. К сожалению, сейчас открывается через VPN. Программа делает плоские прототипы, но их можно немного исказить и превратить в 3D через плагин Attention Insight. Плагин Vectary 3D Elements хорош, когда надо показать мокап на объекте — экране гаджета, футболке или кружке. О других плагинах можно почитать в статье Skillbox.
В чем профит оригинальных мокапов
Рисовать уникальный мокап — долго. Я уже писал о том, что оригинальный эскиз понадобится для демонстрации супер идеи.
Какие еще плюсы:
- подойдет для дизайна нестандартных предметов и размеров;
- экономит время в том, что не нужно искать идеальный и подходящий шаблон на сайтах;
- можно использовать как образец при дальнейшей подготовки макета к печати.
Как я сделал мокап сам в Фотошопе
В ФШ можно загрузить файл PSD, скачанный предварительно с сайта, либо сфотографировать объект. Поэтому отпадет вопрос, как из фото за пару шагов сделать мокап — добавить в редактор.
Небольшая инструкция:
1. Открываем Фотошоп, добавляем изображение.
2. Находим инструмент «Прямоугольник» на панели с левой стороны. Рисуем прямоугольник поверх области, где хотим расположить дизайн. Растягиваем — для этого мышкой тянем из одного угла в другой.
3. Переходим во вкладку «Слои» → «Смарт-объект» → «Преобразовать в смарт-объект».
4. Теперь подгоняем форму. Нажимаем на прямоугольник правой кнопкой мыши и выбираем «Свободное трансформирование».
5. Далее снова щелкаем правой кнопкой мыши — «Искажение». В примере у нас округлая чашка, поэтому жмем еще раз правой кнопкой и выбираем «Деформация». Это поможет сделать форму точнее. Советую глянуть видео про последнюю функцию.
6. Дважды нажимаем левой кнопкой мыши на миниатюру смарт-объекта на панели слоев с правой стороны. Прямоугольник откроется в новом документе. Текст или изображение перетягиваем на холст и растягиваем.
7. Нажимаем комбинацию клавиш Ctrl+S, чтобы сохранить изменения. Возвращаемся к мокапу, к которому автоматически добавился новый дизайн.
8. Сохраняем мокап. Желательно в двух форматах: в графическом — для отправки заказчику, в PSD — для внесения будущих изменений.
Как я тестировал нейросети
Не мог не затронуть искусственный интеллект. Он залез во все сферы, что для нас хорошо — можно набросать мокап за пару кликов.
На слуху — Fusion Brain. Это русскоязычная нейросеть от Сбера, бесплатная и доступная без регистрации. Легко меняет разрешение сторон, добавляет фон, убирает не понравившиеся объекты. С ее помощью можно также создавать видео и анимированные картинки.
Короткая инструкция:
1. Нажимаем «Открыть редактор». Для примера укажем промпт на русском — «Серая подушка с надписью “Счастье есть”». Надпись так себе, подушка обычная.
2. Попробуем то же самое на английском — «Make a mockup of a gray pillow with the inscription in Russian "Happiness is" with a tilt». С надписью опять провал, а композиция симпатичная.
Генератор мокапов по текстовому запросу есть у Fotor — одна из новых функций редактора. Еще там можно загрузить картинку для вдохновения, и нейросеть по ней сделает уникальный мокап. Инструмент называется «Image to image».
Инструкция:
1. Используем основную опцию — запрос по тексту. Промт пишем тот же, про подушку. Запускаем генерацию. ИИ не учел пожелание и оставил надпись на английском, да еще и с ошибками.
2. Теперь исправим промпт, напишем русскими буквами «Счастье есть». Результат мимо. Fotor подойдет больше для дизайна с англоязычными надписями.
Еще можно выбрать формат изображения и количество вариантов, которые ИИ должен выдать на один промпт. Иногда надо указывать негативные промты — через них мы говорим нейросети, чего точно не должно быть в результате. Советую изучить примеры негативных промтов, а также правила, которые помогут составить корректный запрос.
По итогу
В статье рассказал, как за несколько шагов из картинки сделать мокап. Проще всего на изображение наложить дизайн. Можно использовать конструкторы, графические редакторы типа Photoshop или нейросети.
Какие выводы:
- Нейросети развиваются, но неточностей в результатах генераций на русском и английском хватает. Как вариант, надпись можно поправить в графическом редакторе.
- Фотошоп и онлайн-сервисы дают возможности накладывать любой дизайн. Мастера могут отрисовывать даже фон и окружающую обстановку.
- Фотостоки и магазины подойдут для поиска вдохновения и скачивания шаблонных мокапов. В некоторых сервисах встроены конструкторы — там же можно накладывать дизайн.
Время для призыва поделиться опытом. Коллеги и не коллеги, какие способы используете для формирования мокапов? Может быть у вас более удачный опыт работы с нейросетями?