| 29.12.2015
Мокап (англ. Mockup) - це, по суті, макет продукту, який використовується дизайнерами для більш наочної демонстрації створеного дизайну. Адже можливість поглянути на готову роботу безпосередньо на носії, для якого вона створювалася, краще, ніж бачити цей же дизайн просто на моніторі. Так, завдяки мокап-файлів можна красиво показати замовнику, як в реальності буде виглядати дизайн його візитки, сайту, додатки і т. Д.
Також mockup-шаблони використовуються і самими дизайнерами для того, щоб самостійно оцінити результат своєї праці, подивившись на роботу під іншим ракурсом. Сьогодні ми зібрали для вас кілька сайтів, де можна скачати мокап безкоштовно.
1. Freebiesbug
Freebiesbug.com має велику колекцію не лише mockup-файлів, але і інших ресурсів для веб-розробки. Сайт постійно поповнюється. Тут ви знайдете мокап iPhone, iPad, Apple Watch, макети смартфонів інших виробників і багато іншого.
2. PSDMockups
Як можна здогадатися з назви, сайт повністю присвячений мокап. Тут їх море, на будь-які теми - починаючи від макетів смартфонів і книг і закінчуючи макетами аудіокасет і подарункових пакетів. Якщо вам потрібно знайти щось конкретне, скористайтеся пошуком по сайту.
3. PSDCovers
Перетворити 2D-дизайн в 3D-продукт? Запросто! 72 сторінки різних макетів в форматі PSD - цей сайт стане в нагоді дизайнерам упаковки. Чашки, книги, банки - тут знайдеться все. Крім цього, є ресурси для айдентики і веб-дизайну.
Ще одна перевага сервісу PSDCovers полягає в тому, що ви завантажуєте не просто mockup-файл, куди вам потім доведеться самостійно вставляти потрібне зображення з дизайном. Ви завантажуєте Action для програми Adobe Photoshop, який сам вбудовує потрібну картинку в 3D-макет. Ви розберетеся, просто прочитавши інструкцію.
4. Колекція від Prechu
Шикарна колекція, де зібрано понад 1000 мокап PSD, розсортовані за категоріями. Виберіть потрібну категорію або просто Скролл сторінку вниз, а спостерігши симпатичний мокап, натисніть кнопку Download поруч з ним.
5. Pixeden
34 сторінки якісних мокап на різну тематику - від футболок до журналів. Основна маса mockup-файлів тут буде корисна розробникам фірмового стилю, проте можна знайти і інші категорії.
6. Mockupworld
Тут також знаходиться величезна кількість якісних і безкоштовних mockup-файлів. На сайті є такі категорії макетів, як Apple Watch, iPhone, iPad, MacBook, iMac, Packaging, Paper & Books, Fashion & Apparel, Signs & Billboards.
Часто нам хочеться показати свої роботи красиво і цікаво, але не завжди це виходить зробити, просто виклавши саму роботу. Набагато цікавіше виглядає подача, де картинки начебто намальовані в альбомі або використовуються на етикетках продуктів, для цього якраз і потрібні мокап.
Мокап (або mock-up англійською) - це спеціальним чином підготовлений файл, в якому можна свій дизайн розміщувати на реальних предметах. Вони потрібні, щоб показати як картинка буде виглядати в реальному житті. Зазвичай це PSD файл зі смарт-об'єктом, на який і вставляється картинка з дизайном. Бувають і просто JPEG картинки, звані мокап, але працювати з ними складно, потрібно довго спотворювати картинку і вписувати її в оточення.
Смарт-об'єкти - дуже крута штука. Якщо ви хоч раз зменшували картинку в фотошопі, а потім розтягували її на великий розмір, напевно виходила приблизно така історія, тому що Фотошоп спотворює файли.
Те ж саме і з шрифтами і з ефектами. Для того, щоб цього уникнути, варто перетворювати все елементи в смарт-об'єкти. Для того щоб створити смарт-об'єкт, відкрийте будь-яке зображення в фотошопі. Далі перетворіть фоновий шар в звичайний (редагований), для цього подвійним клацанням миші клікніть по ньому і натисніть ОК або створіть його дублікат, для цього натисніть комбінацію клавіш Ctrl + J. Потім, клацнувши правою кнопкою миші по перетвореному / дубльованого шару з контекстного меню виберіть «Перетворити на смарт-об'єкт». Після того, як Ви це зробили, на мініатюрі Вашого шару з'явиться невелика іконка, яка означає, що шар є смарт-об'єктом.
По суті смарт-об'єкт - це контейнер, зміни якого не зачіпають об'єкт всередині. Можна розтягувати, зменшувати, застосовувати ефекти не втрачаючи якості картинки або шрифту. Типово кстати все картинки, які перетягуються в ФШ, стають смарт-об'єктами.
Редагування смарт-об'єктів відбувається як редагування окремого файлу в окремому вікні (створюється тимчасовий файл в формате.psb, прив'язаний до основного файлу). Зміна і збереження цього файлу призводить до зміни основної картинки.
Користуватися мокап дуже просто.
- Викачуємо потрібний PSD, відкриваємо його і шукаємо шар з зразковим назвою «Your design here» або щось подібне.
- Двічі клацаємо на іконці смарт-шару - відкривається нове вікно, куди і потрібно перетягнути свій патерн або картинку.
- Після цього закриваємо це вікно, вибравши «Так» при питанні потрібно зберегти.
Зараз величезна кількість ресурсів, де можна знайти мокап для власних потреб, щоб показати свої роботи в кращому світлі. Ось кілька ресурсів, де можна знайти непогані мокап безкоштовно.
Насправді мокап не дуже складно зробити самому, володіючи елементарними навичками роботи в фотошопі. Ось чудовий відео, де на прикладі футболки показано як зробити мокап, послідовність роботи можна перенести замість футболки на будь-який інший предмет.
Показуйте свої роботи красиво - користуйтеся мокап
"Мокап" - це вузькоспеціалізований термін, яким користуються в основному дизайнери. У прямому значенні слово мокап означає макет. З його допомогою професіонал створює тривимірну візуалізацію чого завгодно, наприклад упаковки або поліграфії. Часто він використовується в рекламі. Простий приклад: мережа швидкого харчування «Макдональдс». Апетитний гамбургер на зображенні - НЕ фотографія, а візуальна ідеалізація того, що хочеться купити і з'їсти. Якщо пропонований товар знаходиться всередині середовища, то виглядає краще і вигідніше, ніж звичайний скріншот (знімок).
Що це?
Мокап - це макет, який використовується дизайнерами для того, щоб продемонструвати замовникові виріб або продукт. Наприклад, майбутню обкладинку компакт-диска, фотоальбом, листівку, зміст або зовнішній вигляд книги. Завдяки цьому способу замовник візуально оцінює пропонований фахівцем дизайн в робочому середовищі. Виходить не просто плоска фотографія, а вже накладений макет на продукт. дозволяє побачити кінцевий результат в реальності. Він спрощує взаємодію замовника і дизайнера. Візуальні макети дозволяють тестувати продукцію на стадії розробки, вносити зміни, поправки до друку.
Mock up хороший тим, що це нескладна, малозатратная за часом робота, якою можуть навчитися все без винятку. Для того щоб досконало оволодіти цією технікою, важливо мати уявлення про дизайн, почуття смаку, стилю, заходи, знання про сумісність кольору, вміти працювати в графічних редакторах. Під час освоєння мокап перегляньте роботи відомих дизайнерів, вчіться на чужих прикладах і помилках.
Навіщо він потрібен?
Мокап потрібні професійних дизайнерів, фрілансерам, художникам, які працюють на замовлення і створюють дивовижно красиві роботи. Пізніше вони презентуються клієнту в кращому вигляді. Мокап створюється з метою продемонструвати історію картинки або написи, яка покращує продукт і допомагає покупцям зробити вибір на його користь. Технічно мокап - PSD-файли з редагованими смарт-об'єктами (шари в програмі "Фотошоп", які дозволяють вставити дизайн в потрібне місце). Мокап можуть бути і фотографії. Наприклад: блокнот, що лежить на столі, або візитка. Мокап можна зробити самостійно, купити або безкоштовно скачати готовий.
Як його створити?
Мокап - це макет з нуля. Зробити ідеальну роботу легко за допомогою відомої програми "Фотошоп". Наприклад, якщо потрібно або напис на візитку, найкраще скористатися готовими файлами. На спеціальних ресурсах є величезна безліч фотографій з порожніми візитками, що лежать на столі.
Слід відкрити фотографію в Photoshop і файл з готовою написом. Її потрібно грамотно помістити на візитку так, щоб створювалося відчуття реальності. Для цього використовуються всі доступні інструменти програми. Для такої роботи потрібно початкове знання графічного редактора. Якщо не знаєте, як зробити мокап самостійно, вивчіть теорію, а також постійно тренуйтеся.
Існує особливий алгоритм самостійного створення мокап. Хочете продемонструвати замовникові напис або цитату? Приготуйте фотоапарат і предмети для сцени: блокнот, красивий нейтральний фон. Виставите правильне освітлення, розташуйте об'єкти і зробіть кілька знімків.
Сфера застосування
Тепер читачі знають, що мокап - це макет візитки, журналу, книги, листівки, на який дизайнер накладає конкретну картинку, фотографію або напис. Цей процес допомагає візуалізувати роботу (наприклад, зробити напис на картці) і дозволяє замовнику зрозуміти, як буде виглядати результат. Мокап застосовується в створенні сайтів, веб-додатків, поліграфії, рекламних банерів, вивісок, меню і багато чого іншого. Часто до нього звертаються дизайнери інтер'єрів, коли готують проект приміщення.
мокап сайту
Створити мокап сайту зі знанням справи можуть лише професійні веб-дизайнери. Причина проста - фахівці не впадають в паніку, якщо замовник вимагає доопрацювання будь-яких деталей. Мокап допомагає дизайнерові побачити ідею, розвивати і вдосконалювати її в подальшому. Веб-каркас - це схематичний план інтернет-сторінки. Спочатку дизайнер малює його від руки на аркуші паперу. Це потрібно, щоб ефективніше використовувати інструменти графічних редакторів.
Каркас сайту створюється в чорно-білому кольорі, що дозволяє розробнику намітити розташування головних елементів: логотипу, меню, контенту, Після каркаса дизайнер розробляє прототип сайту: колір і стиль. На допомогу приходять одинадцять корисних інструментів. Вони виручать при створенні всіх деталей сайту. Зверніть увагу на програми InVision, UXPin, Marvel App, Gliffy, OmniGraffle, Moqups, Axure, JustinMind, Mockingbird, HotGloo, Mockplus.
Наприклад, Mockplus - простий інструмент дизайнера. Він допомагає створити каркас, перейти від чорно-білого варіанту до кольорового. Даний інструмент дозволяє використовувати більше двохсот компонентів, які набагато спрощують створення сайту. На допомогу дизайнеру приходять і інші програми. З їх допомогою легко створювати елементи сайту, опрацьовувати деталі, вчитися. Найпоширеніший і простий спосіб отримати навички - зробити мокап візитки.
Графічний редактор
Photoshop - одна з програм, яка приходить на допомогу дизайнерові при створенні різних проектів і макетів. Мокап для "Фотошопа" - це готові PSD-файли. Завантажити їх можна на платних, безкоштовних ресурсах або ж зробити самостійно. Найпростіше знайти готовий мокап і застосувати для демонстрації основної роботи.
Спробуйте зробити напис для буклету або листівки. Придумайте ідею, визначитеся з кольором. Зробіть начерк від руки на аркуші паперу. Потім здійсніть задумку в графічній програмі.
Легкий і популярний варіант серед новачків - це мокап візитки. Відкрийте скачаний файл, напис і текст. Перейдіть до готового мокап, натисніть на значок "Смарт-об'єкт" (це повинно бути зображення виберіть у меню "Редагувати вміст". В відкриється об'єкт, готовий для зміни. Далі активуйте створену напис або текст і перенесіть на поверхню візитки. Напис можете трансформувати, поміняти розмір, вибрати найбільш підходяще місце її розташування. Збережіть проект.
джерела
Немає нічого складного в створенні мокап. Вони спрощують основну роботу дизайнера, економлять сили і час. Якщо є бажання, створіть власну базу таких файлів і займіться їх продажем. Але для цього знадобиться хороший фотоапарат, навички зйомки, предмети, знання освітлення, почуття добре розвиненого смаку і стилю. Джерелами зображень можуть стати ресурси, які за певну плату продають готові картинки для демонстрації дизайну чого-небудь. Якщо немає вільних грошових коштів для покупки мокап, дизайнеру пропонується велика кількість безкоштовних джерел. Там c легкістю можна знайти для скачування тисячі красивих картинок на будь-яку тематику.
Мінуси готових мокап: однотипність, відсутність індивідуальності, шаблонність. Плюси - доступність, краса, мінімалістичний, максимальний реалізм, зручність. Якщо займаєтеся дизайном професійно, обов'язково майте напрацьовану базу мокап. Вона повинна підкреслювати стиль автора, вигідно демонструвати предмет продажу, залучати замовника.