Мокапи - це креативні, часто фотореалістичні презентації, що показують, як дизайн може виглядати чи функціонувати у реальному світі. Іншими словами, реалізація будь-якого з цих 4 професійних методів створення макетів дозволяє зазирнути в майбутнє: дизайн логотипу, надрукований на сумці, яку носять випадкові покупці, додаток, що прокручується невидимою рукою, або навіть повністю брендований фасад магазину. Робіть це переконливо, потрібно знати, як робити професійні макети. Тут ми розповімо, як це зробити.

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

Є два елементи, які роблять техніку макету успішною: креативне встановлення сцени та реалістичне включення дизайну. Раніше ми розглянули попередню тему з порадами, які були зосереджені на формулюванні концепції макета та виборі правильних зображень для оповідання. У цій статті ми коротко викладемо технічні аспекти створення макета вашого дизайну за допомогою 4 найпоширеніших методів створення макетів.

Верстка книги. Вимоги до оформлення книги.

1. Створіть власний макет з нуля. мокап
-

Макет користувача — це макет, повністю адаптований до конкретного дизайну. Якщо ви бажаєте створювати унікальні мокапи, ми рекомендуємо цю техніку для досягнення найкращих результатів. Враховуючи, що метою макета є презентація і, зрештою, переконання (тобто продаж концепції дизайну), само собою зрозуміло, що найпереконливіший макет – це той, який розроблений для конкретного клієнта.

Дизайн логотипу та макет бренду напоїв.

Дизайн логотипу та макет бренду напоїв

 

Але, звісно, ​​створення мокапів з нуля для кожного проекту – не найпрактичніший підхід. Це вимагає великих зусиль для чогось, що по суті є одноразовим презентаційним активом. Це також корисно лише в тому випадку, якщо концепція макета дуже оригінальна — немає сенсу возитися з усіма цими проблемами, якщо результат не відрізняється від шаблону. Зрештою вам вирішувати, чи достатньо ви захоплені проектом або клієнтом, щоб зробити все можливе, щоб створити єдиний у своєму роді мокап.

Дизайн логотипу та презентація макета технологічного бренду.

Дизайн логотипу та презентація макета технологічного бренду

Для справді нестандартного макета знадобляться оригінальні фото. Це дозволяє вам створювати макет сцени, який набагато ближчий до вашого бачення дизайну, тоді як стокові фотографії за своєю природою створені для загальних налаштувань та сцен. Якщо у вас є обладнання, досвід та час, ви можете самі фотографувати. В цьому випадку вам слід заздалегідь провести мозковий штурм або накидати сцену - аналогічно тому, як ви можете розкадрувати фільм.

Що таке маржа продажів? і Як її розрахувати

Ви також можете найняти професійного фотографа, але це, звичайно, витрати, які не будуть практичними для кожного дизайнера - це більш ймовірно у сфері дизайнерського агентства, що працює з корпоративними клієнтами. Відмінна альтернатива - використовувати фотографії, що належать клієнту: наприклад, дизайнер Top Level goopanic застосовує свій брендинг Academia de Artes до реальних фотографій школи та її учнів. Навіть якщо ці фотографії не такого високої якостіЯк професійні стокові фотографії, вони дадуть клієнту більш достовірне уявлення про те, як зрештою буде виглядати їх дизайн.

Коли з'являться фотографії, вам потрібно буде використовувати програмне забезпечення для обробки фотографій, щоб включити ваш дизайн у зображення. Найбільш поширеним програмним забезпеченням для цієї мети є Adobe Photoshop, але Affinity Photo та Gimp – надійні альтернативи. Ці програми надають безліч інструментів та посібників для досягнення реалістичних результатів, і в основному вони зводяться до наступного:

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

 

Якщо ви хочете працювати з настроюваної анімацією, використовуйте програмне забезпечення для анімації, таке як After Effects: наприклад, ви можете використовувати маски шарів для створення анімації прокрутки для додатків на фотографії телефону.

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

  • Фотографія і / або фотообладнання
  • Програмне забезпечення для редагування фотографій (Photoshop, Serif Photo, Gimp)
  • * Необов'язково * Програмне забезпечення для анімації (Adobe After Effects)

Витрати

  • Від помірного до високого

Плюси

  • В результаті виходять макети, які більш конкретні і відповідають баченню дизайнера.
  • Вихідні зображення; без водяних знаків чи необхідності купувати ліцензії

Мінуси

2. Створіть багаторазові шаблони макетів. Мокап.
-

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

Це також спосіб для дизайнера додати свій особистий бренд або стиль, що повторюється, у свої презентації для клієнтів.

Макет дизайну додатки, що показує людини в кафе, що використовує iPhone. мокап

Макет дизайну додатки, що показує людини в кафе, що використовує iPhone

 

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

Ілюстрований дизайн макета упаковки продукту. мокап

Ілюстрований дизайн макета упаковки продукту

Ілюстрований дизайн макета упаковки продукту. мокап

Ілюстрований дизайн макета упаковки продукту

Це може допомогти згрупувати клієнтів на основі загальних тем, таких як галузь (у вас може бути один шаблон макета для всіх клієнтів, які володіють вашим рестораном, один для всіх роздрібних клієнтів і т.д.). Це спрощує вибір зображень, які працюватимуть у загальних контекстах.

Генератори макетів книг: 5 БЕЗКОШТОВНИХ інструментів

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

Щоб створити свій макет шаблону у Photoshop, ваша мета в основному полягає в тому, щоб налаштувати документ так, щоб дизайн можна було легко замінити у майбутніх проектах, зберігши всі ваші маніпуляції. Photoshop надає для цього два корисних інструментів:

Смарт-об'єкти Photoshop. Мокап.

Смарт-об'єкт — це, по суті, контейнер, у якому зберігається зображення у зв'язаному документі, що дозволяє вам вносити до нього радикальні зміни у вашій більшій композиції, не торкаючись вихідного зображення. Якщо ви заміните зображення на смарт-об'єкті, воно оновиться в композиції з усіма вашими змінами, застосованими до нього.

Отже, з макетами все, що вам потрібно зробити, це перетворити шар дизайну на смарт-об'єкт на початку проекту (перейдіть в «Шар» > «Смарт-об'єкти» > «Перетворити на смарт-об'єкт»). Після цього ви можете просто замінити дизайн усередині смарт-об'єкта наступного разу, коли вам знадобиться макет.

Екшени Photoshop. Мокап.

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

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

  • Фотографія і / або фотообладнання
  • Програмне забезпечення для редагування фотографій (Photoshop, Serif Photo, Gimp)
  • * Необов'язково * Програмне забезпечення для 3D-моделювання продуктів

Витрати

  • Помірний

Плюси

  • Багаторазове використання виправдовує зусилля по створенню нестандартних макетів.
  • Вихідні зображення; без водяних знаків чи необхідності купувати ліцензії

Мінуси

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

3. Використовуйте веб-сайт генератора макетів.
-

Веб-сайт генератора мокапів – це онлайн-сервіс, який використовує стандартні зображення та програмне забезпечення ІІ для автоматичного створення макета із стороннього шаблону. Як правило, все, що потрібно зробити дизайнеру, - це завантажити свій дизайн, а програмне забезпечення подбає про всі технічні питання.

Скріншот домашньої сторінки генератора макетів дизайну Placeit. мокап

Скріншот домашньої сторінки генератора макетів дизайну Placeit

Цей метод, безумовно, є найдешевшим і найпростішим рішенням, але він має деякі недоліки. Отриманий макет буде неоригінальним, і, враховуючи, що багато дизайнерів використовували ту саму послугу, нерідко можна побачити ті самі зображення макетів, що з'являються до нудоти на всіх сайтах портфоліо. У той же час це може бути корисним у крайньому випадку, і, якщо клієнт не є постачальником дизайнерських макетів, вони, ймовірно, не будуть заперечувати.

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

Складання типових макетів корпоративного дизайну. мокап

Складання типових макетів корпоративного дизайну

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

Скріншот домашньої сторінки генератора макетів дизайну Artboard Studio. мокап

Скріншот домашньої сторінки генератора макетів дизайну Artboard Studio

Скріншот домашньої сторінки генератора макетів дизайну Smartmockups

Скріншот домашньої сторінки генератора макетів дизайну Smartmockups

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

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

  • Надійне інтернет-з'єднання
  • * Необов'язково * Членство в макеті сайту

Витрати

  • Від безкоштовного до низького

Плюси

  • Швидко та без особливих зусиль; знання програмного забезпечення не потрібне
  • Якість іноді може бути близько до індивідуального макету

Мінуси

  • Створює загальний вигляд із зображеннями, якими користуються багато дизайни в Інтернеті.
  • Модель підписки корисна тільки в тому випадку, якщо необхідно кілька макетів.

4. Використовуйте програмний плагін для створення макетів.
-

Плагіни мокапів – це сторонні інтеграції, які підключаються до програмного забезпечення для проектування для створення макетів. По суті, ці програми дозволяють дизайнерам розробляти та створювати макети в рамках однієї програми з додатковою перевагою, що полягає в тому, що дизайнер може використовувати інструменти програми для внесення змін до макету після його створення.

Скріншот домашньої сторінки плагіна для дизайну Mokup Frames

Скріншот домашньої сторінки плагіна для дизайну Mokup Frames

Це найкраще з обох світів: недорогий шаблон, що не вимагає великих зусиль, з можливістю налаштування. З урахуванням сказаного, цей метод зазвичай призначений для цифрового дизайну, і більшість плагінів націлені на програмне забезпечення для створення прототипів додатків, таких як Ескіз , Figma и Adobe XD .

Скріншот домашньої сторінки плагіна для макета дизайну Angle

Скріншот домашньої сторінки плагіна для макета дизайну Angle

Є кілька популярних сервісів, які надають завантажувані плагіни, в тому числі Кут , Ротато и Mokup Frames . Оскільки це програмне забезпечення можна завантажити, воно зазвичай вимагає одноразової оплати. Ця ціна зазвичай вища, ніж у більшості сайтів-генераторів макетів, але в довгостроковій перспективі вона нижча, оскільки ви не сплачуєте абонентську плату.

Вам потрібно буде дотримуватись інструкцій для конкретного сайту, щоб завантажити та встановити плагін у своє програмне забезпечення. Звідти ви зможете застосувати дизайн з вашого програмного забезпечення до макету. Цей процес аналогічний використанню веб-сайту з генератором мокапів: плагін автоматично створить ваш макет, і ви використовуватимете інструменти налаштування для його доопрацювання.

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

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

Витрати

  • низький

Плюси

  • Швидко та без особливих зусиль; потрібне невелике знання програмного забезпечення
  • Мокап створюються в програмному забезпеченні для проектування як частина процесу проектування.

Мінуси

  • Створює загальний вигляд із зображеннями, якими користуються багато дизайни в Інтернеті.
  • Результати не сильно відрізняються від онлайн-генераторів мокап

Прийшов час створювати унікальні мокап!
-

Дизайн-макети – це неймовірно потужні інструменти презентації, які не тільки продають дизайнерську ідею, а й дають глядачеві вікно у майбутнє, в якому цей дизайн вже існує. Коли все буде зроблено добре, клієнт майже змушений буде втілити це майбутнє в реальність.

Як зазначено в цій статті, існує безліч методів створення мокапи, і кожен із них має свої переваги і недоліки. Але незалежно від того, як ви створюєте свої макети, результати зрештою залежатимуть від дизайнера та його прихильності до реалістичного рендерингу макета, який стрибає з екрану.

 АЗБУКА

Як успішно керувати проектами в онлайн-бізнесі