Мои попытки понять, как самому сделать рабочий мокап

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

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

Можно проиллюстрировать:

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

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

Прототипы можно представить в разных форматах. Чаще всего это:

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

Что касается отрисовки мокапа самостоятельно:

Несколько важных моментов:

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

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

Классический фотосток — Freepik. На бесплатном тарифе дают 10 скачиваний в день. Я обычно выбираю подходящие мокапы в формате PSD либо в виде картинки — их просто загрузить в графический редактор, тот же Фотошоп. Ресурс располагает шрифтами, фотографиями, и вполне можно подобрать весь контент для проекта. Мокапы разные: сумки, футболки, вывески, кружки.

У Freepik даже появился отдельный редактор мокапов — всё сразу на сайте и завернуть. Для примера выбрал кепку, добавил рандомную надпись, и вот что вышло:

Другие сайты с коллекциями мокапов:

Расскажу про онлайн-сервисы для быстрого создания мокапов, потому что это максимально удобно: не скачиваете ни программу, ни шаблоны. Шаманите прямо в браузере.

Несколько хороших ресурсов:

Для мокапов выделена отдельная вкладка, где представлены шаблоны для одежды, устройств, интерьеров, логотипов, принтов и т.д. Макеты не одностраничные — каждый разбит на сцены, и их число может доходить до 30 и 40. Предметы показаны в разных ракурсах, стилях и обстановке — иногда делаю заказчику целую раскадровку.

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

Пример с кофе:

Сайт заточен только под мокапы для устройств — почти всё под технику Apple. Но среди них есть Samsung Galaxy и даже старая-добрая Nokia. Надо загрузить свою картинку/надпись, и мокап интерфейса сайта или приложения готов.

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

Понадобятся навыки работы в программах для трехмерного моделирования, о которых упоминал выше. Путь попроще — 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 или нейросети.

Какие выводы:

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