Как сделать мокап самому с нуля конструктор

Обновлено: 19.05.2024

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

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

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

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

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

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

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

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

Минус: Не поддерживает Safari.

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

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

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

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

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

Файлы изображений и эскизов популярных устройств.

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

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

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

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

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

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

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

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

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

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

В статье какой-то утиль из прошлого века

Я улучшил статью и добавил предлагаемые вами ссылки. Заслуживает ли теперь материал вашего лайка?

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

Ну не все утиль ) Есть попроще инструменты, есть посложнее. Спасибо за ссылки. Есть действительно крутые сервисы, не знал о них.

Спасибо большое. Полезные ссылочки

Добавил в закладки, спасибо!

Подборка супер - спасибо! Как раз в кассу.

Кстати вот выбор этого мусора что ты назвал книгами лучшими, это лицемерие )))) книги эти мусор ,фиговый у тебя алгоритм.

песня для автора поста

Очень хорошая песня, спасибо.

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

А еще твой сайт закон о языке почему не выполняет ? это этот сайт Русский ,а твой то то где? Ukraine, Kiev, Prospect Geroev Stalingrada 24 Так что же нарушаем?

Сегодня в выпуске — обзор инструмента для прототипирования приложений Mockup.io, подготовленный его командой.

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

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

  • удешевляют разработку, так как многие правки вносятся в wireframes (черновой макет — прим. ред.), которые намного дешевле и быстрее менять, чем финальный UI или готовое приложение.
  • позволяют быстро находить и улучшать «узкие» места дизайна и юзабили задолго до начала разработки приложения;
  • помогают реалистично и наглядно демонстрировать команде и клиенту концепцию будущего приложения: от основных моментов до нестандартных переходов;
  • упрощают процесс общения между всеми участниками процесса, обсуждение и утверждение дизайна и работы будущего приложения.

Что такое Mockup.io

Mockup.io — это коммуникационная платформа, которая, позволяет:

  1. презентовать макеты страниц приложений;
  2. обсуждать и комментировать их;
  3. создавать интерактивные high-fidelity прототипы;
  4. тестировать UI на реальных iOS и Android-устройствах.

В основном она предназначена для UI/UX-дизайнеров и разработчиков мобильных приложений. Но и обычный предприниматель — например, заказчик приложения тоже сможет пользоваться ею без труда.

Существенным преимуществом Mockup.io является то, что ее создатель — компания Alterplay — уже много лет занимается разработкой мобильных приложений. Поэтому функциональность Mockup.io основана на реальном опыте команды и решении насущных проблем аудитории.

Стоимость

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


Если вам нужны специальные условия подписки, можно обратиться напрямую в компанию.

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

Основными конкурентами Mockup.io являются такие приложения, как Notism, InVision, RedPen, Marvell App. Все они основаны на работе с готовыми мокапами страниц.

Основные преимущества каждой из платформ:

Mockup.io InVision Marvell RedPen Notism
Неограниченное число приглашенных пользователей проекта Просмотрщик прототипов на Apple Watch Экспорт прототипов в app (.apk) приложение Точечные отзывы на прототипах Инструменты для рисования
Предварительный просмотр иконки для iOS, Apple Watch и Android-устройств Одновременное комментирование в режиме реального времени Таймер для отсрочки транзишенов (переходов) в интерактивных прототипах Контроль версий Одновременное комментирование в режиме реального времени
Нативное Android приложение Доски для мокапов с разными статусами (Kanban style) Синхронизация с Dropbox Синхронизация с Basecamp и Asana
Нативное iOS-приложение Инструменты для рисования Прикрепеленные прототипы (embedded) Экспорт всего проекта в PDF
Папки в проектах Создание to-do-списков из отзывов Импорт из Sketch, PhotoShop Создание to-do-списков
Автоматическое обрамление всех мокапов в рамки выбранного устаройства Запись поведения пользователя и его мимики (Lookback.io) Запись поведения пользователя и его мимики (Lookback.io) Настраиваемый вид предварительного просмотра всего проекта
Доступные цены Импорт из Sketch, PhotoShop Контроль версий
Метки для мокапов Синхронизация с Dropbox
Контроль версий

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

Основные возможности Mockup.io

Презентация дизайна приложения

Автоматическое обрамление загруженных мокапов в виртуальные фреймы устройств: iPhone, iPad, Apple Watch, Android Phone, Android Tablet, либо абстракного устройства (для кастомных размеров экранов). В новой версии уже добавлен фрейм для iPad Pro.

Создание интерактивных прототипов

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

Совместная работа

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

Предварительный просмотр иконки

Загрузка нескольких иконок в проект — позволяет загрузить несколько разных икокнок и увидеть, как каждая из них будет выглядеть в реальном контексте: на домашнем экране устройства или в магазине (App Store или Play Market).

Тестирование прототипа на реальном устройстве

Нативные iOS и Android для тестирования прототипа на реальных устройствах: iPhone, iPad, Android Phone, Android Tablet.

Организация проекта

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

Настраиваемая система меток позволяет присваивать мокапам различные статусы: «в работе», «утверждено», «ждет обсуждения».

Поддержка анимаций и скрола

Приложении поддерживает GIF-анимированные макеты и «длинные» страницы (при загрузке в Mockup.io автоматически трансформируются в страницы со скроллом).


Использование приложения

При создании проекта необходимо выбрать устройство, для которого вы будете прототипировать: iPhone, iPad, Apple Watch, Android Phone, Android Tablet, либо пользовательское устройство (необходимо указать размеры экрана).


Управление проектом осуществляется через меню настроек (Project Settings). Оно доступно внутри каждого проекта, в правом верхнем углу. Это меню позволяет:

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


Контекстное меню проекта (вызывается правой кнопкой мыши) позволяет:

  • загружать макеты страниц (так же возможно это сделать через drag&drop);
  • создавать папки в проекте;
  • загружать разные версии иконок для предварительного просмотра.


Хотелось бы отдельно остановиться на возможности предварительного просмотра иконки. Тот, кто сталкивался с разработкой и продвижением приложения в App Store или Google Play Market, знает, как сильно иконка влияет на восприятие приложения целевой аудиторией. Особенно при первом визуальном контакте. Хорошая иконка может существенно улучшить уровень продаж, привлекает внимание пользователя, влияет на запоминаемость приложения.

В Mockup.io есть возможность загрузить несколько вариантов иконки и оценить их внешний вид в реальном контексте: на экране устройства, в листинге или на страничке приложения в App Store или Play Market.


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


Например, для создания интерактивных ссылок в прототипе используется меню «Links and Scrolling». Интерактивная (кликабельная) зона выделяется левой кнопкой мышки. В появившемся окне можно выбрать экран, на который эта зона будет ссылаться.


Не забываем и про нативные iOS или Android-анимированные переходы между страницами (transitions). В Mockup.io можно выбрать любую из существующих анимаций перехода от страницы к странице.


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

Кроме линковки страниц, меню «Links and Scrolling» позволяет работать с «длинными» страницами — настраивать фиксированные зоны для скроллинга. Для того, чтобы эти зоны можно было устанавливать максимально точно, в Mockup.io предусмотрена небольшая лупа. Она немного увеличивает ту зону, в которой устанавливается фиксатор.



Как мы говорили ранее, любой из прототипов для iOS или Android-устройств можно запустить на реальном телефоне или планшете. Для этого потребуется скачать и установить приложение из App Store или Google Play.


После запуска Mockup.io на устройстве вы попадете в список доступных проектов (созданных вами или в которые вы приглашены). Выбрав нужный проект и экран, с которого необходимо начать работу с прототипом, нажимаете кнопку Play.

При этом интерактивные зоны на каждом их мокапов будут подсвечены голубой рамкой. В приложении поддерживаются GIF-анимированные мокапы. «Длинные» страницы будут отображены как страницы со скроллингом.

Для удобства новых пользователей, в веб-приложении создан демонстрационный проект, который отображает основные возможности Mockup.io. Он доступен в тот момент, когда проект уже создан, но в него не загружено ни одного мокапа.


Планы и прогнозы

За последние годы приложения для мобильных телефонов становятся must-have для многих компаний. Это уже не прихоть, а необходимость: пользователь все больше и больше действий совершает с мобильных устройств, пользуется электронными аксессуарами.

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

Главные преимущества Mockup.io:

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

Mockup.io относится к инструментам прототипирования, которые работают с готовыми мокапами страниц: это могут быть схематические макеты или полностью нарисованные дизайны. Она не предназначена для построения страниц приложения «с нуля» и не поддерживает работу со слоями. Альтернативой работы со слоями может служить поддержка GIF-анимированных макетов.

Несмотря на свою простоту, Mockup.io — очень продуманный инструмент. В процессе работы с ним открываешь для себя очень много приятных «мелочей», которые существенно упрощают работу. Это еще раз доказывает тот факт, что инструмент создавался специалистами, которые постоянно работают с прототипами и знают, как можно улучшить и упростить работу с ними.

Присылайте собственные интерфейсные кейсы, в результате которых вам удалось заметно улучшить (или, наоборот, ухудшить) показатели проекта, а также описания инструментов, которые будут полезны представителям индустрии. Интересные материалы обязательно попадут на страницы рубрики «Интерфейсы».

Egor Komarov

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

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

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


Бесплатный Figma плагин с мокапами

Figma плагин от ls.graphics - это самый простой и удобный способ работы с качественными мокапами в Figma. Кроме этого, в нем уже есть новейшие мокапы iPhone 13. 🤘🏻 Это реально крутой плагин, с реально крутыми и качественными мокапами.


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. Там ты найдешь больше интересных материалов о дизайне.

Egor Komarov


ScreenSpace - 3d анимационные мокапы

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

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

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


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

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


Анимационный мокап создать онлнай бесплатно

Кроме это в платной подписке вы можете: создавать 4k видео, экспортировать видео с альфа-каналом и создавать неограниченное количество роликов без водяного знака и работать над проектами совместно.

Мой вердикт:

Потенциально облачный сервис сделан неплохо. Но при этом, шаблонов готовых анимаций мало. Макеты для последних флагманов разработчики не завезли, отсутствует iPhone 12 элементарно. Цена за подписку очень велика. Большие амбиции, которые не соответствуют действительности. Но при этом, сегодня действительно мало подобных готовых 3d решений и это проект определенно заслуживает внимания.

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

Генераторы мокапов

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

  • Выбирается окружающая среда (десктоп, мобильное устройство, смарт-часы и т.д.)
  • Загружается скриншот сайта (или его URL)
  • Результат сохраняется в нужном разрешении.

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


Сервис Mockuper

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

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

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

Формат: PNG

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

Генератор Smartmockups


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

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

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

Формат: PNG

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

Сервис Magic Mockups


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

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

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

Формат: JPEG

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

генератор Drunnnk


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

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

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

Формат: JPEG

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


Генератор Mockupajar

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

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

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

Формат: JPEG

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


Сервис Mockuphone

Главным отличием бесплатного генератора мокапов 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


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

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

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

Формат: JPEG

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

Сайт Mediamodifier


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

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

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

Формат: JPEG

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


GpaphicTwister

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

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

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

Формат: PNG

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

Генератор GetMocky


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

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

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

Формат: PNG

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

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

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

Читайте также: