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

Что такое мокапы и зачем они нужны
Где взять готовые шаблоны для мокапов
Как сделать мокап: способ для дизайнеров-новичков
Как сделать мокап: способ для продвинутых дизайнеров
Что нужно запомнить о мокапах

Читайте наc в Telegram

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

Смотреть канал

Станьте email-рокером 🤘

Пройдите бесплатный курс и запустите свою первую рассылку

Подробнее

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

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

Что такое мокапы и зачем они нужны

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

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

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

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

Чаще всего мокапы используют для демонстрации:

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

Где взять готовые шаблоны для мокапов

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

1. Выбираете нужную категорию или вбиваете в поиск название объекта для мокапа. Например: кружка, визитка, коробка, вывеска.
2. Выбираете подходящий макет и скачиваете его в нужном формате. Чаще всего мокапы делают в формате PSD. Это значит, что после скачивания шаблон придется редактировать в Photoshop.
3. Редактируете шаблон и меняете дефолтный дизайн на свой.

Готовый мокап — не всегда идеальное решение. Шаблоны не подойдут, если:

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

Готовые мокапы можно найти на таких популярных сайтах:

Mockupworld. Есть 14 категорий макетов: от упаковки и транспортных средств до газет и книг. Все мокапы доступны бесплатно.

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

Freemockup. Русскоязычный сайт с бесплатными мокапами. Мокапы можно искать по четырем категориям:

• устройства — iPhone, MacBook, Apple Watch и пр.
• брендинг — фирменный стиль, упаковка, билборды и пр.
• предметы — одежда и обувь, еда и напитки и пр.
• вид — сверху, изометрия и пр.

Mockups-design. Здесь можно найти 23 000 бесплатных мокапов самых разных объектов: от бутылок для йогурта до грузовых контейнеров.

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

Deeezy. На сайте вы найдете 3000 мокапов — от помады до керамической посуды. Большинство из них платные, но есть 200 интересных вариантов для свободного пользования.

Как сделать мокап:

способ для дизайнеров-новичков

Есть сервисы, в которых можно создавать мокапы без навыков работы в графических редакторах. По сути, вы все так же используете чужой шаблон, просто делаете это в браузере методом drag-and-drop — перетаскиваете элементы, как в конструкторе.

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

• Device Shots
• mockDrop
• MockupsJar
• PlaceIt
• ShotSnapp
• Animockup
• Threed

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

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

Давайте попробуем сделать свой мокап в сервисе Artboard.

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

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

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

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

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

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

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

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

Первым делом найдите или создайте исходник — фотографию нужного предмета. Я выбрала ноутбук. После этого откройте фото в Photoshop.

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

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

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

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

Когда все будет готово, нажимаем Enter.

После этого дважды нажимаем левой кнопкой мыши на миниатюру смарт-объекта на панели слоев. Откроется новый документ. В него нужно добавить необходимые элементы дизайна, которые будут отображаться на экране ноутбука. Например, текст или картинку. Я просто перетяну в рабочее пространство заранее заготовленную фотографию и настрою ее размер. После этого нажимаю сочетание клавиш Ctrl+S или «Файл» — «Сохранить» и возвращаюсь во вкладку с ноутбуком.

Все, наш мокап готов. Чтобы сохранить его, переходим во вкладку «Файл» — «Сохранить как…» и выбираем подходящий формат. Теперь мокап можно добавить в портфолио или отправить клиенту. А если сохранить файл в формате PSD, позже можно будет поменять дизайн мокапа. Например, заменить клубнички на фирменный стиль компании.

Что нужно запомнить о мокапах

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

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

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

4. Если вам нужен мокап необычного предмета, готовые шаблоны и онлайн-сервисы вряд ли помогут. В таком случае лучше сделать мокап в Photoshop с нуля.

Поделиться

СВЕЖИЕ СТАТЬИ

Другие материалы из этой рубрики

Не пропускайте новые статьи

Подписывайтесь на соцсети

Делимся новостями и свежими статьями, рассказываем о новинках сервиса

Статьи почтой

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

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

Как запустить email-маркетинг с нуля?

В бесплатном курсе «Rock-email» мы за 15 писем расскажем, как настроить email-маркетинг в компании. В конце каждого письма даем отбитые татуировки об email ⚡️

*Вместе с курсом вы будете получать рассылку блога Unisender

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

Семь раз отмерь и сделай один мокап

• Теги
• Цифровая печать |
  Упаковка |
  На правах рекламы |
  Цифровая упаковка |

• 2 апреля 2019 г.

• 3262

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

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

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

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

И тут — СТОП — без заблуждений. Реальный результат всегда будет иметь отклонения от идеи. Просто всегда. Как их минимизировать, на каких этапах предотвратить — это отдельная глобальная тема инновационных workflow в подготовке и создании упаковки. Но если это не отклонение, а реальная ошибка? Что если при печати вдруг становится понятно, что шов спайки закрывает маркетинговый текст? Окошко под дату находится в зоне склейки? Продукт просвечивает через упаковку? Или флоупаки, выложенные в дисплеи, просто не видны при размещении на полках?

Много производителей готовы на тесты, отпечатав малые (от 1 штуки) тиражи для получения реального результата? Много типографий готовы сдвинуть графики, вставив мизерную партию в печать с расходами реального запуска за «приемлемые» деньги? Бюджеты упаковочных проектов огромны, но они расписаны на необходимые, а не страховочные процессы, которые «съедаются» коррекциями и переделками на этапе разработки концепта.

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

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

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

Сейчас в мире существует несколько компаний (в США, Германии, Великобритании), специализирующихся на мокап-сервисе любой сложности и в любом количестве.

Компания «Флексикон» в рамках проекта mockup.expert в середине 2018 г. начала оказывать услуги по производству мокапов на территории РФ. Как международный репро-хаус, опираясь на опыт работы с большим количеством глобальных компаний, мы считаем прототипирование для своих заказчиков крайне полезным звеном. Можно смело сказать, что это инновационный сервис, который эффективно дополняет всю цепочку создания упаковки и ожидаем рынком.

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

Больше информации об этой услуге можно найти на сайте www.mockup.expert и www.flexicon-group.com.

ПОХОЖИЕ СТАТЬИ

Упаковка в струе

• Теги
• Publish |
  Цифровая печать |
  Эксклюзив |
  Струйная печать |
  Цифровая упаковка |
  Правила полезного «железа» |

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

• Читать далее

20 наивных, но важных вопросов о струйных МФУ для типографий

• Теги
• Цифровая печать |
  Epson |
  МФУ |
  На правах рекламы |
  Струйная печать |
  Explain |

Устройства Epson WorkForce Enterprise работают в больших офисах и корпорациях, в типографиях и копи-центрах, в сфере логистики и образования. Это МФУ формата А3+ со скоростью печати до 100 стр./мин. А ещё они — струйные и по некоторым параметрам превосходят лазерные устройства этого класса. Что? Да! Разбираемся, как так получилось, вместе со специалистами компании Epson.

• Читать далее

Технология Kornit MAX — стабильность в условиях меняющегося мира

• Теги
• Publish |
  Цифровая печать |
  На правах рекламы |
  Печать по тканям |
  Kornit |
  печать по текстилю |

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

• Читать далее

На новый уровень — с печатью

• Теги
• Форум |
  Canon |
  Publish |
  Цифровая печать |
  На правах рекламы |
  Эксклюзив |

За прошедший год из-за COVID-19 бизнес разного масштаба столкнулся с трудностями, которых в начале 2020 года никто не мог и предвидеть. Марк Лон (Mark Lawn), директор Canon EMEA по маркетингу профессиональных решений для печати, рассуждает о новых вызовах и возможностях.

• Читать далее

Цифровой ключ для гофроупаковки

• Теги
• Publish |
  Допечатные процессы |
  Цифровая печать |
  Упаковка |
  Эксклюзив |
  гофрокартон |
  Цифровая упаковка |

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

• Читать далее

Новый номер

Выпуск #12/22

Подписаться
Купить PDF
Архив PDF

Тема номера — Широкоформатная печать. Sharp MX-8090NEE. Журналус. «Твоя типография». Себестоимость печати. 15 приёмов создания упаковки. Самоклейка в России. Типографы в юбках. Планшетные УФ-принтеры. Картон «КАМА». «Текстильная печать». Publish Pro

Наш опрос

Что сдерживает переход на цифровую печать этикетки?

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

Слишком дорогое оборудование

Недоступность в России многих цифровых решений

Недостаточное качество цифровой печати на стандартных упаковочных и этикеточных материалах

Не все этикеточные материалы хорошо обрабатываются на цифровом отделочном оборудовании

Не хватает послепечатного оборудования, способного работать с короткими и сверхкороткими тиражами

Не отработана система продаж цифровой печати упаковки и этикетки, трудно набрать достаточно заказов

Заказов на цифровую печать этикетки просто слишком мало

Ничего не сдерживает, изучаем целесообразность приобретения

Уже печатаем этикетку «цифрой»

Проголосовало: 33

Самые читаемые новости

Издательства заявили об увеличении контрафакта бумажныx книг

«Дубль В» начала продажи дизайнерских тактильных бумаг

В Кузбассе открылся завод по выпуску картона с антимикробными свойствами из макулатурного сырья

Drupa 2024: пока не без потерь

Как легко создавать свои собственные мокапы » Дизайн лота

Если вы были здесь раньше, то могли заметить, что на веб-сайте произошли некоторые изменения. Наряду с новым дизайном и редизайном нашего логотипа была создана пара других столбцов. Один из них называется « Учебники ». Здесь я создам учебника по графическому дизайну , которым легко следовать . В первом вы узнаете , как делать свои собственные мокапы , потому что даже если в Интернете уже доступно невероятное количество , вы никогда не знаете, когда тот, который вам нужен , может быть недоступен, поэтому вам просто нужно сделать свой собственный . Вот я и начала их делать! 🙂

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

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

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

Инструменты, которые я использовал для создания оригинального макета «Бесплатный макет для наружного рекламного щита с соотношением сторон 3:1 №1»: iPhone 6s , Adobe Photoshop Lightroom CC и Adobe Photoshop CC (2015 г.). Но чтобы сделать этот еще проще , мы пропустим часть Lightroom, так как это просто необязательно. Если вы знакомы с ним, то это отличное программное обеспечение для ретуширования ваших фотографий , но вы также можете легко выполнить базовую ретушь в Photoshop. Поэтому пропустим Lightroom.

Итак, инструментов, которые вам понадобятся для создания макета : цифровая камера или телефон с приличной камерой и Adobe Photoshop CS4+ (более ранние версии не будут работать). Но если вы просто следуете уроку на основе фотографии, которую я предоставил, вам просто нужен Photoshop.

Начнем!

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

Я организовал это руководство в 4 основных шага , каждый из которых имеет пару пунктов, чтобы упростить выполнение. Везде, где это возможно, будут добавлены скриншоты, так что вы не потеряетесь. Имейте в виду, что Я использую Adobe Photoshop CC 2015 , а это означает, что если вы используете другую программу, скриншоты могут выглядеть немного иначе, чем у вас, но все функции будут доступны и вам.

#1 – Сделать фото

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

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

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

Как только вы будете довольны сделанным снимком, загрузите его на свой компьютер в исходном размере ( чем больше, тем лучше – здесь размер имеет значение)!

#2 – Ретушь фото

После того, как вы сохранили его, пришло время внести в него некоторые коррективы и ретушь.

Первый шаг —

открыть изображение в Photoshop .

Преобразование фона в смарт-объект

Следующим шагом является преобразование фонового слоя в смарт-объект . Для этого щелкните правой кнопкой мыши слой Background на панели «Слои» и выберите параметр « Convert to Smart Object » (как на скриншоте справа) .

Почему мы это делаем?

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

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

Откройте смарт-объект и отредактируйте фоновое изображение

Это необязательный шаг , необходимый только в том случае, если есть какие-либо детали, которые вы хотите удалить из фонового изображения . Если да, просто дважды щелкните смарт-объект , чтобы открыть его (скриншот), и продублируйте слой (CTRL+J или Command+J на Mac), чтобы сохранить его в качестве резервной копии на случай, если вы испортите фон. Как только вы туда доберетесь, начните удаление всех нежелательных деталей , таких как кабели, люди, элементы и т.д.

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

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

Установите размеры макета

Прежде чем мы начнем применять эффекты или создавать слой изображения, давайте установим размеры макетов . Для этого перейдите на вкладку « Изображение » в верхней панели и нажмите « Размер холста » (или нажмите Alt+Ctrl+C). Здесь установите размеры, которые вы хотите, чтобы ваш холст имел. Я использовал 3500×2000 , поэтому вы можете ввести то же самое.

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

Фильтры и корректировки

Несмотря на то, что я иногда редактирую свои фотографии в Lightroom, я также всегда применяю некоторые фильтры и корректировки в Photoshop.

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

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

Начнем с настроек. Для этого вам понадобится эта панель:

Если вы не можете его найти, перейдите в Окно > Настройки на верхней панели.

Для этого макета я применил настройки Brightness/Contrast и Exposure . Но вы можете поиграть с остальными и посмотреть, какие из них подойдут вам.

Вот значения, которые я использовал для настроек:

Фильтры

Теперь давайте начнем применять фильтры!

Первое, что мы должны сделать, это убедиться, что выбран слой с фоновым изображением . После этого перейдите к Filter > Blur > Surface Blur… и установите следующие значения:

• Radius: 5 пикселей
• Threshold: 15  levels

достигните результата, который вас устроит)

Теперь самое интересное! Применение фильтра Iris Blur. Перейдите к Filter> Blur Gallery> Iris Blur… (это доступно в CC 2015 — в более ранней версии может быть доступно непосредственно на Фильтр вкладка). Теперь начните играть с фильтром. Вот как я это сделал:

Нажмите Enter, и мы закончили с фильтрами и настройками.

#3 — Artwork

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

Создание прямоугольной формы

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

Итак, первое, что нужно сделать, это создать прямоугольную фигуру с пропорциями 3:1 . Начнем с размеров 3000×1000 и продолжим оттуда. Теперь установите для него непрозрачность 30% , чтобы вы могли легко видеть, что происходит за ним, нажмите Ctrl+T , чтобы преобразовать его, переместите его в нижний правый угол рекламного щита  и, , удерживая нажатой клавишу Shift , сделайте его таким же высоким, как рекламный щит , как показано на снимке экрана ниже:

После этого нажмите Enter.

Теперь перейдите на панель Layers , щелкните правой кнопкой мыши слой прямоугольника и выберите « Convert to Smart Object t». Как только это будет сделано, нажмите Ctrl+T, чтобы преобразовать его снова, и масштабируйте его по ширине, чтобы он был размером с рекламный щит . Находясь в режиме Transform, щелкните правой кнопкой мыши прямоугольник и выберите Disort . Теперь перетащите каждую точку в углы рекламного щита , как на скриншоте ниже:

Как только вы достигли вышеуказанного результата, щелкните правой кнопкой мыши и Деформируйте , чтобы позаботиться о последних штрихах. Перетащите каждое поле, пока они не окажутся как можно ближе к рекламному щиту. Теперь нажмите Enter, перейдите на панель «Слои» и установить прозрачность на Умножение .

Вставка тестовой иллюстрации

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

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

Как только это будет сделано, макет готов! Окончательный результат должен выглядеть примерно так, как показано ниже (разница может заключаться только в дизайне рекламного щита):

Поздравляем! Вы создали свой первый мокап !

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

#4 – Организация и сохранение

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

Прежде всего, давайте выберем корректирующие слои  (яркость, экспозиция и любые корректировки, которые вы могли внести) и сгруппируем их (Ctrl+G). Теперь назовите группу Effects or Adjustments, дважды щелкнув по ней. После этого заблокируйте группу , нажав на замок выше, когда группа выбрана.

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

Теперь начните переименовывать слои . Тот, у которого фоновое изображение, назовите его «Фон» или «Изображение», исходный слой с изображением назовите «Образец», «Рекламный щит», «Ваш дизайн» или любое другое имя, а второй назовите его «Заменить обложку» (3: 1), «Заменить», «Ваш дизайн здесь» или что-нибудь, чтобы указать пользователю, что это слой, который они должны использовать для размещения своего дизайна на макете.

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

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

ВОТ ЭТО!

Поздравляем! Теперь вы официально закончили ! Вы создали свой первый мокап ! МОЛОДЦЫ!

Поделитесь своими макетами

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

Если вы создали что-либо и хотели бы поделиться им со всем миром , используйте форму Отправить бесплатно и я собираюсь представить лучшие на сайте!

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

Продажа ваших макетов

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

Вот статья, которая укажет вам на , где вы можете продавать свои макеты и другие цифровые работы !

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

Удачи!

[идентификатор почтового ящика = 284]
Учебный файл Wide Billboard (212 загрузок)
[/emaillocker]

Как создавать мокапы в Figma

Как легко создавать мокапы в Figma. 4-этапное руководство, показывающее, как установить лучший плагин для макетов Figma для создания макетов из фреймов Figma.

Что такое Figma?

Figma стала предпочтительным инструментом проектирования UX/UI для дальновидных дизайнеров для создания цифровых интерфейсов. По данным The Hustle, в июне 2021 года они привлекли 200 миллионов долларов в ходе раунда, в результате которого компания была оценена в 10 миллиардов долларов.

[обновление: сентябрь 2022 г.] Недавнее приобретение Adobe компании Figma — огромный переворот для софтверного гиганта, который, несомненно, поможет ему еще больше укрепить свое положение в качестве выбора для творческих профессионалов. Figma — это облачный редактор векторной графики и инструмент для создания прототипов, который идеально дополнит существующий набор инструментов Adobe Creative Cloud. Он также используется многими ведущими дизайнерскими фирмами и имеет очень преданных поклонников среди дизайнеров. Этим приобретением Adobe ясно сигнализирует о своем намерении стать универсальным магазином для всего, что связано с дизайном.

С тех пор они выпустили инструмент совместной работы FigmaJam. И планируйте стать комплексным решением от первоначальных проектов до готовой продукции.
С его темпами роста, обширными плагинами и щедрым бесплатным планом — он штурмом берет отрасль. На световые годы опережает традиционные инструменты, такие как Photoshop, которые могут стоить от 252 долларов в год.

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

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

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

Что такое плагины Figma?

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

Например, Mockuuups Studio — это настольное приложение для создания более 1600 перетаскиваемых макетов за несколько кликов.

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

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

Но чтобы дать вам представление о том, какую функциональность может предоставить плагин, вот обзор от нашего друга Натту из LottieFlies (еще один отличный плагин):

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

Как создавать макеты в Figma (4 простых шага)

1. Установите подключаемый модуль макетов Figma

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

Затем внутри Figma нажмите Плагины в левом меню, нажмите просмотрите все плагины , найдите Mockuuups Studio в строке поиска и нажмите установить , чтобы получить плагин макета Figma.

Или вы можете установить его со страницы сообщества Figma здесь.

2. Выберите свой фрейм Figma

В Figma мы называем проекты «фреймами». Это то, что вы можете внедрить в более чем 1600 мокапов.

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

3. Выберите макет Figma

В окне Mockuuups вы можете предварительно просмотреть свой кадр во всех макетах одновременно.

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

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

4. Экспортируйте макет Figma

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

Щелкните макет , чтобы увеличить его, щелкните Экспорт в правом верхнем углу и выберите либо Экспортировать как файл , либо Поместить в документ .

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

Как редактировать макет в Figma?

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

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

Все, что вам нужно сделать, это открыть плагин Mockuuups Studio и нажать «Открыть студию» в левом верхнем углу сетки макетов.

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

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

Лучшие мокапы Figma

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

Но вместо этого давайте покажем вам некоторые из любимых макетов, которые вы можете создать всего за 3 минуты с помощью Mockuuups Studio:

Понравилось, что вы здесь увидели? Ознакомьтесь с этим обзором лучших макетов iPhone для дизайна Figma.

Зачем использовать мокапы в Figma?

Вы можете подумать, что создавать макеты в Figma — это хорошо. Но почему вы хотите сделать это в первую очередь? Во-первых, создание мокапов в вашем инструменте дизайна сэкономит вам массу времени, но также даст потрясающие результаты.

Презентация ваших прототипов членам команды

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

Потрясающая реклама и маркетинговый контент одним щелчком мыши

С приложениями и цифровыми продуктами создание контента для привлечения пользователей сложно создать на обычных экранах приложений. Основатели стартапов и маркетологи, такие как Фабрицио Ринальди из Mailbrew, используют макеты Figma для создания бесконечных макетов для продвижения функций приложений:

Презентация вашего стартапа

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

Потрясающие дисплеи для ваших проектов портфолио

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

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

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

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

Под капотом плагины Figma используют простые веб-технологии, такие как HTML, CSS и Javascript, чтобы сделать их пользовательский интерфейс функциональным.

Для плагина Mockuuups Studio, чтобы он соответствовал внешнему виду Figma, мы использовали библиотеку UI Figma Plugin DS от Тома Лоури.

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

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

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

Хотите узнать больше о нашей истории Figma?

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

Джейкоб Гринфельд поделился постом на Indie Hackers, который недавно назвал «привязыванием себя к задней части ракеты, который действительно резонировал с нами».