by
Read Time:12 minsLanguages:

Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)

Пытались понять, что значит "mockup", но безуспешно? Ну, в сегодняшнем видео мы узнаем, как им пользоваться помощью Mockup Generator от Placeit.

Следите за нашим каналом Envato Tuts+ YouTube Channel:

Что такое Mockup?

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

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

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

Как быстро делается макет с помощью Placeit

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

placeit site previewplaceit site previewplaceit site preview

Шаг 1

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

В считанные секунды я нашёл отличный макет iPhone X, который, как я считаю, очень подходит для проекта.

finding the right mockupfinding the right mockupfinding the right mockup

Шаг 2

Осталось загрузить мой дизайн, нажав на кнопку Upload Image или указав ссылку на него.

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

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

Шаг 3

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

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

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

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

downloading the imagedownloading the imagedownloading the image

Шаг 4

Что мне нравится в Placeit, так это огромная библиотека макетов, некоторые из которых дают вам возможность делать корректировки цвета «на лету», как эта t-shirt one.

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

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

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

example of adjusting the colorexample of adjusting the colorexample of adjusting the color

Безграничные возможности

Независимо от сложности, вы можете легко найти отличный макет, который поможет вам воплотить ваш проект в жизнь.

Лично я нашел три проекта, которые мне очень нравятся:

macbook mockupmacbook mockupmacbook mockup
Macbook Mockup by Placeit
business card mockupbusiness card mockupbusiness card mockup
Business Card Mockup by Placeit
  • и, наконец, этот милый iPad, который я планирую использовать в ближайшем будущем.
ipad mockupipad mockupipad mockup
iPad Mockup by Placeit

Более сложные примеры

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

Телефонный макет с заголовками

Этот красивый макет GraphicRiver с возможностью компоновки в Photoshop, имеет 42 объекта и 5 мобильных устройств со смарт-объектами для презентации в приложениях или веб-сайтах.

graphicriver productgraphicriver productgraphicriver product
Phone Mockup and Header Creator

Макеты с мониторами

Или этот макет Envato Elements, который позволяет быстро отображать ваши проекты на экране монитора. Смарт-объекты позволяют быстро менять снимки экрана. После обновления все снимки на экранах мгновенно меняются!

envato elements productenvato elements productenvato elements product
Display Mockup Creator by Envato Elements

Заключение

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

Надеюсь, что урок вам понравился, увидимся на следующем.

Развивайте свои навыки дизайнера!

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

  • 10 Illustrator Tools Every Designer Should Be Using

  • Different Image File Types and Formats

  • The Do's and Don'ts of Creating Line Icons

  • Transitioning From Adobe Illustrator to Affinity Designer

One subscription.
Unlimited Downloads.
Get unlimited downloads