Как создать мокап: Как сделать мокап самому и что это такое

Как создать мокап из обычной фотографии (БОНУС ВНУТРИ!) — Веб-дизайн. Блог Евгения Бонда. Услуги дизайна

Перейти к контенту

Рубрика: Без рубрикиАвтор: Евгений Бонд

Привет! Сегодня опишу небольшой процесс создания мокапа по фотке. Этот процесс — основной принцип таких мокапов.

Задача стояла сделать иллюстрацию по продажам продуктов 1С в слайд на сайт.

1. Это поиск нужного ракурса на стоке.
2. Обводим все грани коробок инструментом pen tool (перо) в режиме shape (фигуры) и избавляемся от фона.

 

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

Подходим к самому важному и интересному!

4. Для того, что бы создать наложение на коробку правильных размеров, используем измерительный инструмент ruler tool (линейка) и измеряем каждое из двух ребер коробки. Как видите сверху, параметр L1 равен 544 пикселям. Точно так же измеряем и другую грань коробки.
5. Затем, зная длину и ширину сторон лицевой части коробки, создаем прямоугольник с нужными нам параметрами высоты и длины.
6. Затем увеличиваем слой дважды с указанием увеличивать пропорционально (ключик справа от 200% должен быть нажат)
7. Конвертируем увеличенный слой в смарт объект.

Smart object (смарт объект) — это слой или группа слоев, масок, коррекций, объединенных одним объектом, который сохраняет в себе всю структуру и изменения непосредственно не затрагивая сам объект. Двойным кликом по смарт объекту мы попадаем в ту самую структуру о какой я говорю и там уже непосредственно можем вносить изменения.

По сохранению структуры, она же psb, смарт-слой (объект) обновляется внешне. Если в смарт объект вложить оригинальную фотографию размерами 8000х5000 пикселей, а сам смарт объект деформировать то в меньшую величину то в большую то качество фото не испортится (Но стоит понимать, если превысить величину оригинальной фотографии-исходника, начнут появляться артефакты). К чему я все это? Да к тому, что смарт слоями можно оперировать очень много раз не теряя исходного качества и не прибегая к необратимым изменения исходника!

И после конвертации уменьшаем сформировавшийся смарт в 2х раза по тому же принципу как и увеличивали.

8. Сейчас еще интереснее! Нам понадобятся такие пункты деформации как Distort, Warp и обычный scale (ситуативно). Все достаточно просто, попробуйте в инструменте distort подвигать за опорные точки и наложите верным образом смарт объект на лицевую сторону коробки. А инструментом warp подкорректируйте моменты, где есть скругления или неровности.

 

9. В навигаторе по слоям расположите смарт объект над слоем с фигурой стороны, который мы создавали в шаге 2 и примените clipping mask к смарт-слою. Пкм по смарт-слою create clipping mask или наведите курсор между смарт-слоем и слоем-подложной (шейп из шага 2) и нажмите alt. Что бы выглядело так
10. Сторона мокапа готова к наполнению! Простым двойным кликом по смарт-слою мы попадем в новый документ (структуру, а котором я говорил в пометке о смарт в шаге 7), где и можем вставить фон коробки

Все готово, спасибо что заглянул! И бонус получай! Заходи еще!

0

Понравилась статья? Поделить с друзьями:

Что такое мокап? Как сделать mockup и использовать его в работе.

Что общего между красивым сайтом, фанатский мерчем, обложкой книги и визиткой? В производстве каждой из этих вещей принимают участие дизайнеры. Это борцы творческого фронта, без которых уже трудно представить современный мир. Но мало придумать красивый дизайн, нужно его правильно презентовать заказчику, чтобы ему понравилось и хотелось внести меньше правок. Сделать убедительную презентацию поможет mock-up. В этой статье мы расскажем, что такое мокап.

Mock-up ― что это и для чего он нужен? 

Мокап ― это макет продукта с помещённым на нём дизайнерским решением. С помощью mock-up заказчик может увидеть свой продукт «в деле». Mock-up может быть как электронный, так и физический. Электронный вариант макетов используют для демонстрации рекламной и PR-продукции. Физически реализованные макеты распространены в сфере самолётостроения и строительства. В этой статье мы будем говорить об электронных мокапах.

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

• фирменного стиля,
• обложки книги,
• буклетов,
• визиток,
• мерча,
• POS-материалов.

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

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

Чем отличается mock-up, wireframe, sketch и prototype

Кроме mock-up, есть понятия wireframe, sketch и prototype. Их часто путают между собой. 

Sketch (скетч) ― это набросок, зарисовка, идея. В нём нет конкретики. Результат может в корне отличается от первого наброска. Задача скетча ― зафиксировать идею. Ими часто пользуются модные дизайнеры, когда придумывают одежду. 

Wireframe ― это схема проекта. Часто wireframe называют мокапом для сайта. Но у них есть большие отличия. Wireframe отражает визуальный «скелет» без иллюстраций и декоративных элементов. Яркий пример wireframe ― каркас сайта. Он создаётся, чтобы познакомиться с основными блоками и функциями будущего сайта. Веб-макет показывает, где будет меню, основные кнопки, блоки с текстом и другие элементы, каких приблизительно размеров они будут. 

Prototype ― это близкий к готовности продукт. Его можно попробовать в действии. Например, в прототипе сайта должны работать все страницы, кнопки и ссылки. 

Как создать mock-up

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

Шаблоны демонстрационных материалов можно создать самостоятельно или скачать уже готовые. Для самостоятельного создания шаблона продукта можно использовать любую программу для рисования. Определёнными фаворитами сейчас являются:

1. Adobe Illustrator,

2. Adobe Photoshop,

3. Figma.

Выбор программы зависит от продукта. Чтобы создать мокапы сайтов, лучше работать в Figma. Эта программа разработана в первую очередь для создания веб-дизайна. Однако здесь получаются скорее прототипы, нежели мокапы. 

Если речь идёт о материальных продуктах, понадобятся более сложные программы. Так как шаблон должен быть объёмным, рисовать его проще всего в программе Adobe Illustrator. В ней есть функция 3D-моделирования, что значительно упрощает задачу.

Рисование шаблонов продуктов ― процесс долгий и трудоёмкий. Дабы сэкономить время дизайнеры пользуются уже готовыми шаблонами, которые размещаются на интернет-ресурсах. Для работы с готовыми шаблонами больше подходит Adobe Photoshop. В программу нужно поместить скачанный шаблон и объединить его с созданным дизайном.

Откуда взять шаблон mock-up и как с ним работать

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

1. Mockupworld ― англоязычный ресурс с большой базой мокапов. Здесь есть не только шаблоны книг, вывесок и iPhone, но и макеты косметической продукции, медицинских масок и даже грузовиков. При регистрации обещают подарок ― 10 бесплатных эксклюзивных макетов. Сервис сотрудничает с сервисом Placeit, о котором ниже мы поговорим подробнее.

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

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

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

4. Mockups-design ― ещё один англоязычный сервис. Библиотека небольшая. В основном специализируются на традиционной рекламной и сувенирной продукции. Их главное достоинство ― минимализм макетов. Всё просто, но со вкусом.

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

Как использовать мокап, скачанный из библиотеки? Макеты предназначены для работы с программой Adobe Photoshop. С каждого из этих сайтов скачивается zip-документ, в котором есть инструкция по использованию макета, и PSD документ с самим макетом. Откройте макет в Photoshop. Традиционный файл PSD будет состоять из слоёв. Один из слоёв будет предназначен для того, чтобы в него вставили другой дизайн. Обычно он называется «Your design here» или подобным образом. Вам остаётся только вставить свою картинку в этот слой. При желании можно поиграться с цветами. Например, чтобы показать, как будет выглядеть логотип на продуктах разного цвета. Готово, вы можете презентовать свою работу. 

Как работать с мокапами? Онлайн-сервис для создания мокапа

Те, у кого нет Illustrator, Photoshop или Figma, могут воспользоваться онлайн-сервисом. Одним из таких сервисов является Placeit. Он прост в использовании, у него есть большая база макетов и отличный онлайн-генератор, который самостоятельно поместит ваше изображение на шаблон. На каждом шаблоне указаны размеры. Таким образом, вы будете уверены в параметрах своего мокапа. Для примера давайте вместе попробуем воспользоваться этим сервисом. 

1. Выберите подходящий шаблон.

2. Чтобы загрузить свой дизайн, нажмите на кнопку Insert Image.

Онлайн-генератор сам поместит ваш дизайн на макет. Вот, что получилось у нас:

К сожалению, сервис платный. Скачать созданный мокап без оплаты не получится. Выгоднее всего брать годовую подписку. Она стоит 90$. Учитывая количество готовых шаблонов, это отличное вложение для дизайнера.

Проблемы с использованием готовых мокапов

Как пользоваться мокапами, скачанными из интернета мы рассказали, но неужели с ними всё так просто? К сожалению, нет. Вы можете столкнуться с такими проблемами, как:

• Размеры макетов на англоязычных сайтах могут не подходить под российские стандарты. Здесь в большей степени идёт речь о полиграфии. В России есть определённые стандарты типографий, на которые ориентируются дизайнеры. Они могут отличаться от европейских и американских стандартов. Это может вызывать сложность при поиске подходящего макета. Будьте внимательны, ведь ошибка в размерах может испортить всю выпущенную партию напечатанного продукта.

• Перегруженность макета. Создатели макетов создают всё новые и новые шаблоны. Некоторые из шаблонов иногда выглядят перегруженными. Такие материалы лучше не выбирать. Цель мокапа ― презентовать созданный дизайн. Макет продукта может быть атмосферным, но он не должен затмевать работу дизайнера. Отдавайте предпочтение минималистичным шаблонам. С ними сложнее промахнуться. 

Примеры mock-up

И напоследок покажем мокапы для фотошопа для разных продуктов.

Канцелярия и полиграфия

На канцелярии и полиграфии часто помещают элементы фирменного стиля (мокап логотипа, шрифт, фирменные цвета). Именно такие мелочи позволяют компании произвести приятное первое впечатление.

Упаковка

Найти подходящий готовый шаблон для мокапа упаковки ― высший пилотаж. Здесь нет никаких стандартов, как это принято в полиграфии. Однако библиотеки шаблонов уже настолько обширные, что поискать нужный объект  стоит. Вот, например, шаблон упаковки для крема:

Вывеска

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

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

Чем убедительнее вы представите свою работу, тем меньше правок понадобится вносить в проект. Старайтесь делать макеты объёмными. Если вы рисуете их с нуля, не забывайте про тени. Удачи в творческом пути!

 

4 метода создания мокапов для демонстрации ваших проектов

Логотипы, веб-сайты и многое другое…

Логотипы, веб-сайты, обложки книг и многое другое…

Получить дизайн

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

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

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

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

Вот 4 основных способа создания макетов: 

1. Создание собственного макета с нуля
2. Создание многократно используемых макетов шаблонов
3. Используйте веб-сайт генератора мокапов
4. Используйте подключаемый модуль программного обеспечения для создания макетов

1.

Создание пользовательского макета с нуля
—

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

Индивидуальный макет творчески представляет, как дизайн будет выглядеть в будущем, конкретном контексте. Дизайн Logo Dish

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

В дополнение к определенной сцене макеты Sevarika закрашивают изображения фирменными цветами для эффектной презентации.

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

Вы также можете нанять профессионального фотографа, но это, конечно, расходы, которые не будут практичными для каждого дизайнера — они более вероятны в сфере дизайнерского агентства, работающего с корпоративными клиентами. Отличной альтернативой является использование фотографий, принадлежащих клиенту: например, дизайнер Top Level goopanic применяет свой брендинг для Academia de Artes к реальным фотографиям школы и ее учеников. Даже если эти фотографии не так высокого качества, как профессиональные стоковые фотографии, они дадут клиенту более достоверное представление о том, как в конечном итоге будет выглядеть их дизайн.

By goopanic

Когда у вас есть фотографии, вам нужно будет использовать программное обеспечение для обработки фотографий, чтобы включить ваш дизайн в изображение. Наиболее распространенным программным обеспечением для этой цели является Adobe Photoshop, но Affinity Photo и Gimp являются надежными альтернативами. Эти программы предоставляют множество инструментов и учебных пособий для достижения реалистичных результатов, и они в основном сводятся к:

режима наложения для включения текстуры исходной фотографии

корректирующих слоя для работы с освещением, цветом и контрастом

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

Необходимые инструменты

• Фотография и/или фотографическое оборудование
• Программное обеспечение для редактирования фотографий (Photoshop, Serif Photo, Gimp)
• *Дополнительно* Программное обеспечение для анимации (Adobe After Effects)

Стоимость

• От умеренной до высокой

Pros

• Конкретные макеты, более точно соответствующие замыслу дизайнера
• Исходные изображения; без водяных знаков или необходимости приобретения лицензий

Минусы

• Дорого и требует больших усилий; требуется более глубокое знание программного обеспечения
• Неэффективно и отнимает много времени
  

2. Создание шаблонов макетов многократного использования

—

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

Это также способ для дизайнера добавить свой личный бренд или повторяющийся стиль к своим презентациям для клиентов.

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

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

Дарья В. Дарья В.

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

Для физических продуктов некоторые дизайнеры создают пустые визуализации продукта с помощью 3D-программного обеспечения, такого как Adobe Dimension, и это дает дополнительное преимущество, позволяя создавать вращающиеся анимированные макеты.

Махмуд Шахин

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

Смарт-объекты Photoshop:

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

Таким образом, с мокапами все, что вам нужно сделать, это преобразовать слой дизайна в смарт-объект в начале вашего проекта (выберите «Слой» > «Смарт-объекты» > «Преобразовать в смарт-объект»). После этого вы можете просто заменить дизайн внутри смарт-объекта в следующий раз, когда вам понадобится макет.

Экшены Photoshop:

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

Дизайн ultrastjarnaДизайн ultrastjarna

Необходимые инструменты

• Фотография и/или фотооборудование
• Программное обеспечение для редактирования фотографий (Photoshop, Serif Photo, Gimp)
• *Дополнительно* Программное обеспечение для 3D-рендеринга продуктов

Стоимость

• Умеренная

Профи

• Многократное использование оправдывает усилия по созданию индивидуальных макетов
• Исходные изображения; без водяных знаков или необходимости покупать лицензии

Минусы

• Требуются дополнительные знания программного обеспечения
• Может быть пустой тратой усилий, если результаты недостаточно отличаются от стороннего шаблона
  

3.

Используйте веб-сайт генератора макетов
—

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

через Placeit

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

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

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

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

через Artboard Studio через Smartmockups

Наконец, некоторые из этих сайтов специализируются на определенных типах макетов, и вам нужно будет выбрать тот, который будет иметь отношение к вашим проектам, особенно если вы покупаете подписку. Например, Artboard Studio и Mockup Mark специализируются на макетах печати и одежды. Такие сервисы, как AppMockUp и Mockuuups Studio, специализируются на макетах цифрового дизайна. Тем временем Smartmockups, renderforest и Placeit предлагают общие шаблоны мокапов как для печати, так и для цифровых устройств.

Необходимые инструменты

• Надежное интернет-соединение
• *Необязательно* Членство на макете сайта

Стоимость

• Бесплатная до низкой

Pros

• Быстро и без усилий; знание программного обеспечения не требуется
• Иногда качество может быть близко к изготовленному на заказ макету

Минусы

• Приводит к общему виду с изображениями, общими для многих дизайнов в Интернете
• Модель подписки полезна только в том случае, если необходимо несколько макетов
  

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

—

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

через Mokup Frames

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

через Anglevia Rotato

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

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

Необходимые инструменты

• Программное обеспечение для проектирования (Sketch, Figma, Adobe XD)
• Лицензия на плагин и скачать

Стоимость

• Низкая

Pros

• Быстро и без усилий; требуется небольшое знание программного обеспечения
• Макеты создаются в программе для проектирования как часть процесса проектирования

Минусы

• Приводит к общему виду с изображениями, общими для многих дизайнов в Интернете
• Результаты существенно не отличаются от онлайн-генераторов макетов

Время делать мокапы, которые выделяются!

—

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

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

Нужен потрясающий индивидуальный дизайн?

Наши дизайнеры помогут вам создать что угодно.

Получить дизайн

Эта статья была первоначально написана Ребеккой Крегер и опубликована в 2013 году. Она была дополнена новыми примерами и информацией.

Как сделать мокап (бесплатно и без фотошопа)

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

К счастью, есть решение для недизайнеров с яркими идеями: использование интуитивно понятного генератора макетов с помощью перетаскивания, в котором легко ориентироваться — Visme.

В этом учебном пособии вы узнаете:

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

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

Итак, приступим!

 

Содержание

• Какие типы макетов самые популярные?
• Шаг № 1: Определите цель вашего макета и выберите тип макета
• Шаг № 2. Добавьте свой тип мокапа в свой дизайн
• Шаг № 3. Загрузите свое изображение или дизайн и добавьте его в макет
• Шаг № 4. Настройте дизайн макета, пока он не станет идеальным
• Шаг № 5: Загрузите и поделитесь своим макетом со всем миром
• Шаблоны мокапов

 

Какие типы макетов самые популярные?

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

Зачем создавать макет продукта?

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

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

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

Некоторые из самых популярных типов макетов включают:

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

Давайте углубимся в каждую категорию мокапов и посмотрим, для чего они подходят.

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

Они отлично подходят для SaaS и технологических компаний, а также предприятий, желающих получить более реалистичное представление о своем продукте на технологическом устройстве.

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

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

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

Знаете ли вы, что, согласно опросу, проведенному IPSOS, ваша упаковка напрямую повлияет на решение о покупке 72% американских потребителей?

Создание макета упаковки значительно поможет вам увидеть, какое влияние ваш дизайн окажет на ваших клиентов.

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

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

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

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

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

Социальные сети Мокапы можно использовать для создания и визуализации постов и страниц для Instagram, Twitter и Facebook, а также эскизов видео на YouTube.

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

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

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

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

 

Шаг № 1. Определите цель макета и выберите тип макета

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

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

Создание макета — это быстрый и простой способ показать инвесторам, что вы хотите создать.

Настройте этот шаблон и сделайте его своим! Редактировать и загрузить

Давайте рассмотрим другой пример.

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

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

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

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

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

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

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

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

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

Первый шаг к созданию потрясающего мокапа — это использование столь же потрясающего создателя мокапов. По понятным причинам мы рекомендуем Visme.

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

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

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

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

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

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

Создайте свой собственный макет сегодня! Попробуйте бесплатно

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

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

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

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

 

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

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

Вы можете увидеть примеры мокапов в генераторе мокапов на изображении ниже.

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

В отличие от Adobe Photoshop, вам не нужно преобразовывать изображения макетов в слои смарт-объектов, потому что элементы макета Visme позаботятся обо всем за вас.

Все, что вам нужно сделать, это перетащить выбранный макет на рабочее место. Вот и все!

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

 

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

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

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

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

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

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

Мы почти закончили! Теперь пришло время для настройки и персонализации макета.

Создайте

потрясающих макетов с помощью Visme.

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

Зарегистрироваться. Это бесплатно.

 

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

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

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

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

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

Visme предоставляет вам такую ​​возможность. Если вы хотите получить доступ к профессиональным стоковым изображениям для своего макета, нажмите Фото и введите ключевое слово в строке поиска.

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

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

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

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

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

Чтобы анимировать любой объект макета, выберите его, нажмите Действия , а затем Анимация .

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

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

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

 

Шаг 5. Загрузите и поделитесь своим макетом со всем миром

Когда вы закончите работу над своим шедевром графического дизайна, пора его загрузить. Чтобы сохранить максимальное количество пикселей и качество, мы рекомендуем вам загрузить макет в виде PNG-файла с высоким разрешением.

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

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

Отсюда вы сможете загрузить свой новый дизайн в виде файла JPG или PNG.

Вы также можете загрузить макет в формате PDF, PowerPoint, Keynote или HTML5.

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

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

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

Вот и все! Вы официально готовы поделиться своим макетом с миром.

Это действительно просто, когда вы используете удивительный, простой в использовании инструмент для макетов, верно?

 

Шаблоны макетов

Шаблоны макетов — отличный вариант для новичков в графическом дизайне. Это делает процесс создания макета очень плавным и быстрым.

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

У нас есть макеты для всего.

Нужен ли вам макет iPad, макет Macbook, макет устройства iOS, макет мобильного устройства, макет логотипа, макет футболки, макет бренда или любой другой тип шаблона макета, мы обеспечим вас.

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

Шаблон № 1: Шаблон макета копирайтера AI

Настройте этот шаблон и сделайте его своим! Отредактируйте и загрузите

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

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

Шаблон #2: Шаблон макета магазина одежды

Настройте этот шаблон и сделайте его своим! Редактировать и скачать

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

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

Шаблон № 3: Шаблон макета дизайна интерьера

Настройте этот шаблон и сделайте его своим! Редактируйте и загрузите

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

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

Шаблон № 4: Шаблон макета здравоохранения

Настройте этот шаблон и сделайте его своим! Редактировать и загрузить

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

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

Шаблон № 5: Шаблон макета онлайн-курса

Настройте этот шаблон и сделайте его своим! Редактировать и загрузить

Пытаетесь продвигать свой новый онлайн-курс? Мокап — идеальный графический помощник.