Мокап в фигме как сделать

Мокапы для фигма. Обзор плагина «Artboard Studio Mockups»

Сегодня вы узнаете как делать мокапы для фигма с помощью плагина «Artboard studio». У плагина есть множество бесплатных мокапов: телефонов (айфонов и телефонов на андроид), планшетов, компьютеров (ноутбуков, макбуков), бутылок, книг, визиток, упаковок и т.д.

Смотрите видео, либо воспользуйтесь текстовой версией инструкции ниже.

Мокапы для фигма. Как установить плагин с мокапами?

Чтобы установить плагин с мокапами в фигма перейдите по ссылке и нажмите на кнопку сверху «Install».

Активация плагина «Artboard Studio Mockups» в Figma

Чтобы активировать плагин в Figma нажмите на меню слева и наведите на надпись «Plagins» далтее выберите «Artboard Studio Mockups» «Add Mockup Item».

В появившемся всплывающем окне нажмите на ссылку, как показано на скриншоте выше.

Вас перенаправит на сайт сервиса artboard.studio, где вам необходимо будет зарегистрироваться. На первом шаге нужно ввести email и пароль, либо войти с помощью Facebook или Google.

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

После регистрации снова нажмите на ссылку, которая есть в плагине «Artboard Studio» в Figma.

Вас перенаправит на страницу, где вы сможете сгенерировать Api Key. Для этого нажмите на синею кнопку справой стороны. Затем скопируйте появившийся ключ.

Вставьте Api key в окно плагина в фигме и нажмите на кнопку «Save and continue».

Мокапы для Figma. Как пользоваться плагином.

Пользоваться мокапами в фигме очень просто. Для этого запустите плагин Artboard Studio и выберите понравившийся вам мокап из представленного списка.

Вы можете производить поиск мокапов с помощью верхней строки поиска. Если хотите вставить мокап телефона, то введите «Iphone» или другую марку. Введите в окно поиска «laptop», если хотите найти мокап ноутбука. Аналогично можно искать мокапы книги, визитки, макбука, упаковки и т.д.

Если нажмёте на выпадающий список с надписью «All items», то появится возможность выбрать бесплатные мокапы «Free items» или платные «Premium items».

Можно сортировать мокапы если развернуть список, который есть по центру.

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

Как вставить мокап в фигме с помощью плагина

Чтобы вставить мокап в фигме с помощью плагина Artboard Studio Mockups, выберите нужный мокап из списка. Для примера выберу ноутбук.

При вставке мокапа в ваш проект в Figma, у вас появится 2 элемента: ноутбук и фрейм куда необходимо вставить ваш дизйан.

Если ваш дизайн больше фрейма, который появился, то уменьшите размер дизайна с помощью клавиши «K».

Вставьте ваш дизайн в фрейм, как показано на скриншоте выше. Выберите фрейм и нажмите на кнопку «Render selected frame» в плагине.

Ву-а-ля! Вы ставили свой дизайн макет в мокап ноутбука.

Аналогичную операцию можно проделать для айфона и вставить ваш дизайн в мокап телефона.

Заключение

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

5 полезных плагинов для Figma: 3D-иллюстрации

Как быстро добавить на макет реалистичный мокап, иллюстрацию и написать текст в стиле WordArt.

OlyaSnow для Skillbox Media

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

Рассказываем, какие плагины для Figma помогут вам работать с 3D-иллюстрациями.

3D Transformer

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

Vectary 3D Elements

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

Коллекция мокапов в плагине Vectary 3D Elements поможет показать, как ваш дизайн выглядит в деле — хоть на экране айфона, хоть на балончике с краской, хоть на худи, хоть на скафандре!

Также плагин позволяет выгрузить раскладку текстуры для макета и использовать собственную 3D-модель.

Если вам вдруг понадобятся 3D-надписи, не обязательно делать их в сторонних сервисах или в Blender. Решить эту задачу в Figma поможет плагин Roto, который делает объёмными любые фигуры и текстовые блоки.

Handz 3D Illustration

В любом лендинге есть акцентные иллюстрации, которые помогают читателю понять структуру статьи и направляют его внимание. Если у вас нет под рукой иллюстратора, а лендинг нужно скоро показывать клиенту, попробуйте использовать коллекцию рук из плагина Handz 3D Illustration.

Addjust

Ещё один набор 3D-иллюстраций, но уже с сортировкой по категориям — соцсети, абстракции, руки, примитивы. У каждой можно изменить цвета, перспективу и размер.

Бесплатно доступны не все настройки. Доступ ко всем функциям обойдётся в 12 долларов в месяц.

Figma. Как в Figma можно делать мокапы девайсов и других объектов с помощью плагинов.

Показать панель управления

Комментарии • 77

Очень полезно и интересно. Большое спасибо!

Спасибо за четкий ответ без вводы 😉

Спасибо Вам огромное! Вы меня прям спасли!

Спасибо, очень полезная информация!!

Все получилось. Благодарю.

Я очень рад, Марина!

поняла. работает) спасибо. Render Selected Frame нужно было нажать))

@Екатерина Е и у меня(

У меня при нажатии этой кнопки создаётся опять пустой фрейм

На случай если тут есть люди кто не понял как добавлять плагины в фигме. Вам надо нажать на те же три полосочки, потом на plugins и далее manage plugins, потом нас перекинет на главную страницу, далее нажимаем community и в строке поиска вбиваем mockup, готово🙃

@Ангелина Чхетия Фигма переделала интерфейс, выберите вместо своего профиля community и правее увидите поле поиска

@Ангелина Чхетия вы через браузер или десктопную версию работаете?

А что делать если нет строки поиска? Высветился мой профиль

Спасибо, очень подробная инструкция )

Большое спасибо за видео!

И вам спасибо за участие

Ай, красавец! Спасибо! Замечательная штукенция.

Да, думаю еще много появится подобного

спасибо добрый человек за видео!

Настя, и вам за участие спасибо!

Здравствуйте. Возникла проблемка. При нажатии на кнопку «render selected frame», всплывает ошибка: » Eror selected item or frame is not compatible with this plugin. Please select a compitible frame for first.» Хотя размеры фрейма соответствуют выбранному мокапу. Подскажите пожалуйста

Пиши в телегу, давай посмотрим конкретный проект

Для тех у кого выдает ошибку. Фишка в том что не нужно закрывать менюшку с мокапами которые идут на выбор. 1) запустили плагин. 2) выбрали подходящий мокап 3) поставили картинку в мокап 4) нажали синюю кнопочку в менюшке со всеми мокапами Rended selected frame. ВСЁ

Спасибо за ценный совет!

сейчас
Спасибо за видео.Очень понятно. но у меня возникла проблемка. Не появляется кнопка quick render не появляется!((( Уже скачала декстопную версию фигмы и тоже самое. делаю так как же как и на видео..а этой кнопки нет(

На случай если тут есть люди кто не понял как добавлять плагины в фигме. Вам надо нажать на те же три полосочки, потом на plugins и далее manage plugins, потом нас перекинет на главную страницу, далее нажимаем community и в строке поиска вбиваем mockup, готово🙃

@design invision что-то я не поняла где что нажимать надо 😅

@design invision так работает, спасибо!)

15 бесплатных онлайн инструментов для создания мокапов

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

С этими онлайн приложениями вы сможете создават мокапы:

Бесплатные мокапы

Smartmockups

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

Mockuuups Studio

Приложение для создания мокапов доступное для Windows, Mac и Linux. В арсенале имеется более 700 различных мокапов с техникой и красивыми сценами. Мокапы имеют высокое разрешение 5472×3648.

PlaceIt by Envato

Мощный генератор мокапов от Envato. Библиотека насчитывает более 30 тысяч объектов и сцен.

Shotsnapp

Бесплатный и простой инструмент для создания макетов устройств для вашего приложения и дизайна веб-сайтов. Минус: Не поддерживает Safari.

Animockup

Позволяет создавать бесплатные анимированные макеты продуктов с видео и анимированные GIF-файлы.

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

Pixelsurplus

Небольшая библиотека с бесплатными и красивыми мокапами для презентаций. Из минуса: нет онлайн редактирования.

Threed

Создавайте пользовательские макеты 3D-устройств в своем браузере.

Device Shots

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

Store Previewer

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

Facebook Design

Dimmy.Club

Простой Генератор мокапов устройств для ваших скриншотов.

MagicMockups

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

MockDrop

Небольшая коллекция мокапов. С простым редактированием.

Rotato

Одно из лучших приложений на Mac для создания анимационных мокапов.

Простой и быстрый способ добавить субтитры к вашим видео в Интернете.

Screen Guru

Делайте чистые скриншоты любого веб-сайта.

Screenly

Мгновенно превратите свои скриншоты в красивые мокапы рабочего стола.

Artboard Studio

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

Prewiwed

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

Позволяет выбирать 3d модели и готовые шаблоны сцен и крутить их как душе угодно.

MockJar

712+ реалистичных мокапов для вашего дизайна

⚡ Если тебе понравился этот материал, ты можешь подписаться на мой Instagram / Facebook / Medium / Linkedin. Там ты найдешь больше интересных материалов о дизайне.

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

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

Все. Легко, не правда ли? В некоторых генераторов мокапов есть возможность демонстрации дизайна в большом количестве ракурсов, что существенно расширяет возможности дизайнера. FreelanceToday предлагает вашему вниманию 10 бесплатных генераторов макапов.

Генератор Mockuper содержит более 150 высококачественных изображений для показа дизайна интерфейса. И это не только компьютеры или мобильные устройства, также есть книги, баннеры, рамки, карточки и многое другое. Так что это генератор мокапов на все случаи жизни. В генераторе имеется функция расширенного поиска, с помощью которой можно быстро найти подходящее изображение. При загрузке скриншота или другого исходника можно обрезать изображение, если нужно продемонстрировать не весь дизайн, а лишь его часть. Также есть возможность редактирования изображения, например, можно регулировать такие параметры как яркость или прозрачность.

Количество макетов: 155+

Среда: десктоп, мобильные устройства, книги, баннеры, визитки и многое другое

Формат: PNG

Разрешение по ширине: 700-3800 пикселей.

Smartmockups это бесплатный генератор мокапов с большим количеством сцен в различном разрешении. Созданные мокапы можно использовать как угодно: в цифровом или печатном виде, при наличии нужных навыков можно создавать новые сцены, готовые макеты разрешается использовать в личных и коммерческих проектах. Все предметы, с помощью которых можно продемонстрировать дизайн, разбиты на категории для удобства пользователя. Чтобы найти нужный макет, можно воспользоваться функцией поиска по тегу. Также можно отфильтровать изображения по запросам iOS, Android, Windows Phone и так далее.

Количество макетов: 150+

Среда: десктоп, ноутбук, планшет, смартфон, часы

Формат: PNG

Разрешение по ширине: 880-2500 пикселей.

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

Количество макетов: 25+

Среда: ноутбук, телефон, планшет, рамки

Формат: JPEG

Разрешение по ширине: 960-5000 пикселей.

Бесплатный генератор мокапов Dunnnk содержит более 55 уникальных предметов. В основном создатель генератора сосредоточился на демонстрации дизайна для iPhone. Это специализированный генератор, поэтому выбор изображений компьютеров и ноутбуков весьма невелик. За дополнительную плату можно скачать некоторые готовые мокапы в формате PSD.

Количество макетов: 55+

Среда: iPhone, Android, MacBook, iMac, Apple Watch

Формат: JPEG

Разрешение по ширине: 2000 пикселей.

Количество макетов в генераторе MockupJar невелико, но это действительно качественные изображения, идеально подходящие для демонстрации дизайна. Помимо электронных устройств в MockupJar можно также найти рамки, бумажные стаканы и футболки. Эти макеты можно использовать, к примеру, для показа логотипа сайта. Всего в генераторе насчитывается 20 реалистичных изображений, доступ к дополнительным макетам платный, 10 евро в месяц. В отличие от других генераторов, в MockupJar можно продемонстрировать, как будет выглядеть сайт в браузере, при этом есть возможность изменения цвета фона.

Количество макетов: 20+

Среда: iPhone. Android, MacBook, браузеры, физические носители

Формат: JPEG

Разрешение по ширине: 320-2560 пикселей.

Главным отличием бесплатного генератора мокапов MockUPone является большое количество исходных изображений. К примеру, если нужно показать, как будет смотреться приложение на экране iPhone, то у дизайнера есть широкий выбор: представлены модели 7, 7 Plus, 6, 6 Plus и так далее до 5С. Однако есть и минусы, все макеты сделаны в одном ракурсе, в фас, что несколько ограничивает возможности реалистичного показа. Готовые изображения можно сохранить в форматах JPEG, PNG или PSD, рекомендуемый размер файла 1242х2208 для iPhone. Помимо смартфонов от Apple в генераторе есть множество других макетов электронных устройств, в том числе телевизоров.

Количество макетов: 80+

Среда: iOS, Android, Windows Phone, ноутбуки, десктопы, телевизоры

Формат: PHG, JPEG

Разрешение по ширине: 2000+ пикселей.

В MockDrop можно найти одну из самых больших коллекций бесплатных макетов, генератор предлагает на выбор более 100 изображений. Чтобы использовать этот инструмент, потребуется установить на компьютер последнюю версию браузера Chrome, Firefox или Safari. Сервис очень быстрый, создатели сервиса постарались максимально сократить время работы над мокапом. Пожалуй, это самый быстрый генератор мокапов из всех и при этом он совершенно бесплатный.

Количество макетов: 100+

Среда: смартфон, ноутбук, десктоп, часы, планшет, телевизор

Формат: JPEG

Разрешение по ширине: 3000 пикселей.

Количество макетов: 10+

Среда: компьютеры, смартфоны, ноутбуки, физические носители

Формат: JPEG

Разрешение по ширине: 2400.

GpaphicTwister это ресурс, где можно найти огромное количество высококачественных макетов, в том числе и бесплатных. Готовые мокапы можно использовать как в личных, так и коммерческих проектах. Одним из достоинств этого сервиса является наличие интерактивного генератора мокапов, который позволит создать презентацию без использования Photoshop. Выбор макетов невелик, их чуть больше 20, но зато сервис бесплатный. Перед тем, как сохранить изображение, можно обрезать скриншот, подогнав его под размер экрана.

Количество макетов: 20+

Среда: iPhone, iMac, iPad, телевизор, постер, рамка

Формат: PNG

Разрешение по ширине: 1200 пикселей.

Генератор GetMocky содержит более 100 качественных макетов, для удобства пользователей разбитых на несколько категорий. Поиск подходящего исходника осуществляется по тегам. Это позволяет найти нужный макет в самые короткие сроки. Среди бесплатных шаблонов можно выбрать файлы малого и среднего размера. Если же нужно создать изображение в формате HD (1440 пикселей), Full HD (1920) или Original Size (4000+), придется заплатить.

Количество макетов: 100+

Среда: десктоп, ноутбук, планшет, смартфон, часы.

Формат: PNG

Разрешение по ширине: 480 и 720 пикселей.

ВМЕСТО ЗАКЛЮЧЕНИЯ

Эти 10 бесплатных генераторов мокапов позволяют существенно сэкономить рабочее время дизайнера и при этом не требуют хороших навыков работы с Photoshop. Пользователю достаточно найти подходящий макет, загрузить скриншот или логотип и сохранить готовое изображение. Все работает очень просто. И, что самое важное, у дизайнера есть огромный выбор – можно найти ноутбук или смартфон в любом ракурсе. Огромный выбор сред повышает шансы на создание качественной презентации – заказчик получит возможность увидеть, как будет смотреться дизайн на устройстве любого типа.

Figma. Как в Figma можно делать мокапы девайсов и других объектов с помощью плагинов.

design invision

Artboard Studio — качественные мокапы теперь доступны как плагин в Figma. Мой сайт: 🤍mikekaynov.ru. Репетиторство по дизайну — приходите в Telegram или пишете на почту на сайте ) Музыка в видео: Music Credit: Ross Bugden Track Name: «Olympus» Music By: Ross Bugden 🤍 🤍soundcloud.com/rossbugden Official «Ross Bugden» YouTube Channel: 🤍🤍youtube.com/channel/UCQKG. License for commercial use: Creative Commons Attribution 4.0 International (CC BY 4.0) 🤍creativecommons.org/licenses/. Music promoted by NCM 🤍goo.gl/fh3rEJ

Большое спасибо за видео!

Для тех у кого выдает ошибку. Фишка в том что не нужно закрывать менюшку с мокапами которые идут на выбор. 1) запустили плагин. 2) выбрали подходящий мокап 3) поставили картинку в мокап 4) нажали синюю кнопочку в менюшке со всеми мокапами Rended selected frame. ВСЁ

Спасибо Вам огромное! Вы меня прям спасли!

добрый день, почему то после добавления картинки, когда второй раз захожу в плагин не появляется quick render, только add, почему так?

спасибо Вам огромное за плагин

Спасибо, но почему телефон получается такой маленький? Менее 300 пикселей и не увеличивается. как можно увеличить?

Здравствуйте. Возникла проблемка. При нажатии на кнопку «render selected frame», всплывает ошибка: » Eror selected item or frame is not compatible with this plugin. Please select a compitible frame for first.» Хотя размеры фрейма соответствуют выбранному мокапу. Подскажите пожалуйста

Добрый день. А где взять тот самый ключ на artboard?

Авторы проекта придумали самые нужные ракурсы. Мокапы наилучшим образом представляют ваше UI-приложение или веб-сайт.

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

Скачать бесплатные мокапы iPhone, iPad, iMac, MacBook для Figma, Sketch, Photoshop

Бесплатные мокапы

Мокапы для веб-сайтов и приложений.

Скачайте бесплатные мокапы популярных гаджетов и устройств от Apple, Android, Windows и других производителей и компаний.

Вы можете скачать мокапы бесплатно или получить доступ ко всем макетам по подписке:

Благодаря 3D-слоям в Photoshop вы можете использовать идеальные макеты деформации для складных устройств.

Все отделено
Фоны и устройства изменчивы и разделены

Огромное разрешение
Разрешение 6000 x 4500 пикселей подходит для любых задач

Для Sketch, Photoshop и Figma
Легко работать в любимом программном обеспечении для версии Sketch вам необходимо установить бесплатный плагин Magic Mirror или плагин Angle
для версии Figma вам необходимо установить бесплатный плагин Mockup

Супер качество
Только идеальные, чистые, четкие и красивые рендеры

Скачать мокапы для брендирования

Мокапы с пленкой, тканью, мокапы стикеров и другие.

Скачать мокапы для упаковки

Мокапы для продуктов, упаковки, товаров.

Анимационные мокапы

В библиотеке можно найти большое количество анимационных мокапов.

Figma. Как в Figma можно делать мокапы девайсов и других объектов с помощью плагинов.

design invision

Artboard Studio — качественные мокапы теперь доступны как плагин в Figma. Мой сайт: 🤍mikekaynov.ru. Репетиторство по дизайну — приходите в Telegram или пишете на почту на сайте ) Музыка в видео: Music Credit: Ross Bugden Track Name: «Olympus» Music By: Ross Bugden 🤍 🤍soundcloud.com/rossbugden Official «Ross Bugden» YouTube Channel: 🤍🤍youtube.com/channel/UCQKG. License for commercial use: Creative Commons Attribution 4.0 International (CC BY 4.0) 🤍creativecommons.org/licenses/. Music promoted by NCM 🤍goo.gl/fh3rEJ

Большое спасибо за видео!

Для тех у кого выдает ошибку. Фишка в том что не нужно закрывать менюшку с мокапами которые идут на выбор. 1) запустили плагин. 2) выбрали подходящий мокап 3) поставили картинку в мокап 4) нажали синюю кнопочку в менюшке со всеми мокапами Rended selected frame. ВСЁ

Спасибо Вам огромное! Вы меня прям спасли!

добрый день, почему то после добавления картинки, когда второй раз захожу в плагин не появляется quick render, только add, почему так?

спасибо Вам огромное за плагин

Спасибо, но почему телефон получается такой маленький? Менее 300 пикселей и не увеличивается. как можно увеличить?

Здравствуйте. Возникла проблемка. При нажатии на кнопку «render selected frame», всплывает ошибка: » Eror selected item or frame is not compatible with this plugin. Please select a compitible frame for first.» Хотя размеры фрейма соответствуют выбранному мокапу. Подскажите пожалуйста

Добрый день. А где взять тот самый ключ на artboard?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мокап – что это и зачем нужен в дизайне

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

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

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

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

Примеры мокапов

Moкап фирменного стиля

Мокап книги

Мокап для ресторана

Мокап футболки

Мокап флаконов

Мокап визиток

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

Где скачать мокап (бесплатно и платно)

Мокапы можно купить или скачать бесплатно. Существует много бесплатных и платных ресурсов:

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

Как создать мокап самому

Самостоятельно мокапы можно создавать с помощью HTML и CSS или воспользоваться онлайн-ресурсам:

Как работать с готовым мокапом

После скачивания архива с готовым мокапом, из архива нужно извлечь файлы и найти файл в PSD-формате. Далее его нужно открыть в программе Photoshop.

В макете можно менять картинки, изменять фон и цвет, добавлять тени. Объект можно поворачивать и перемещать.

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

Найдите слой, который называется «Your design here». Когда вы кликните на иконку этого слоя, откроется окно, куда и нужно загрузить вашу картинку.

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

Давайте рассмотрим алгоритм действий на конкретном примере:

Где используются мокапы

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

Мокапы используются в:

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

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

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

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

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

Мокапы в веб-дизайне

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

Мокапы помогают правильно:

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

Мокапы в рекламе

Трехмерная визуализация продукта чрезвычайно эффективна в рекламе. Например, реклама аппетитных гамбургеров ресторанов быстрого питания «McDonald’s». Ведь это не просто картинки.

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

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

Вместо вывода

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

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