Мокапи без Photoshop: як показати дизайн на справжній речі

Чому мокапи перетворюються на рутину

Переконливий мокап робить три речі: кладе дизайн на предмет у перспективі, пропускає крізь нього світло й складки предмета і зберігає дизайн чітким. Смарт-обʼєкти Photoshop роблять усе це добре. У доброму PSD є підігнане викривлення, шари тіней і відблисків у режимах Multiply і Screen, інколи карта зміщення для тканини, — тому він досі професійний стандарт.

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

Варіанти і їхня ціна

Photoshop зі смарт-обʼєктами дає найбільше контролю — за ціною підписки на Photoshop і самих мокапів. Онлайн-генератори на кшталт Placeit тримають великі бібліотеки в браузері, зазвичай за підпискою. У Canva є власні мокапи, і новіші дизайнерські сервіси, як-от Kittl і Recraft, теж їх додали; вони швидкі, а що саме входить, залежить від тарифу.

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

Як зробити мокап правдоподібним

Беріть фото, чий ракурс пасує дизайну: високій сторіз потрібен телефон, який тримають вертикально, широкій презентації — ноутбук чи планшет, постеру — стіна. Узгодьте світло: тепле фото з кавʼярні робить холодний синій дизайн наклеєним. На папері й тканині пропускайте крізь дизайн чималу частку тіней фото, на екрані — зовсім трохи, бо екран світиться сам.

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

Зроблено в Paletoo

Усі зображення на цій сторінці зроблено в Paletoo — ці три тими самими кроками на інших шаблонах:

Як це зробити в Paletoo

1. «Відкрити в Paletoo» відкриває приклад із цього посібника — сторіз застосунку Tolva «Order ahead. Skip the line.» — новим документом, вашою власною копією. З вашим дизайном так само: будь-який артборд, шаблон чи фото.

2. Натисніть E, щоб відкрити Елементи, і перейдіть до Мокапи. Тут десять наборів — пристрої, телефони в руці й у студії, складані й «летючі» пристрої, друк, вуличні постери, одяг, речі й пакування, кавʼярня, — і всі безкоштовні.

   

3. Перетягніть мокап на порожнє полотно поруч зі сторіз; для сторіз 9 : 16 пасує телефон у руці. Можна й клацнути: тоді мокап стане посеред видимої частини, за розміром артборда, що там є, — зручно, коли ви заздалегідь зробили порожній артборд для сцени.

   

4. Наповніть його: перетягніть артборд сторіз за назву на екран мокапа або клацніть екран і виберіть сторіз у розділі Артборд з цього документа. Дизайн ляже в перспективі й лишиться привʼязаним. Коли мокап вибрано, вкладка Дизайн показує його секцію Мокап.

   

5. Рядок Підігнати перемикає між Заповнити — дизайн покриває область друку й рівномірно обрізається — і варіантом, де дизайн уміщується цілим. Масштаб і Зсув кадрують його числами, а Редагувати дизайн — або подвійне клацання по мокапу — дає тягнути, масштабувати й повертати його просто на фото.

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

7. Виберіть мокап і натисніть Експорт: вибране експортується окремо, у PNG чи JPG, — або поставте мокап на окремий артборд для презентації чи PDF. Змініть сторіз пізніше — і мокап уже оновлено.

Зробіть по-своєму

Обирайте сцену за формою дизайну. Сторіз 9 : 16 природно лягає в телефон у руці чи на студійній підставці; пост 4 : 5 або постер — у рамку на стіні чи на вуличний мур; презентація 16 : 9 — на ноутбук чи планшет. Коли пропорції різні, Заповнити рівномірно обрізає дизайн, а Масштаб і Зсув вирішують, яка частина лишиться в кадрі.

Затінення — різниця між «надруковано» і «наліплено». Кожне фото починає зі свого значення; піднімайте його, доки складки тканини чи фактура стіни не проступлять крізь кольори, а тоді трохи відпустіть. Для високого дизайну — цілої сторінки сайту — увімкніть Прокручувати дизайн, і він прокрутиться екраном телефона донизу й назад; Рух камери повільно наближає й віддаляє фото. Обидва грають під полотном і експортуються в MP4, WebM чи GIF.

Стежте за розміром. Кожне фото мокапа — 1448 × 1086 px: досить для поста, слайда чи сторінки портфоліо, але замало для великого друку — туди надсилайте сам дизайн. Щоб показати один дизайн у кількох сценах, поставте кілька мокапів і привʼяжіть до кожного той самий артборд: змінюєте артборд один раз — і всі мокапи йдуть за ним.

Шаблони з цим ефектом

• Сторіз: замовлення в застосунку
• Пост: запуск застосунку
• Презентація: лукбук колекції

Зробити онлайн

• Генератор мокапів онлайнМокапи онлайн безкоштовно: покажіть свій дизайн на телефоні, постері, футболці чи сумці — зі справжнім світлом і складками, без водяного знака.
• Видалити фон з фотоВидаліть фон із фото одним кліком і залиште тільки головне — на власному пристрої, без завантаження на сервер і без кредитів.

Безкоштовні шаблони для дизайну: Шаблони постерів · Шаблони для команди й спікерів

Читайте далі

• 

  Альтернатива Canva для дизайнерів: справжня типографіка й друк

  Швидкий старт із шаблону — і всі інструменти, на які розраховує дизайнер.
• 

  Безшовна карусель в Instagram, що збігається на кожному розрізі

  Один широкий артборд, зображення крізь розрізи й окремий файл на кожен слайд.
• 

  Як зробити концертну афішу із шаблону

  Готовий концертний флаєр, ваші гурти й дата — файл для друку і для соцмереж.

Огляд: тренди графічного дизайну 2026